预览模式: 普通 | 列表

websocket前后端通讯模拟

作者:admin  日期:2022-06-13

 前端VUE代码：

Javascript代码
  1. test_ws() {  
  2.   // let websocket;  
  3.   let url = `ws://192.168.0.73:54000?id=888`;  
  4.   let websocket = new WebSocket(url,['token340987340697']);  
  5.     // 建立连接  
  6.     websocket.onopen = () => {  
  7.       // 发送数据  
  8.       console.clear();  
  9.       console.log("websocket发送数据中",websocket);  
  10.       websocket.send("发送数据!!!!!!");  
  11.     };  
  12.     // 客户端接收服务端返回的数据  
  13.     websocket.onmessage = evt => {  
  14.       console.log("websocket返回的数据：", evt.data);  
  15.     };  
  16.     // 发生错误时  
  17.     websocket.onerror = evt => {  
  18.       console.log("websocket错误：", evt);  
  19.     };  
  20.     // 关闭连接  
  21.     websocket.onclose = evt => {  
  22.       console.log("websocket关闭：", evt);  
  23.     };  
  24.   
  25.     this.my_ws = websocket   
  26. },  

后端node.js+koa：

Javascript代码
  1. app.ws.use((ctx, next) => {  
  2.     /* 每打开一个连接就往 上线文数组中 添加一个上下文 */  
  3.     ctxs.push(ctx);  
  4.     // console.log("🚀 ### ctx1",ctx.query.id)  
  5.     console.log("🚀 @@@@@@@@@@@", ctx.header["sec-websocket-protocol"])  
  6.     ctx.websocket.send("start!!!!"+_.random(999, 9999))  
  7.     ctx.websocket.on("message", (msg) => {  
  8.         console.log("🚀 ### msg2", msg.toString())  
  9.         if (ctx.query.id == '10001') {  
  10.             msg1.push(msg.toString())  
  11.         }  
  12.         if (ctx.query.id == '10002') {  
  13.             msg2.push(msg.toString())  
  14.         }  
  15.         /* for(let i = 0; i < ctxs.length; i++) { 
  16.             if (ctx != ctxs[i]) { 
  17.                 ctxs[i].websocket.send(message) 
  18.             } 
  19.         } */  
  20.     });  
  21.       
  22.     // 客户端主动断开链接时候用 可以先不管  
  23.     ctx.websocket.on("close", (message) => {  
  24.         console.log(ctx.query.id,"🚀 ### close###########")  
  25.         console.log(msg1);  
  26.         console.log('---------------');  
  27.         console.log(msg2);  
  28.         /* 连接关闭时, 清理 上下文数组, 防止报错 */  
  29.         let index = ctxs.indexOf(ctx);  
  30.         ctxs.splice(index, 1);  
  31.     });  
  32. });  

 

分类:前端研究 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 2663