Uniapp 封装的 websocket,无脑复制、粘贴即可使用]。
最编程
2024-06-02 11:43:57
...
首先先封装一份websocket.js文件
class websocket{
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) {
this.is_open_socket = false
this.reconnect();
}
}
// 进入这个页面的时候创建websocket连接【整个页面随时使用】
connectSocketInit() {
if(uni.getStorageSync('userinfo')==null){
var uid=0
}else{
var uid= uni.getStorageSync('userinfo').id
}
this.socketTask = uni.connectSocket({
url: this.url,
header: {
'token':uid
},
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) => {
var res=JSON.parse(res.data)
switch(res.type){
case -1://创建聊天室
//uiapp自带的跨页面存储信息,也可以使用vuex 缓存聊天信息,在维护vuex聊天信息
uni.$emit('getAddChat',res.data)
break;
case 1:// 更新消息列表
uni.$emit('getMsgList',res.data)
break;
case 2://聊天室最新数据列表
uni.$emit('getChatList',res.data)
break;
case 3://发送消息
uni.$emit('getChatSend',res.data)
break;
}
});
})
// 这里仅是事件监听【如果socket关闭了会执行】
this.socketTask.onClose(() => {
console.log("已经被关闭了")
this.is_open_socket = false;
this.reconnect();
})
}
//发送消息
async send(value) {
await new Promise((resolve) => {
setTimeout(() => {
resolve();
}, 1000);
});
// 注:只有连接正常打开中,才能正常成功发送消息
this.socketTask.send({
data: value,
async success() {
console.log("消息发送成功",value);
},
});
}
//开启心跳检测
start() {
this.heartbeatInterval = setInterval(() => {
this.data = "心跳"
this.send(this.data);
}, this.timeout)
}
//重新连接
reconnect() {
//停止发送心跳
clearInterval(this.heartbeatInterval)
//如果不是人为关闭的话,进行重连
if (!this.is_open_socket) {
this.reconnectTimeOut = setTimeout(() => {
this.connectSocketInit();
}, 3000)
}
}
//外部获取消息
getMessage(callback) {
this.socketTask.onMessage((res) => {
return callback(res)
})
}
}
module.exports = websocket
引用全局js main.js
//注意引用路径,文件位置随便放
import wsRequest from "@/util/websocke.js"
// // 开启websocket
// let websocket = new wsRequest("wss://域名/wss",5000) //正式环境
let websocket = new wsRequest("ws://127.0.0.1:2346",5000) //本地环境
// //挂载到全局
Vue.prototype.$ws = websocket
聊天室使用
<script>
export default {
data() {
return {
msgList: [],
}
},
onUnload() {
// 移除监听事件(注意页面卸载时移除全局使用)
uni.$off('getMsgList');
},
onLoad() {
this.monitorList()
},
onShow(){
this.getIMList()
},
methods: {
//请求消息列表
getIMList() {
let that = this;
let user_id = ‘用户标识’
let data = {
"user_id": user_id,
"method": "list"
}
//请求消息列表
that.$ws.send(JSON.stringify(data));
},
//实时获取消息列表
monitorList() {
uni.showLoading()
var that = this;
//此处与uni.$emit 一同使用
uni.$on('getMsgList', data => {
that.msgList = data
uni.hideLoading()
})
},
}
}
</script>
后端PHP使用tp框架及workerman搭建服务端websocket服务直达链接
后端PHP使用tp框架及workerman搭建服务端websocket服务直达链接