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>
相关推荐
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
00后程序员张9 小时前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
AD钙奶-lalala10 小时前
SpringBoot实现WebSocket服务端
spring boot·后端·websocket
萌萌哒草头将军11 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
海绵宝宝不喜欢侬11 小时前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_9151063211 小时前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq11 小时前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app
Qlittleboy11 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
写代码的jiang11 小时前
打造精简高效的 uni-app 网络请求工具
uni-app
小白菜学前端11 小时前
vue2 常用内置指令总结
前端·vue.js