基于uniapp的聊天系统，在接收到消息的时候播放提示音乐

最新推荐文章于 2024-05-21 22:09:46 发布

原创

最新推荐文章于 2024-05-21 22:09:46 发布 · 2.2k 阅读

10 ·

CC 4.0 BY-SA版权

本文介绍如何在uni-app中利用socketIO实现客服实时聊天系统，包括socketIO的封装、连接管理及消息推送处理等核心内容。

我先说我的文件结构和代码类型。应用了vuex的仓库来链接socket IO 和一些全局的方法和参数。至于vuex仓库是怎么使用的我这里就不过多的描述了。

在仓库中封装socket IO，链接对话框
这一部分代码，我在聊天系统/《uniapp中使用socket IO》里面有提到过，此处略过
index.js仓库↓↓

import io from '@hyoga/uni-socket.io';
export default new Vuex.Store({
   
   
	state: {
   
   
		isLoad: false,
		socket: null,
		lineState: false,
		clientId: null, //对方
		kefuId: null,
		target: null, //目标
		chatList: [],
		msg: null,
		action: null,
	},
	// 计算属性 可以获得参数,第一个是state,第二个是getters(自身) 用户传参(state,getters)=> (id)=>{}
	getters: {
   
   
		getUser: state => state.user,
		getToken: state => state.token,
		getClientId: state => state.clientId,
		getKeFuId: state => state.kefuId,
		getTarget: state => state.target,
		getChatList: state => state.chatList,
		getMsg: state => state.msg,
	},
	// 动态改变变量值
	mutations: {
   
   
	},
	actions: {
   
   
		connectSocket({
   
   
			state,
			dispatch
		}, data) {
   
   
			const socket = io(conf.socketUrl, {
   
   
				query: data,
				transports: ['websocket'],
				timeout: 5000,
			});
			socket.

最低0.47元/天解锁文章