websocket 前端项目js示例

websocket前端 和服务端websocket通信示例， 前端直接使用h5的内置对象 WebSocket 来创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据。

这个对象都是是事件方式来处理和与后端交互数据， 他们分别是 onopen打开, onclose关闭, onerror 异常 和  onmessage 收到消息这4个事件来处理。 其中我们的主要业务逻辑和数据的接收都是在onmessage里面完成的。 

websocket.js文件

// 根据不同的http环境构建对应的协议 ws 或者 wss
const getWsUri = () => {
    var loc = window.location,
        ws_prot = "ws:";
    if (loc.protocol === "https:") {
        ws_prot = "wss:";
    }
    return ws_prot + "//" + loc.host + loc.pathname + "ws"
}

var timeout = 250;

const clamp = (val, min, max) => {
    if (val < min) return min;
    if (val > max) return max;
    return val;
}

/* WebSocket 链接处理 */
const connect = () => {
    const uri = getWsUri();
    // 创建一个和服务端的WS链接对象
    let ws = new WebSocket(uri);
    console.info(`Attempting websocket connection to server at ${uri}`);
    // 链接打开时的处理方法
    ws.onopen = () => {
        console.info("Successfully connected");
        timeout = 250; // reset connection timeout for next time
    };
    // 链接关闭时的处理方法
    ws.onclose = event => {
        console.error(`Closed websocket connection: code ${event.code}`);
        setTimeout(connect, clamp(timeout += timeout, 250, 5000));
    };

    ws.onerror = err => {
        console.error(`Websocket error, closing connection.`);
        ws.close();
    };

   // onmessage这个是当ws收到数据时调用的方法
    ws.onmessage = event => {
        // 接收并返序列化JSON数据
        let data = JSON.parse(event.data)
        // 你的业务逻辑
       
    }
}
// 执行ws函数
connect();

其实前端的这websocket挺简单的， 只要你搞明白了上面的4个事件就OK, 更多的使用细节可参考MSDN官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

Websocket后端部分可参考： https://blog.csdn.net/tekin_cn/article/details/139534427