websocket使用教程

websocket连接函数

实现思路：封装一个连接函数,为后面重连实现复用，并实现连接错误等其他连接错误情况，返回一个Promise，在promise中实现连接后的情况，代码如下:

function reconnect() {
    return new Promise((resolve, reject) => {
        console.log("重连Ing....");
        if (socket && socket.readyState !== WebSocket.CLOSED) {
            socket.close();
        }
        socket = new WebSocket("ws://localhost:8080");
        socket.binaryType = 'USVString';
        socket.addEventListener("open", function (event) {
            console.log("WebSocket connection reopened.");
            resolve(socket); 
        });

        socket.addEventListener("error", function (event) {
            console.error("WebSocket error during reconnection:", event);
            reject(event);  
        });

        socket.addEventListener("close", function (event) {
            console.log("WebSocket connection closed during reconnection attempt.");
            reject(event); 
        });
        socket.onmessage = function (event) { 
          //消息监听
        }
    });
}

再写一个方法用来拿到连接webSocket之后的结果，并实现连接失败时重新发送连接请求，每次请求时间实现递增的效果

var socket; //连接实例，导出这个socket供外部使用
var time = 1000; //默认1s时间
function connnent(){
    reconnect().then((conn) => {
        console.log("Reconnected successfully!", conn);
        socket = conn;
    }).catch((error) => {
        console.error("Failed to reconnect:", error);
        // 处理重连失败后的逻辑
        setTimeout(connnent,time+=1000);
    });
}

实现心跳机制函数，检测socket是否存活

var heartbeat = setInterval(function(){
    socket.send("heart");
    //重连
    if(socket.readyState != 1){
      connnent()
    }
},30000);

关闭scoket连接

function closeWebSocket(){
    socket.close();
    clearInterval(heartbeat);//消除心跳
}

简易版服务端代码示例

通过广播发送接受到的消息

WebSocketServer.on('connection',function connection(ws){
  cilent.add(ws);
  ws.on('message',function incoming(message){
    console.log('received: %s',message)
    cilent.forEach(item=>{
      if (item !== ws && item.readyState === WebSocket.OPEN) {
        item.send(String(message));
      }
    })
  })
})

实现一个聊天对话框效果

实现断线重连状态：控制台显示报错信息，重复请求时间这里可以优化一下，避免发送过多的无用请求，本次请求是在每次请求之后增加一秒，避免重复调用

启动后端websocket服务，成功显示连接正常信息，并且不会发送多余请求，心跳连接机制正常发送

测试功能：