websocket 工具类封装

export default class SocketService{static instance=null;static get Instance(){if(!this.instance){this.instance=new SocketService();}}wx=null;callBackMapping={};connected=false;sendRetryCount=0;connectRetryCount=0;connect(){if(!window.WebSocket){return console.log("您的浏览器不支持websocket")}let url="ws:127.0.0.1:8888/websocket";this.ws=new WebSocket(url)this.ws.onopen=()=>{console.log("连接成功")this.connected=true;this.connectRetryCount=0;};this.ws.onclose=()=>{console.log("链接失败")this.connected=false;this.connectRetryCount++;setTimeout(()=>{this.connect();},500*this.connectRetryCount);};}//回调函数的注册registerCallBack(socketType,callBack){this.callBackMapping[socketType]=callBack;}//取消回调函数注册unRegisterCallBack(socketType){this.callBackMapping[socketType]=null;}//发送数据的函数send(data){if(this.connected){this.sendRetryCount=0;try{this.ws.send(JOON.stringify(data));}catch(e){this.ws.send(data)}}else{this.sendRetryCount++;setTimeout(()=>{this.send(data);},this.sendRetryCount*500)}}
}	

如何使用

1.导入
import SocketService from "@/utils/SocketService"

2.在data中定义全局句柄
socketServe:SocketService.Instance

3.初始化并使用

mounted(){init();this.socketServe.ws.onmessage=function(msg){console.log(msg.data,"chat————从服务器获取到了数据")const res=JSON.parse(msg.data)console.log("res的状态",res.type)if(res.type===0){this.receiveAllMsg.push({'type':'receive','content':res.params.message})}if(res.type===2){this.receiveAllMsg.push({"type":"receive","content":res.params.message})}}
}function init(){Toast.loading({message:"加载中...",forbidClick:true})const data=queryEyeUser().then(res=>{this.userlist=data.content;//向后端发送注册用户的消息sendRegisterData()Toast.clear()})
}SocketService.Instance.connect();this.socketServe=SocketService.Instance;
this.socketServe.registerCallBack("callback1",this.socketServe)//发送注册消息
function sendRegisterData(){const data={type:7,params:{openid:store.state.userInfo.openid,userName:store.state.userInfo.email}}this.socketServe.send(data);
}//发送消息function sendMsg2(){const data={type:1,params:{toMessageId:toUser.openid,message:content,fileType:0,}};this.socketServe.send(data)this.receiveAllMsg.push({'type':'self','connect':content})this.content=""
}