uniapp使用uni自带websocket进行即时通讯详细步骤
本文详细介绍在uniapp项目中如何利用uni.connectSocket等原生API实现即时通讯功能。内容涵盖WebSocket连接创建、消息监听、心跳机制处理及连接关闭等核心步骤,配合Vue2和uview组件库,提供从配置到代码实现的完整解决方案,帮助开发者快速搭建IM模块。
前言
近期在开发基于uniapp的即时通讯应用,现将相关实现思路整理记录。
本项目技术栈选用uniapp结合uview与vue2进行开发。
一、使用uni封装好的websocket。
以下API说明源自uniapp官方文档截图。

调用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.onSocketMessage()可接收服务器返回的消息数据。
//接收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("退出成功")
},
})
},此为个人简易记录,仅供参考。
总结
至此,关于uniapp使用uni自带websocket进行即时通讯的介绍结束,更多相关内容请搜索本站历史文章或继续浏览后续文章,感谢支持。
JS代码在线格式化工具推荐:无需安装快速美化
2026-11-05 17:17:49
WebStorm内置JS代码格式化功能怎么用
2026-11-05 10:10:47
在线JS代码格式化与混淆压缩工具推荐及使用指南
2026-11-03 20:31:53
CodePen、JSFiddle与RunJS对比:哪款在线JavaScript编辑器更好用
2026-11-03 18:52:45
无需安装环境,5款主流JavaScript在线运行工具推荐
2026-11-03 18:23:26
