目錄

• 前言
• 一、效果如圖
• 二、具體實現步驟
• 1.引入x
• 2.webscoked實現
• 總結

前言

這篇文章主要利用websocked 建立長連線，利用Vuex全域性通訊的特性，以及watch,computed函式監聽訊息變化，並驅動頁面變化實現實時聊天。

一、效果如圖

二、具體實現步驟

1.引入Vuex

程式碼如下（示例）：

//安裝vuex
npm install vuex

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

我對Vuex進行了簡單的封裝，如下圖，各位小夥伴可以按照自己使用的習慣進行。

2.webscoked實現

webscoked實現主要分為www.cppcns.com一下幾個部分：

建立連線

傳送心跳包

失敗或者出錯之後重新連結

const staigHRTTBte = {
    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.doctorBashttp://www.cppcns.com
 
icInfo.token 
        const webSocket = new WebSocket(realUrl)
        webSocket.onopen = () => {
   http://www.cppcns.com         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,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 www.cppcns.commsgList" :key="i" class="msgBox"></li>

webscoked實現思路講解

1.首先在actions中建立ws連結。

2.利用watch屬性在在頁面中監聽state中對應的訊息變化，當收到新的訊息之後，改變頁面展示的訊息列表，利用雙向繫結實現頁面自動更新。

3.傳送訊息的時候呼叫後端介面，並將新訊息插入到頁面展示的訊息列表中

4.因為ws是長連結一旦建立不會輕易斷開，所以只要收到後端推送的訊息，並判斷是否具有訊息內容，當有有訊息內容只需要改變state中的訊息列表，頁面就會根據watch屬性自動更新，完美實現即時通訊的功能。

總結

到此這篇關於websocket+Vuex實現一個實時聊天軟體的文章就介紹到這了,更多相關websocket+Vuex實時聊天內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！