VUE中的websocket的封装
socket.js 部分
var websock =null;
let rec;//断线重连后，延迟5秒重新创建WebSocket连接  rec⽤来存储延迟请求的代码
let isConnect =false;//连接标识避免重复连接
let checkMsg ="heartbeat";//⼼跳发送/返回的信息服务器和客户端收到的信息内容如果如下就识别为⼼跳信息不要做业务处理var globalCallback=function(){};
let createWebSocket=()=>{
try{
var ws ="ws://192.168.1.22:18308/chat";
websock =new WebSocket(ws);
initWebSocket();//初始化websocket连接
}catch(e){
console.log("尝试创建连接失败");
reConnect();//如果⽆法连接上webSocket 那么重新连接！可能会因为服务器重新部署，或者短暂断⽹等导致⽆法创建连接}
};
//定义重连函数
let reConnect=()=>{
console.log("尝试重新连接");
if(isConnect)return;//如果已经连上就不在重连了
rec &&clearTimeout(rec);
rec =setTimeout(function(){// 延迟5秒重连避免过多次过频繁请求重连
createWebSocket();
},5000);
};
//设置关闭连接
let closeWebSocket=()=>{
webSocket.close();
};
//⼼跳设置
var heartCheck ={
timeout:20000,//每段时间发送⼀次⼼跳包这⾥设置为20s
timeoutObj:null,//延时发送消息对象（启动⼼跳新建这个对象，收到消息后重置对象）
start:function(){
this.timeoutObj =setTimeout(function(){
if(isConnect) websock.send(checkMsg);
},this.timeout);
},
reset:function(){
clearTimeout(this.timeoutObj);
this.start();
}
};
// 初始化websocket
function initWebSocket(){
/
/ ws地址 -->这⾥是你的请求路径
let uName = Item("uName")
var ws ="ws://192.168.1.22:18308/chat?username="+ uName
websock =new WebSocket(ws)
websocketonmessage(e)
}
websocketclose(e)
}
websocketOpen()
// heartCheck.start();
}
// 连接发⽣错误的回调⽅法
console.log('WebSocket连接发⽣错误')
isConnect =false;//连接断开修改标识
reConnect();//连接错误需要重连
}
}
/
/ 实际调⽤的⽅法
function sendSock(agentData, callback){
globalCallback = callback
// console.log(globalCallback)
adyState === websock.OPEN){
// 若是ws开启状态
websocketsend(agentData)
}else adyState === websock.CONNECTING){ // 若是正在开启状态，则等待1s后重新调⽤
setTimeout(function(){
sendSock(agentData, callback)
},1000)
}else{
// 若未开启，则等待1s后重新调⽤
setTimeout(function(){
sendSock(agentData, callback)
},1000)
}
}
function getSock(callback){
globalCallback = callback
}
// 数据接收
function websocketonmessage(e){
console.log(e.data)
let O_o =JSON.parse(decodeUnicode(e.data))
if(!O_o){
}else{
if(O_o.msg =="open success"){
sessionStorage.setItem("wid", O_o.wid);
}else{
console.log(O_o);
globalCallback(O_o);
}
}
// globalCallback(JSON.parse(e.data))
function decodeUnicode(str){
str = place(/\\/g,"%");
websocket和socket//转换中⽂
str =unescape(str);
//将其他受影响的转换回原来
str = place(/%/g,"\\");
//对⽹址的链接进⾏处理
//对⽹址的链接进⾏处理
str = place(/\\/g,"");
return str;
}
}
// 数据发送
function websocketsend(agentData){
console.log(JSON.stringify(agentData))
websock.send(JSON.stringify(agentData))
}
// 关闭
function websocketclose(e){
console.log(e)
isConnect =false;//断开后修改标识
console.log('connection closed ('+ e.code +')')
}
// 创建 websocket 连接
function websocketOpen(e){
console.log('连接成功')
}
initWebSocket()
// 将⽅法暴露出去
export{
sendSock,
getSock,
createWebSocket,
closeWebSocket
}
main.js部分
// WebSocket封装⽅法
import*as socketApi from'./utils/socket'
Vue.prototype.socketApi = socketApi
view部分
methods部分
handleEnterThing(){
if(this.value !=""){
this.socketApi.sendSock(ConfigResult);
}
getConfigResult(res){
console.log(res.data)
}
created部分
created(){
ConfigResult);
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。