代码

1. 新建 socket.js ， 将以下代码复制进去 ，向外暴露。

import api from '@/common/js/config.js' // 接口Api，图片地址等等配置，可根据自身情况引入，也可以直接在下面url填入你的 webSocket连接地址
class socketIO {constructor(data, time, url) {this.socketTask = nullthis.is_open_socket = false //避免重复连接this.url = url ? url : api.websocketUrl  //连接地址this.data = data ? data : nullthis.connectNum = 1 // 重连次数this.traderDetailIndex = 100 // traderDetailIndex ==2 重连this.accountStateIndex = 100 // traderDetailIndex ==1 重连this.followFlake = false // traderDetailIndex == true 重连//心跳检测this.timeout = time ? time : 15000 //多少秒执行检测this.heartbeatInterval = null //检测服务器端是否还活着this.reconnectTimeOut = null //重连之后多久再次重连}// 进入这个页面的时候创建websocket连接【整个页面随时使用】connectSocketInit(data) {this.data = datathis.socketTask = uni.connectSocket({url: this.url,success: () => {console.log("正准备建立websocket中...");// 返回实例return this.socketTask},});this.socketTask.onOpen((res) => {this.connectNum = 1console.log("WebSocket连接正常！");this.send(data)clearInterval(this.reconnectTimeOut)clearInterval(this.heartbeatInterval)this.is_open_socket = true;this.start();// 注：只有连接正常打开中 ，才能正常收到消息this.socketTask.onMessage((e) => {// 字符串转jsonlet res = JSON.parse(e.data);console.log("res---------->", res) // 这里 查看 推送过来的消息if (res.data) {uni.$emit('getPositonsOrder', res); }});})// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接uni.onSocketError((res) => {console.log('WebSocket连接打开失败，请检查！');this.socketTask = nullthis.is_open_socket = false;clearInterval(this.heartbeatInterval)clearInterval(this.reconnectTimeOut)uni.$off('getPositonsOrder')if (this.connectNum < 6) {uni.showToast({title: `WebSocket连接失败，正尝试第${this.connectNum}次连接`,icon: "none"})this.reconnect();this.connectNum += 1} else {uni.$emit('connectError');this.connectNum = 1}});// 这里仅是事件监听【如果socket关闭了会执行】this.socketTask.onClose(() => {console.log("已经被关闭了-------")clearInterval(this.heartbeatInterval)clearInterval(this.reconnectTimeOut)this.is_open_socket = false;this.socketTask = nulluni.$off('getPositonsOrder')if (this.connectNum < 6) {this.reconnect();} else {uni.$emit('connectError');this.connectNum = 1}})}// 主动关闭socket连接Close() {if (!this.is_open_socket) {return}this.socketTask.close({success() {uni.showToast({title: 'SocketTask 关闭成功',icon: "none"});}});}//发送消息send(data) {console.log("data---------->", data);// 注：只有连接正常打开中 ，才能正常成功发送消息if (this.socketTask) {this.socketTask.send({data: JSON.stringify(data),async success() {console.log("消息发送成功");},});}}//开启心跳检测start() {this.heartbeatInterval = setInterval(() => {this.send({"traderid": 10260,"type": "Ping"});}, this.timeout)}//重新连接reconnect() {//停止发送心跳clearInterval(this.heartbeatInterval)//如果不是人为关闭的话，进行重连if (!this.is_open_socket && (this.traderDetailIndex == 2 || this.accountStateIndex == 0 || this.followFlake)) {this.reconnectTimeOut = setInterval(() => {this.connectSocketInit(this.data);}, 5000)}}
}
module.exports = socketIO

1. 在入口文件中 将 socketIO 挂载在 Vue 原型上 ， 也可以按需引入置顶页面 。

import socketIO from '@/common/js/scoket.js'
Vue.prototype.$socketIo = new socketIO()

1. 在需要用到webSocket的页面中使用如下方法（可根据自身业务需求进行整改）

scoketClose() {this.$socketIo.connectNum = 1const data = {"value1": "demo1""value2": "demo2"}this.$socketIo.send(data) // 这是给后端发送特定数据 关闭推送this.$socketIo.Close() // 主动 关闭连接 ， 不会重连
},getWebsocketData() {// 要发送的数据包const data = {"value": "value1","type": "type1"}// 打开连接this.$socketIo.connectSocketInit(data)// 接收数据uni.$on("getPositonsOrder", (res) => {this.connect = trueconst {Code,data} = resif (Code == xxxx) {// 根据后端传过来的数据进行 业务编写。。。} else {}})// 错误时做些什么uni.$on("connectError", () => {this.connect = falsethis.scoketError = true})
}

1. 离开页面，记得断开连接。

onUnload() {this.scoketClose()this.$socketIo.traderDetailIndex = 100 // 初始化 tabIndex
}