|
前言这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天。
一、效果如图
二、具体实现步骤
1.引入Vuex代码如下（示例）： //安装vuexnpm install vuex//main.js 中引入import store from './store'new Vue({ el: '#app', router, store, render: h => h(App)})我对Vuex进行了简单的封装，如下图，各位小伙伴可以按照自己使用的习惯进行。
2.webscoked实现webscoked实现主要分为一下几个部分： 建立连接 发送心跳包 失败或者出错之后重新链接 const state = { url: '', webSocket: null, lockReconnect: false, messageList: [], msgItem: {}, pingInterval: null, timeOut: null,}const mutations = { [types.INIT_WEBSOCKET](state, data) { state.webSocket = data }, [types.LOCK_RE_CONNECT](state, data) { state.lockReconnect = data }, [types.SET_PING_INTERVAL](state, data) { state.pingInterval = data }, [types.SET_MSG_LIST](state, data) { state.messageList.push(data) state.msgItem = data },}const actions={ initWebSocket({ state, commit, dispatch, rootState }) { if (state.webSocket) { return } const realUrl = WSS_URL + rootState.doctorBasicInfo.token const webSocket = new WebSocket(realUrl) webSocket.onopen = () => { console.log('建立链接'); dispatch('heartCheck') } webSocket.onmessage = e => { console.log('接收到消息', e); try { if (typeof e.data === 'string' && e.data !== 'PONG') { let res = JSON.parse(e.data) console.log('接收到内容', res); commit('SET_MSG_LIST', res) } } catch (error) {} } webSocket.onclose = () => { console.log('关闭'); dispatch('reConnect') } webSocket.onerror = () => { console.log('失败'); dispatch('reConnect') } commit('INIT_WEBSOCKET', webSocket) }, // 心跳包 heartCheck({ state, commit }) { console.log(state, 'state'); const { webSocket } = state const pingInterval = setInterval(() => { if (webSocket.readyState === 1) { webSocket.send('PING') } }, 20000) commit('SET_PING_INTERVAL', pingInterval) }, //重新链接 reConnect({ state, commit, dispatch }) { if (state.lockReconnect) { return } commit('INIT_WEBSOCKET', null) commit('LOCK_RE_CONNECT', true) setTimeout(() => { dispatch('initWebSocket') commit('LOCK_RE_CONNECT', false) }, 20000) }, }const getters = { webSocket: state => state.webSocket, messageList: state => state.messageList, msgItem: state => state.msgItem,}export default { namespaced: true, state, actions, mutations, getters}页面获取 methods: {...mapActions("webSocket", ["initWebSocket", "close"]), pushItem(item) { const initMsg = item; this.msgList.push(initMsg); }}mounted() { this.initWebSocket();}watch: { msgItem: function (item) { this.pushItem(item); } },computed: { ...mapGetters("webSocket", ["messageList", "msgItem"]), },UI界面 <li v-for="(item, i) in msgList" :key="i" class="msgBox"></li> webscoked实现思路讲解 1.首先在actions中创建ws链接。 2.利用watch属性在在页面中监听state中对应的消息变化，当收到新的消息之后，改变页面展示的消息列表，利用双向绑定实现页面自动更新。 3.发送消息的时候调用后端接口，并将新消息插入到页面展示的消息列表中 4.因为ws是长链接一旦建立不会轻易断开，所以只要收到后端推送的消息，并判断是否具有消息内容，当有有消息内容只需要改变state中的消息列表，页面就会根据watch属性自动更新，完美实现即时通讯的功能。
总结到此这篇关于websocket+Vuex实现一个实时聊天软件的文章就介绍到这了,更多相关websocket+Vuex实时聊天内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
jQuery实现滑动tab选项卡
react路由守卫的实现(路由拦截) |
