websocket的连接及使用

最新推荐文章于 2024-10-13 22:03:19 发布

鬼话00

最新推荐文章于 2024-10-13 22:03:19 发布

阅读量934

点赞数 1

文章标签： websocket Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_59733475/article/details/129320308

版权

创建一个websocket.js文件，定义一个websocketUtil类，用于处理WebSocket连接、心跳检测、重连功能。在connectSocketInit方法中初始化连接，onOpen事件处理成功连接，onClose事件处理连接关闭并重连。send方法用于发送数据，start方法启动心跳检测，reconnect方法处理重连逻辑。

摘要由CSDN通过智能技术生成

创建一个websocket.js文件

class websocketUtil {

constructor(url, time) {
this.is_open_socket = false //避免重复连接
this.url = url //地址
this.data = null
this.id = uni.getStorageSync('uid')
//心跳检测
this.timeout = time //多少秒执行检测
this.heartbeatInterval = null //检测服务器端是否还活着
this.reconnectTimeOut = null //重连之后多久再次重连
this.sendId = ""
try {
return this.connectSocketInit()
} catch (e) {
this.is_open_socket = false
this.reconnect();
}
}
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
this.socketTask = uni.connectSocket({
url: this.url,
id: this.id,
success: (res) => {
console.log("正准备建立websocket中...", res, this.id, this.url);
// 返回实例
return this.socketTask
},
});
this.socketTask.onOpen((res) => {
console.log("WebSocket连接正常！");
clearTimeout(this.reconnectTimeOut)
clearTimeout(this.heartbeatInterval)
this.is_open_socket = true;
this.start(this.sendId);
// 注：只有连接正常打开中 ，才能正常收到消息
this.socketTask.onMessage((res) => {
let json = JSON.parse(res.data)
console.log(json, '后端信息');
uni.$emit("onMessage", json)
});
})
// 监听连接失败，这里代码我注释掉的原因是因为如果服务器关闭后，和下面的onclose方法一起发起重连操作，这样会导致重复连接
// uni.onSocketError((res) => {
// console.log('WebSocket连接打开失败，请检查！');
// this.is_open_socket = false;
// this.reconnect();
// });
// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
this.is_open_socket = false;
this.reconnect();
})
}
//发送消息
send(value) {
// 注：只有连接正常打开中 ，才能正常成功发送消息
this.socketTask.send({
data: value,
async success() {},
});
}
//开启心跳检测
start(sendId) {
this.heartbeatInterval = setInterval(() => {
this.sendId = sendId
this.data = {
userId: this.id,
msgType: 1,
}
this.send(JSON.stringify(this.data));
}, this.timeout)
}
//重新连接
reconnect() {
//如果不是人为关闭的话，进行重连
if (!this.is_open_socket) {
this.reconnectTimeOut = setTimeout(() => {
this.connectSocketInit();
//停止发送心跳
clearInterval(this.heartbeatInterval)
}, 3000)
}
}
}
module.exports = websocketUtil

创建好以后需要在main.js文件中引入改文件，并注册为全局的量，、

//引入websocket文件
import wsRequest from 'websocket.js'

// let websocket = new wsRequest(`ws://地址`, 10000)
//挂载到全局
Vue.prototype.$socket = websocket