react 项目中封装 websocket

最新推荐文章于 2024-05-14 09:44:25 发布

新时代农民工Top

最新推荐文章于 2024-05-14 09:44:25 发布

阅读量489

点赞数 1

文章标签： react.js websocket 前端

本文链接：https://blog.csdn.net/web00_11/article/details/131594626

版权

WebSocket

// 用来将websocket 接口返回的数据传出来给外界使用
// npm install pubsub-js
import { PubSub } from 'pubsub-js';

export const createWebSocket = (url) => {
    let websocket, lockReconnect = false;
    let receiveData = null;
    websocket = new WebSocket(url);
    websocket.onopen = function () {
        console.log('建立连接成功！！！');
    }
    websocket.onerror = function () {
        if (lockReconnect) return;
        //没连接上会一直重连，设置延迟避免请求过多
        setTimeout(function () {
            createWebSocket(url);
            lockReconnect = false;
        }, 4000);
    };
    websocket.onclose = function (e) {
        console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
    }
    websocket.onmessage = function (event) {
        lockReconnect = true;
        //event 为服务端传输的消息，在这里可以处理
        receiveData = JSON.parse(event.data)
        PubSub.publish('message', receiveData)
    }

    return websocket
}