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

目录
  • 前言
  • 一、效果如图
  • 二、具体实现步骤
    • 1.引入Vuex
    • 2.webscoked实现
  • 总结

前言

这篇文章主要利用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)

相关推荐

  • Vue+WebSocket页面实时刷新长连接的实现

    最近vue项目要做数据实时刷新,折线图每秒重画一次,数据每0.5秒刷新一次,说白了就是实时刷新,因为数据量较大,用定时器估计页面停留一会就会卡死... 与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示,记录一下过程以及碰到的问题: 注意:页面刷新长连接会被关闭,其实进入当前页面建立长连接的目的就是页面不用F5刷新,所有数据自动实时刷新,如果还是来回F5大刷页面那就没有意义了... ps: 如果实在有这个需求的话,网上貌似有实现刷新页面长连接不断的方法,请自行百度....

  • 浅谈vue websocket nodeJS 进行实时通信踩到的坑

    先说明,我并不知道出现坑的原因是什么.我只是按照别人的写法就连上了. 我的处境是这样的 我的前台是用了 vue 全家桶,启动了一个 9527 端口. 而我的后台是用 nodeJS,启动了 8081 端口. 很明显,这种情况就出现了头疼的跨域. 贴出我的代码,如下 server.js(后台) var app = express(); var server = require('http').createServer(app); var io = require('socket.io')(serve

  • vue 实现websocket发送消息并实时接收消息

    公司做了个数字货币行情的H5,需要用到websocket,刚好自己也不会,可以学习一下,美滋滋. 项目结合vue脚手架和websocket来搭建,主要遇到了两个问题,一个是:断开重连机制要如何处理:另外一个是:如何在页面上随时的发送消息并实时接收返回的数据,断开重连后又如何重新发送消息,接收消息 一.断开重连机制处理 (详细参考这里) 写一个重连的方法(重连方法中必须加一把锁,重连方法执行过程中不再执行重连动作,避免重复连接),然后在websocket的onclose和error中绑定重连方法,

  • vue使用webSocket更新实时天气的方法

    目录 前言 关于 webSocket 的操作及示例: webSocket 1.关于 webSocket 2.与 AJAX 轮的区别 3.webSocket 事件 4. 一个简单的示例 天气更新 图片素材 重连机制 前言 在 vue 中使用 webSocket 做一个简单的天气实时更新模块. 关于 webSocket 的操作及示例: 1.webSocket 连接 2.接收数据 3.重连机制 webSocket 1.关于 webSocket webSocket 是 HTML5 开始提供的一种在单个

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

    目录 前言 一.效果如图 二.具体实现步骤 1.引入Vuex 2.webscoked实现 总结 前言 这篇文章主要利用websocked 建立长连接,利用Vuex全局通信的特性,以及watch,computed函数监听消息变化,并驱动页面变化实现实时聊天. 一.效果如图 二.具体实现步骤 1.引入Vuex 代码如下(示例): //安装vuex npm install vuex //main.js 中引入 import store from './store' new Vue({ el: '#ap

  • websocket+node.js实现实时聊天系统问题咨询

    1.最近新学习websocket.做了一个实时聊天.用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html 但是就是有很多问题,想让知道的人帮我看看哈: 我先把代码贴出来: server.js: var ws=require("nodejs-websocket"); console.log("开始建立连接..."); var str1=null,str2=null, clientReady=false,s

  • Asp.net SignalR创建实时聊天应用程序

    一.概述 使用 ASP.NET 那么 SignalR 2 创建一个实时聊天应用程序.将 SignalR 添加 MVC 5 应用程序中,并创建聊天视图发送并显示消息. 在Demo中,将学习SignalR 开发任务包括 ︰ 向 MVC 5 应用程序添加那么 SignalR 图书馆. 创建集线器和浩然启动类,以将内容推送到客户端. 使用 web 页中的那么 SignalR jQuery 库发送邮件并显示更新从集线器. 下面的屏幕快照显示在浏览器中运行的已完成的聊天应用程序. 二.实现 创建一个 ASP

  • HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天

    1.什么是WebSocket? WebSocket 是一种自然的全双工.双向.单套接字连接.使用WebSocket,你的HTTP 请求变成打开WebSocket 连接(WebSocket 或者WebSocket over TLS(TransportLayer Security,传输层安全性,原称"SSL"))的单一请求,并且重用从客户端到服务器以及服务器到客户端的同一连接.WebSocket 减少了延迟,因为一旦建立起WebSocket 连接,服务器可以在消息可用时发送它们.例如,和轮

  • Node.js websocket使用socket.io库实现实时聊天室

    认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部

  • 如何用PHP websocket实现网页实时聊天

    前言 最近艰难地"挤"出了一点时间,完善了很早之前做的 websocket "请求-原样返回"服务器,用js完善了下客户端功能,把过程和思路分享给大家,顺便也普及一下 websocket 相关的知识,当然现在讨论 websocket 的文章也特别多,有些理论性的东西我也就略过了,给出参考文章供大家选择阅读. 正文开始前,先贴一张聊天室的效果图(请不要在意CSS渣的页面): websocket 简介 WebSocket 不是一门技术,而是一种全新的协议.它应用 TCP

  • 微信小程序实时聊天WebSocket

    本文实例为大家分享了微信小程序实时聊天WebSocket的具体代码,供大家参考,具体内容如下 1.所有监听事件先在onload监听. // pages/index/to_news/to_news.js var app = getApp(); var socketOpen = false; var SocketTask = false; var url = 'ws://192.168.0.120:7011'; Page({ data: { inputValue: '', returnValue:

  • 使用node.js实现微信小程序实时聊天功能

    在微信这个聊天工具里的小程序上实现聊天功能,总感觉怪怪的.但领导要求了,总是要干的. 然后就实时通讯这个关键词展开搜索,穿梭于网页之间.不过粘贴复制的真的太多了,找了半天也没找到想要的,不过还是提取到了关键词的WebSocket和node.js的,然后搜索这两是啥,什么关系,总算明白了一点. 最后确定了第一步需要干的是用node.js搭建服务(我是装在自己的windows下的): 1.首先到官网下载node.js,下载链接 安装很简单,双击下载好的文件,直接下一步一步,没什么特殊的选择,路径默认

  • javascript和jQuery实现网页实时聊天的ajax长轮询

    介绍 大家都知道,HTTP协议是一个属于应用层的面向对象的协议,HTTP 协议一共有五大特点: 1.支持客户/服务器模式; 2.简单快速; 3.灵活; 4.无连接; 5.无状态. 所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式无非有这么几种: 1.长连接,即服务器端不断开联系,PHP服务器端用ob系列函数来不停的读取输出,但是相当耗费服务器资源. 2.Flash socket,

  • 使用Meteor配合Node.js编写实时聊天应用的范例

    我经常见到被拿来与Derby.js做比较的框架是Meteor.js. 与Derby相似的是,它也能在多个客户端下实时更新views, 尽管做法上可能跟Derby有点不同. Derby可以较容易的使用多种数据库, 而Meteor则只亲近于MongoDB. 事实上, 通过如Mongoose客户端接入数据库的API与你在服务端所期望的已经非常接近了. 虽然现在meteor是个有一些缺点和争议的框架, 但Meteor看起来是非常有趣的选择用来建立有实时需求的应用. 个人还是喜欢Derby基于传统回调的编

随机推荐