uniapp：小白1分钟学会使用webSocket（可无脑复制）

uni.connectSocket()
uni.$emit页面通信
项目中使用uni.connectSocket()创建webSocket的总结，代码可无脑复制，直接使用。

1、main.js 引入vuex

import store from './store';
Vue.prototype.$store = store;
1
2

vuex中封装webSocket

2、vuex的：index.js

import Vue from 'vue';
import Vuex	from 'vuex';
// 模块
import chat from './modules/chat';
Vue.use(Vuex);
const store = new Vuex.Store({
	modules: {
		chat,
	}
});
export default store;
1
2
3
4
5
6
7
8
9
10
11

3、vuex的chat

import Vue from 'vue';
export default {
	namespaced: true,
	state: {
		socketUrl:'wss://api.****.com/wss/default.io', // socke链接
		isclose: false, // 是否已连接
		reconnections: 0, // 连接次数
		heartbeatInterval: null, // 心跳检测
	},
	mutations: {
	},
	actions: {
		// 开始或重启即时通讯，全局监听
		async start({state, dispatch, rootState}){
			// 如果已连接，关闭重新连接
			uni.onSocketOpen(()=> {
				state.isclose = true;
			});
			if (state.isclose) {
				uni.closeSocket();
				uni.onSocketClose((res)=> {
					clearInterval(state.heartbeatInterval)
					state.heartbeatInterval = null
					console.log('已经连接中的Socket关闭成功')
				});
			}
			// 获取token省略，自行请求接口并赋值，这里只是快速演示如何：创建一个 WebSocket 连接
			let token = 'eyJ0****c1Ng'
			if(token){
				let url = `${state.socketUrl}?token=${token}`
				uni.connectSocket({url});
			}else{
				console.log('未获取到token');
			}
			
			// 监听 WebSocket 连接打开事件
			uni.onSocketOpen((res)=> {
				console.log('新创建的Socket连接成功');
			});
			
			// 监听WebSocket错误。
			uni.onSocketError((res)=> {
				state.reconnections += 1;
				if (state.reconnections <= 3) {
					console.log(`连接失败，正在尝试第${state.reconnections}次连接`);
					dispatch('start');
				}else{
					console.error('已尝试3次重新连接均未成功');
				}
			});
			
			// 监听socket接受到服务器的消息事件
			uni.onSocketMessage((res)=> {
				let getData = JSON.parse(res.data)
				if(getData.event == 'connect'){
					// 心跳
					state.heartbeatInterval = setInterval(()=>{
						uni.sendSocketMessage({data: '{"event":"heartbeat"}'});
					},5000)
				}
				
				// 通过uni.$emit触发全局的自定义事件，并在页面中通过uni.$on接收数据
				if(getData.event == 'event_talk'){
					uni.$emit('getMsg',getData.content); // 更新消息内容
					uni.$emit('getList',getData.content); // 更新消息列表
				}
			});
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

4、login：登录页面

// 登录接口，登录成功后，存储token，执行chat/start
this.$http.post('/api/').then(res=>{
	// 存储token
	uni.setStorageSync('token', res.token);
	this.$store.dispatch('chat/start');
})
1
2
3
4
5
6

5、聊天页面

<script>
	export default {
		data() {
			return {

			}
		},
		onUnload() {
			// 卸载监听
			uni.$off('getMsg')
			uni.$off('getList')
		},
		onLoad() {
			// 收到更新消息
			uni.$on('getMsg', data => {
				console.log('收到消息的监听getMsg：',data);
			})
			// 收到更新列表
			uni.$on('getList', data => {
				console.log('收到消息的监听getList：',data);
			})
		},
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24