websocket+Vuex實現一個實時聊天軟件
前言
這篇文章主要利用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實時聊天內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!