前言

这篇文章主要利用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 } = stateconst 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属性自动更新，完美实现即时通讯的功能。

总结

这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天

利用websocket+Vuex完成一个实时聊天软件（前端部分）相关推荐

有了这款开源实时聊天软件，在网上撩妹都方便多了
相关阅读:还在用 Guava Cache?它才是 Java 本地缓存之王! 开源最前线(ID:OpenSourceTop) 猿妹整编今天,猿妹要和大家分享一个开源的,功能强大的实时聊天软件--Ch ...
【亡羊补牢】计算机网络灵魂之问第9期如果让你做一个视频聊天软件，你用tcp还是udp？为什么？
这是博主面向腾讯学习的面试题大整理系列,可以在如下github仓库Issues中通过 Labels 标签分类查看相关内容,同时欢迎大家指正可能的错误并且提出自己的解答,希望大家学的鱼块,春秋招顺利! ...
找不到实时聊天软件？给你推荐电商企业都在用的！
关键词:实时聊天工具.跨境电商插件.用户运营随着对实时聊天集成的需求不断增加,以及为您的客户支持部门节省时间和金钱的好处,实时聊天选项是您可以集成到电子商务网站的最佳应用程序之一. 在这篇文章中,了 ...
React-Native with LeanCloud 构建实时聊天软件
React-Native with LeanCloud 构建的实时聊天软件本次hackpku中使用了rn框架写的安卓app.. 总结一下,坑多,水深. ↑感谢女票画的logo,虽然once拼成了oc ...
研究了11种实时聊天软件，我发现都具备这些功能…
关键词:聊天插件功能.自动化聊天机器人.用户运营查看最新和最好的电子商务企业实时聊天软件工具列表,从免费聊天应用程序到一体化平台. 根据 TechJury 的数据,四分之三的客户称他们更喜欢实时聊天 ...
Firebase 教程 —— 一个实时聊天室
原文链接 : Firebase Tutorial: Real-time Chat 原文作者 : David East 译者 : kmyhy 现在主流的 App 都开始支持聊天功能了--你的 App 是 ...
如何选择最佳的实时聊天软件
在客户服务和支持领域,实时聊天正在改变游戏规则已不是什么秘密.从推动销售到提升客户体验和提高保留率,实时聊天已成为与客户互动和支持的一种全新的方式.客户和支持专业人员都注意到了这一点. 研究发现,高达 ...
springboot+websocket+layui制作的实时聊天室，后端开发入门样例
实时聊天室前言效果图涉及技术 springboot layui websocket 实现思路 websocket在springboot下的实现前端实现建立websocket连接前端对应的w ...
实时聊天软件常用架构
我把第一个问题选为:QQ的架构.呵呵,题目是不是有点大?QQ现在的最高在线用户数是1900万,我们来讨论一下要作一个这样的架构如何来作更好,大家积极发言,这也是我这个周末为自己选择的思考题,呵呵.大家 ...

利用websocket+Vuex完成一个实时聊天软件（前端部分）

文章目录

前言

一、效果如图

二、具体实现步骤

1.引入Vuex

2.webscoked实现

总结

利用websocket+Vuex完成一个实时聊天软件（前端部分）相关推荐

最新文章

热门文章