记录uniapp微信小程序上使用websocket实现聊天

飞奔的喀纳斯蜗牛

已于 2022-03-03 15:27:00 修改

阅读量3.7k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：微信小程序 uniApp websocket 文章标签： websocket 小程序 uniapp

于 2021-10-18 10:31:28 首次发布

本文链接：https://blog.csdn.net/qq_39235090/article/details/120821384

本文介绍了在uniapp微信小程序中如何使用WebSocket实现聊天功能。在app.vue中，WebSocket在onLaunch中启动，但需在用户登录后进行。在onShow中监听用户登录，启动WebSocket。在index.vue聊天列表页面，监听newSocketMsg更新列表数据。chat.vue聊天页面则负责接收和发送消息，历史消息通过接口获取并存储，发送消息时先调用接口再通过WebSocket发送。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

app.vue页面

里面的message.type 是和后台商量的类型。

1. websocket是进小程序就要启动的，在onLaunch里面但是肯定是在用户登录之后才启动，不然要报错。

2. 在onShow里面监听了一个emit，在用户登录之后，要启动websocket。

<script>
	export default {
		data() {
			return {
				wsUrl: "wss://***.****.com/wss/",
				lockReconnect: false,  // 避免重复连接
				formId: null,
				toId: null,
				heartCheck : {
					timeout: 30000,
					timeoutObj: null,
					serverTimeoutObj: null,
					reset: () => {
						clearTimeout(this.heartCheck.timeoutObj);
						clearTimeout(this.heartCheck.serverTimeoutObj);
						return this.heartCheck;
					},
					start: () => {
						this.heartCheck.timeoutObj = setTimeout(() => {
							//这里发送一个心跳，后端收到后，返回一个心跳消息，
							//onmessage拿到返回的心跳就说明连接正常
							let heart = {
								type: "heart",
								fromId: this.formId
							}
							this.$store.state.wss.send({
								data: JSON.stringify(heart),
								success: () => {
									// console.log("发送一次心跳包", heart);
								}
							})
							this.heartCheck.serverTimeoutObj = setTimeout(() => {
								this.$store.state.wss.onOpen(_ => {
									this.$store.state.wss.close()
								})
							}, 70000) // 这里因为后台是60秒没反应就关闭，所以前端设置的是70秒关闭
							
						}, this.heartCheck.timeout)
					}
				}
			}
		},
		onLaunch: function() {
			console.log('App Launch')
			if(uni.getStorageSync('userInfo')) {
				this.createSocket(this.wsUrl)
				this.getMessageNum()
			}
		},
		onShow: function() {
			this.formId = uni.getStorageSync('userInfo').id
			uni.$on('openSocket', (data) => {
				this.formId = data.user_id
				this.createSocket(this.wsUrl)
				this.getMessageNum()
			})
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
			this.$store.state.wss.onOpen(_ => {
				this.$store.state.wss.close()
			})
		},