uniapp使用uni自带websocket进行即时通讯详细步骤

作者:工具松鼠时间:2026-10-31 08:39:55浏览:261

本文详细介绍在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进行即时通讯的介绍结束,更多相关内容请搜索本站历史文章或继续浏览后续文章,感谢支持。

作者最新文章