要领一.组件中单独使用

1.在methods中 WebSocketSet(){ if (‘WebSocket‘ in window){ this.ws = new WebSocket(`${axios.defaults.baseURL9}`); this.ws.onmessage = (res=>{ let received_msg= JSON.parse(res.data); console.log("数据已接收...",received_msg); this.newsList=received_msg; }) this.ws.onopen=(res=>{ console.log("socket连接告成") this.ws.send(this.currentId); }) //......此处省略ws其他属性操纵 }else{ alert(‘当前浏览器 Not support websocket‘) } }, 2.在destroyed中封锁websocket destroyed(){ this.ws.close();//分开路由之后断开websocket连接 }

要领二.封装大众要领

1.在src下创建文件夹存放websocket.js（soketLink中为请求处事） import wesk from "./soketLink" class socket{ constructor(){ this.ws=null } WebSocketSet(par, Callback) { if (‘WebSocket‘ in window) { this.ws=wesk.wesk() // var ws = new WebSocket(`${axios.defaults.baseURL9}`); this.ws.onopen = (res => { console.log("socket连接告成") this.ws.send(par); }) this.ws.onmessage = (res => { let received_msg = JSON.parse(res.data); console.log("数据已接收...", received_msg); // this.newsList=received_msg; Callback(received_msg) }) } else { alert(‘当前浏览器 Not support websocket‘) } } close(){ this.ws.close() this.ws.onclose = (res => { console.log(console.log("socket已经封锁")) }) } } export default socket 2.在组件中引入websocket.js import socket from "../../../resource/websocket.js" data中界说websocket:null, mounted() { this.websocket=new socket() this.websocket.WebSocketSet(this.currentId,this.getSocketdata); }, methods中接收数据 //websocket返回数据 getSocketdata(res){ console.log(res,997788) this.newsList=res }, destroyed(){ //分开路由之后断开websocket连接 this.websocket.close() }

websocket在vue中使用