快捷導(dǎo)航

websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件

更新時(shí)間：2021年08月06日 08:55:06 作者：小猿同學(xué)628

這篇文章主要利用websocked 建立長(zhǎng)連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽(tīng)消息變化，并驅(qū)動(dòng)頁(yè)面變化實(shí)現(xiàn)實(shí)時(shí)聊天，感興趣的可以了解一下

前言

這篇文章主要利用websocked 建立長(zhǎng)連接，利用Vuex全局通信的特性，以及watch,computed函數(shù)監(jiān)聽(tīng)消息變化，并驅(qū)動(dòng)頁(yè)面變化實(shí)現(xiàn)實(shí)時(shí)聊天。

一、效果如圖

在這里插入圖片描述

二、具體實(shí)現(xiàn)步驟

1.引入Vuex

代碼如下（示例）：

//安裝vuex
npm install vuex

//main.js 中引入
import store from './store'
new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
})

我對(duì)Vuex進(jìn)行了簡(jiǎn)單的封裝，如下圖，各位小伙伴可以按照自己使用的習(xí)慣進(jìn)行。

在這里插入圖片描述

2.webscoked實(shí)現(xiàn)

webscoked實(shí)現(xiàn)主要分為一下幾個(gè)部分：

建立連接

發(fā)送心跳包

失敗或者出錯(cuò)之后重新鏈接

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('接收到內(nèi)容', res);
                    commit('SET_MSG_LIST', res)
                }
            } catch (error) {}
        }
        webSocket.onclose = () => {
            console.log('關(guān)閉');
            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
}

頁(yè)面獲取

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實(shí)現(xiàn)思路講解

1.首先在actions中創(chuàng)建ws鏈接。

2.利用watch屬性在在頁(yè)面中監(jiān)聽(tīng)state中對(duì)應(yīng)的消息變化，當(dāng)收到新的消息之后，改變頁(yè)面展示的消息列表，利用雙向綁定實(shí)現(xiàn)頁(yè)面自動(dòng)更新。

3.發(fā)送消息的時(shí)候調(diào)用后端接口，并將新消息插入到頁(yè)面展示的消息列表中

4.因?yàn)閣s是長(zhǎng)鏈接一旦建立不會(huì)輕易斷開，所以只要收到后端推送的消息，并判斷是否具有消息內(nèi)容，當(dāng)有有消息內(nèi)容只需要改變state中的消息列表，頁(yè)面就會(huì)根據(jù)watch屬性自動(dòng)更新，完美實(shí)現(xiàn)即時(shí)通訊的功能。

總結(jié)

到此這篇關(guān)于websocket+Vuex實(shí)現(xiàn)一個(gè)實(shí)時(shí)聊天軟件的文章就介紹到這了,更多相關(guān)websocket+Vuex實(shí)時(shí)聊天內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: