websocket在vue中使用
2021-05-06 08:28
标签:sock set 引入 console received current ons 路由 创建文件 方法一.组件中单独使用 方法二.封装公共方法 websocket在vue中使用 标签:sock set 引入 console received current ons 路由 创建文件 原文地址:https://www.cnblogs.com/crazy-girl/p/12100976.html 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()
}