• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

websocket+Vuex实现一个实时聊天软件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前言

这篇文章主要利用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实时聊天内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
jQuery实现滑动tab选项卡发布时间:2022-02-05
下一篇:
react路由守卫的实现(路由拦截)发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap