uniapp:小白1分钟学会使用webSocket(可无脑复制)

uni.connectSocket()
uni.$emit页面通信

项目中使用uni.connectSocket()创建webSocket的总结,代码可无脑复制,直接使用。

1、main.js 引入vuex

js 复制代码
import store from './store';
Vue.prototype.$store = store;

vuex中封装webSocket

2、vuex的:index.js

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;

3、vuex的chat

js 复制代码
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); // 更新消息列表
				}
			});
		}
	}
}

4、login:登录页面

js 复制代码
// 登录接口,登录成功后,存储token,执行chat/start
this.$http.post('/api/').then(res=>{
	// 存储token
	uni.setStorageSync('token', res.token);
	this.$store.dispatch('chat/start');
})

5、聊天页面

js 复制代码
<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>
相关推荐
GIS程序媛—椰子24 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
半桶水专家1 小时前
用go实现创建WebSocket服务器
服务器·websocket·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
麦麦大数据1 小时前
基于vue+neo4j 的中药方剂知识图谱可视化系统
vue.js·知识图谱·neo4j
customer082 小时前
【开源免费】基于SpringBoot+Vue.JS医院管理系统(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·开源·intellij-idea
FeelTouch Labs2 小时前
Netty实现WebSocket Server是否开启压缩深度分析
网络·websocket·网络协议
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图