前言
这篇文章主要利用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属性自动更新，完美实现即时通讯的功能。
总结
这篇文章主要利用websocked 建立长连接，利用Vuex全局通信的特性，以及watch,computed函数监听消息变化，并驱动页面变化实现实时聊天
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/176290.html原文链接：https://javaforall.net
