Mikel
来源： uni-app使用websocket（封装、心跳检测）_howcoder的博客-CSDN博客_uniapp websocket
前言：
最近想在uni-app的小程序中使用websocket进行双通讯的，而uni-app的插件市场中对websocket也做了很好的封装，例如：socket.io，但由于后端使用java的websocket，导致我在socket的url总是对应不上那边，所以无奈只能改成原生websocket，而uni-app中websocket很多文章都有介绍，然而直接使用时总是有或多或少的问题，所以对其进行了封装和修改，并且在项目中能正常使用，下面就直接上代码
封装websocket
class websocketUtil {
constructor(url, time) {
this.is_open_socket = false //避免重复连接
this.url = url //地址
this.data = null
//心跳检测
this.timeout= time //多少秒执行检测
this.heartbeatInterval= null //检测服务器端是否还活着
this.reconnectTimeOut= null //重连之后多久再次重连
try {
return this.connectSocketInit()
} catch (e) {
console.log(‘catch’);
this.is_open_socket = false
this.reconnect();
}
}
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
this.socketTask = uni.connectSocket({
url: this.url,
success:()=>{
console.log(“正准备建立websocket中…”);
// 返回实例
return this.socketTask
},
});
this.socketTask.onOpen((res) => {
console.log(“WebSocket连接正常！”);
clearTimeout(this.reconnectTimeOut)
clearTimeout(this.heartbeatInterval)
this.is_open_socket = true;
this.start();
// 注：只有连接正常打开中 ，才能正常收到消息
this.socketTask.onMessage((res) => {
console.log(res.data)
});
})
// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
// uni.onSocketError((res) => {
// console.log(‘WebSocket连接打开失败，请检查！’);
// this.is_open_socket = false;
// this.reconnect();
// });
// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
console.log(“已经被关闭了”)
this.is_open_socket = false;
this.reconnect();
})
}
//发送消息
send(value){
// 注：只有连接正常打开中 ，才能正常成功发送消息
this.socketTask.send({
data: value,
async success() {
console.log(“消息发送成功”);
},
});
}
//开启心跳检测
start(){
this.heartbeatInterval = setTimeout(()=>{
this.data={value:”传输内容”,method:”方法名称”}
console.log(this.data)
this.send(JSON.stringify(this.data));
},this.timeout)
}
//重新连接
reconnect(){
//停止发送心跳
clearInterval(this.heartbeatInterval)
//如果不是人为关闭的话，进行重连
if(!this.is_open_socket){
this.reconnectTimeOut = setTimeout(()=>{
this.connectSocketInit();
},3000)
}
}
}
module.exports = websocketUtil
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
调用方式
1.单页面调用
引入
import wsRequest from ‘./static/js/websocket.js’
1
使用
new wsRequest(“ws://xxx:3100/connect/websocket”,5000)
1
2.全局调用
在main.vue页面中
//引入websocket文件
import wsRequest from ‘./static/js/websocket.js’
//开启websocket
let websocket = new wsRequest(“ws://xxx:3100/connect/websocket”,5000)
//挂载到全局
Vue.prototype.$socket = websocket
1
2
3
4
5
6
页面中调用
let data={value:”传输内容”,method:”方法名称”}
this.$socket.send(JSON.stringify(data));
1
2
注意事项
//在测试环境时url可以写成 ws://xxx:3100/connect/websocket
new wsRequest(“ws://xxx:3100/connect/websocket”,5000)
//发布体验版或正式版，url一定要写成 wss://xxx:3100/connect/websocket
new wsRequest(“wss://xxx:3100/connect/websocket”,5000)
1
2
3
4
5
除此之外，还需要在微信管理平台中对小程序的开发–>开发管理–>开发设置–>服务器域名 加入以下配置
————————————————
版权声明：本文为CSDN博主「howcoder」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42000816/article/details/113307548
