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, // 连接初始尝试的超时时间 10000maxRetries: 100, // 连接失败后，最大允许的重试次数 100maxReconnectionDelay: 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：是需要重新修改的参数。
这样就能指定到上次发送请求的实例上面重新发送了。