目录
前言
这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天。
一、效果如图
二、具体实现步骤
1.引入Vuex
代码如下（示例）：
//安装vuex
npm 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实时聊天内容请搜索华域联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持华域联盟！
您可能感兴趣的文章:
- Vue+Websocket简单实现聊天功能
- vue使用WebSocket模拟实现聊天功能
- Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
- 基于node+vue实现简单的WebSocket聊天功能
- 基于vue和websocket的多人在线聊天室
- vue+web端仿微信网页版聊天室功能
- Vue.js仿微信聊天窗口展示组件功能
- vue + socket.io实现一个简易聊天室示例代码
- vue实现websocket客服聊天功能
本文由 华域联盟 原创撰写：华域联盟 » websocket+Vuex实现一个实时聊天软件
转载请保留出处和原文链接：https://www.cnhackhy.com/78322.htm
