vue内写websocket实时订阅

首先安装插件reconnecting-websocket

或者不安装也可以，这个插件只是在断连之后可以重新连接

引入插件
import ReconnectingWebSocket from 'reconnecting-websocket';。

js文件：

export const WebSocketClass = (url, params, successFn, errorFn, closeFn) => {
    if (window.location.protocol == 'http:') {
        url = 'ws://' +  url;
    } else {
        url = 'wss://' + url;
    }
    console.log(url, 'websocket路径2')

    const options = {
        // WebSocket: WebSocket, // 允许你指定一个自定义的 WebSocket 构造函数，通常用于在不同环境中使用不同的 WebSocket 实现
        connectionTimeout: 10000, // 连接初始尝试的超时时间 10000
        maxRetries: 100, // 连接失败后，最大允许的重试次数 100
        maxReconnectionDelay: 10000, // 这是连接重试之间的最大延迟
        minReconnectionDelay: 1000, // 连接重试之间的最小延迟
        reconnectionDelayGrowFactor: 1, // 用来控制每次重试之间延迟的增长速度
        automaticOpen: params.automaticOpen || false,  // 自动连接
        debug: false // enables debug output
    };


    const ws = new ReconnectingWebSocket(url, [], options);
    // 没有引入插件的话用下面的
    // let ws = new WebSocket(url);
    ws.addEventListener('open', () => {
        console.log('进入websocket');
        // 将消息发送到服务端
        if (ws.readyState == 1) {
            ws.send(JSON.stringify(params));
            console.log('发送数据:', JSON.stringify(params));
        } else {
            console.log('websocket未连接，请重新刷新页面');
        }
    });
    
    // 当客户端收到服务端发来的消息时，触发onmessage事件，参数e.data包含server传递过来的数据
    ws.addEventListener('message', event => {
        if (event.data) {
            successFn(JSON.parse(event.data));
        }
    });
    // 当客户端收到服务端发送的关闭连接请求时，触发onclose事件
    ws.addEventListener('close', () => {
        console.log('WebSocket 连接已关闭');
        closeFn && closeFn();
    });
    // 如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
    ws.addEventListener('error', error => {
        console.error('WebSocket 错误:', error);
        errorFn && errorFn(error);
    });

    window.onbeforeunload = () => {
        console.log('离开当前页面')
        ws.close();
    };

    return ws;
};

export const socketSend = (socket, params) => {
    if (socket.readyState == 1) {
        socket.send(params);
    } else {
        console.log('预结算websocket未连接，请重新刷新页面');
    }
};

总共两个方法，WebSocketClass 和 socketSend

WebSocketClass 是初始化调用的方法，

• url: 订阅的地址
• params：订阅传的参数
• successFn：订阅成功执行的方法
• errorFn：订阅失败执行的方法
• closeFn：订阅关闭执行的方法

调用：

this.websock = WebSocketClass(url, params, (par)=> {
//   成功方法 successFn(par)
}, (err)=> {
//    失败方法 errorFn()
}, (close)=> {
//	closeFn()
})

正常情况只需要上面这一个方法，但是如果自己想在某个时间点换参数换，就需要重新发送请求，就用到socketSend方法。这个方法有两个参数：

• socket：表示接收WebSocketClass的实例，也就是上面的this.websock
• params：是需要重新修改的参数。

这样就能指定到上次发送请求的实例上面重新发送了。