基于vue的前端socket处理模板 整体思路如下：
1、初始化注册webSocket事件：
//初始化⽅法，先注册websoct事件
initWebsocket() {
const wsuri = “wss:///ws”;
this.websock = new WebSocket(wsuri);
pen = this.websocketonopen;        //定义建⽴连接⽅法
ssage = this.websocketonmessage;  //定义接收数据⽅法
r = this.websocketonerror;      //定义建⽴连接失败⽅法
lose = this.websocketclose;        //定义连接关闭⽅法
}
2、建⽴连接 （pen）
// 连接建⽴之后执⾏send⽅法发送数据
websocketonopen() {
//成功建⽴连接之后，开启⼼跳机制发送数据
this.heartCheck();
},
3、 连接建⽴失败，执⾏重连机制
//连接建⽴失败，执⾏重连机制
前端websocket怎么用websocketonerror() {
this.initWebSocket();
},
4、 关闭webSocket
// 关闭websocket
websocketclose(e) {
this.websock.close();
},
5、接收数据
// 数据接收
websocketonmessage(e) {
//以下为具体业务逻辑处理，仅供参考
let newMd5 = md5(e.data);
if (newMd5 === pitData) {
} else {
const recData = JSON.parse(e.data);
const reData = recData.data;
if (uteId === "response") {
if (this.initializationState) {
let actions = {
routeId: "subscribe",
data: ["alarm", "doorRecord",'parkRecord'],
userId: Item("userCode"),              regionId: this.areaCode
};
this.websocketsend(JSON.stringify(actions));
this.initializationState = false;
}
}else{
}
}
},
6、⼼跳机制
heartCheck() {
let that = this;
let data = {
routeId: "connect",
userId: Item("userCode"),
regionId: this.areaCode
};
if (this.websock && adyState === 1) {        this.websock.send(JSON.stringify(data));
}
if (heartbeat) clearTimeout(heartbeat);
heartbeat = setTimeout(() => {
this.initializationState=true;
that.heartCheck();
}, 30000);
},
0 - 表⽰连接尚未建⽴。
1 - 表⽰连接已建⽴，可以进⾏通信。
2 - 表⽰连接正在进⾏关闭。
3 - 表⽰连接已经关闭或者连接不能打开webSocket的⼼跳以及重连机制
在使⽤websocket的过程中，有时候会遇到⽹络断开的情况，但是在⽹络断开的时候服务器端并没有触发onclose的事件。这样会有：服务器会继续向客户端发送多余的链接，并且这些数据还会丢失。所以就需要⼀种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的⼼跳了。还有⼼跳，说明还活着，没有⼼跳说明已经挂掉了。
1. 为什么叫⼼跳包呢？
它就像⼼跳⼀样每隔固定的时间发⼀次，来告诉服务器，我还活着。
2. ⼼跳机制是？
⼼跳机制是每隔⼀段时间会向服务器发送⼀个数据包，告诉服务器⾃⼰还活着，同时客户端会确认服务器端是否还活着，如果还活着的话，就会回传⼀个数据包给客户端来确定服务器端也还活着，否则的话，有可能是⽹络断开连接了。需要重连~

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