帮助文档
专业提供香港服务器、香港云服务器、香港高防服务器租用、香港云主机、台湾服务器、美国服务器、美国云服务器vps租用、韩国高防服务器租用、新加坡服务器、日本服务器租用 一站式全球网络解决方案提供商!专业运营维护IDC数据中心,提供高质量的服务器托管,服务器机房租用,服务器机柜租用,IDC机房机柜租用等服务,稳定、安全、高性能的云端计算服务,实时满足您的多样性业务需求。 香港大带宽稳定可靠,高级工程师提供基于服务器硬件、操作系统、网络、应用环境、安全的免费技术支持。
服务器资讯 / 香港服务器租用 / 香港VPS租用 / 香港云服务器 / 美国服务器租用 / 台湾服务器租用 / 日本服务器租用 / 官方公告 / 帮助文档
uniapp使用uni自带websocket进行即时通讯
发布时间:2024-03-11 04:56:49   分类:帮助文档
uniapp使用uni自带websocket进行即时通讯

最近再办一个uniapp做的即时通讯,把其中思路记载一下。
技术栈采用uniapp+uview+vue2进行开发。

一、使用uni封装好的websocket。
下面的从uniapp官网截图的Api


 uni.connectSocket() :这个方法可以让我们创建一个webSocket的连接,里面包含几个参数,url是写ws的连接地址,没有的话肯定是连接不上服务器,其他的没用过。用的时候再看。

// 创建webSocket
this.webSocketTask = uni.connectSocket({
url: '这里面写的是连接地址',
header: {
'content-type': 'application/json'
},
success(res) {
console.log('成功', res);
},
})

我们在data中定义一个webSocket:null,然后把websocket对象赋给他,以供下面的方法使用。




 uni.onSocketOpen()是用来监听websocket连接成功的事件,方法里面跟一个回调函数,可以通过res参数拿到响应头。

//监听WebSocket连接打开事件
this.webSocketTask.onOpen((res) => {
console.info("监听WebSocket连接打开事件", res)
});


 这个没用过,过!!!




 通过uni.onSocketMessag()可以接收到服务器返回的消息。

//接收websocket消息及处理
this.webSocketTask.onMessage((res) => {
let data = JSON.parse(res.data);
//判断服务器返回的type类型
switch (data.type){
//如果返回的ping,说明服务端ping客户端
case 'ping':
//我们要给服务器说一个pong告诉服务器我还活着
this.webSocketTask.send({
data: JSON.stringify({
type: 'pong'
})
});
break;
//登录更新用户列表
//如果type是init,说明服务器知道我们活着,给我们传一个标识,我们通过这个标识去请求接口,
建立唯一链接。
case 'init':
uni.setStorageSync('client_id', data.client_id);
this.$u.post('common/pub/bindUid',{
client_id: data.client_id,
user_id: this.userId
}).then(res => {
this.webSocketTask.send({
data: JSON.stringify({
type: 'bindUid',
user_id:2
})
});
});
break;
case 'simple':
this.userList.push(data.data)
this.scrollToBottom()
break;
case 'group':
this.userList.push(data.data)
this.scrollToBottom()
break
}




这个的话按官方文档说的就是需要卸载uni。onSocketOpen回调里面才行。但是我直接通过实例对象发也可以。
this.webSocketTask.send({
data: JSON.stringify({type: 'pong'})
});
注意:websocket只能接收字符串,记得转换类型


这个就是关闭连接,写在onUnload钩子中就行
onUnload(){
uni.closeSocket({
success:() => {
console.info("退出成功")
},
})
},

 最后一个就是监听websocket是否关闭。
uniapp官网文档:uni.connectSocket(OBJECT) | uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/websocket.html
uni-app官网 (dcloud.net.cn)https://uniapp.dcloud.net.cn/api/request/socket-task.html完整代码:
onLoad(){
this.socket()
};


methods:{
socket(){
//创建webSocket
this.webSocketTask = uni.connectSocket({
url: 'ws地址',
header: {
'content-type': 'application/json'
},
success(res) {
console.log('成功', res);
},
})

// 监听WebSocket连接打开事件
this.webSocketTask.onOpen((res) => {
console.info("监听WebSocket连接打开事件", res)
});

// 监听WebSocket错误
uni.onSocketError((res) => {
console.info("监听WebSocket错误" + res)
});
}

onShow(){
// 接收websocket消息及处理
this.webSocketTask.onMessage((res) => {
let data = JSON.parse(res.data);
switch (data.type) {
// 服务端ping客户端
case 'ping':
this.webSocketTask.send({
data: JSON.stringify({
type: 'pong'
})
});
break;
// 登录 更新用户列表
case 'init':
uni.setStorageSync('client_id', data.client_id);
this.$u.post('接口', {
client_id: data.client_id,
user_id: this.userId
}).then(res => {
this.webSocketTask.send({
data: JSON.stringify({
type: 'bindUid',
user_id: this.userId
})
});
});
break;
case 'simple':
this.userList.push(data.data)
this.scrollToBottom()
break;
case 'group':
// this.groupMenuList()
this.userList.push(data.data)
this.scrollToBottom()
break
}

});
}

onUnload() {
uni.closeSocket({
success: () => {
console.info("退出成功")
},
})
},

只是个人简单记录!!!



香港云服务器租用推荐
服务器租用资讯
·广东云服务有限公司怎么样
·广东云服务器怎么样
·广东锐讯网络有限公司怎么样
·广东佛山的蜗牛怎么那么大
·广东单位电话主机号怎么填写
·管家婆 花生壳怎么用
·官网域名过期要怎么办
·官网邮箱一般怎么命名
·官网网站被篡改怎么办
服务器租用推荐
·美国服务器租用
·台湾服务器租用
·香港云服务器租用
·香港裸金属服务器
·香港高防服务器租用
·香港服务器租用特价