基于websocket vue 聊天demo 解决方案
基于websocket vue 聊天demo 解决方案
demo 背景 电商后台管理的客服
相关技术
- vuex
- axios
- vue
- websocket
聊天几种模型
一对一模型
一对一 消息只一个客户端发送 另一个客户端接收
场景 : 两个客户端之间的对话 私信
一对多模型
一对多 这种模型 一个客户端发送多个客户端接收
场景 : 系统通知推送 系统公告 广告推送 群聊
两种模型不一定是独立的 都是相互依存的 例如:当两个客户端之间进行聊天时那么属于一对一 如果其中一个客户端下线了那么这个客户端要发送一个一对多推送 告诉所有与这个客户端建立有连接的客户端 通知它们自己下线了
客服聊天的实现
客服聊天属于 客服人员 与顾客之间的一对一的聊天。
具体实现
state: {
//websocket实例
socket: null,
// 客户信息
cusInfoList: [
],
//当前对话客户聊天记录
messageLog: [
],
//当前对话客户id
currCusId:'',
},
socket
用于创建websocket实例的存储 保证全局只有唯一的一个会话客户端
cusInfoList
存储聊天对话列表 一般在服务端都有存储 可以主动请求服务端获取聊天列表
messageLog
存储正在对话的客服与客户的聊天记录 当切换对话客户时更换聊天记录
currCusId
正在对话的客户唯一标识符
cusInfoList
中可以存储 用户头像 昵称 用户在线状态 待读消息数 最后一条消息 .......用于展示
mutations: {
//添加聊天记录
messageLogChange(state, messages) {
},
//删除客户
cusInfoListDel() {
},
//创建websocket实例
init: function (state) {
if (typeof WebSocket === "undefined") {
alert("您的浏览器不支持socket");
} else {
// 实例化socket
state.socket = new WebSocket('ws://192.168.31.199:8888/chat');
// 监听socket连接
state.socket.onopen = function () {
console.log("socket连接成功")
}
// 监听socket错误信息
state.socket.onerror = function () {
console.log("连接错误")
}
// 监听socket消息
state.socket.onmessage = function (msg) {
}
state.socket.onclose = function () {
console.log("socket已经关闭")
}
}
},
//发送消息
send: function (state, msg) {
state.socket.send(JSON.stringify(msg))
},
//清空未读消息
clearUnread(state , uid){
}
},
mutations 中的方法都为操作state的方法
主要进行
- Websocket 实例化
- 监听websocket推送的消息
- 发送消息
- 发生错误 处理
另外根据需要 添加 未读消息操作 添加聊天记录等方法
核心:
消息监听
state.socket.onmessage = function (msg) {}
此方法用于监听收到的消息 可以是 二进制格式也可以是串格式 但不管那种格式 消息中一定会携带发送者信息和接收者信息 收到消息后 要判断几个方面
每次切换聊天对象都要 注意 消息记录存储 未读消息清空
actions: {
getMessageLog(context, args) {
context.commit('clearUnread', args.split(",")[0])
Axios.get('http://192.168.31.199:8888/common/chat/messageRecord', {
params: {
}
})
.then(function (response) {
context.commit('messageLogChange', response.data.data)
})
.catch(function (error) {
console.log(error);
});
}
},
actions
发异步请求 例如获取客户信息 每次切换时获取聊天记录 等
问题
1
<div ref="myScrollbar">
.......
</div>
点击消息发送后 滚动面板不会置底 vue 版本3.0(其他版本可能不同)
//聊天置底
scrollDown() {
this.$refs.myScrollbar.scrollTop = this.$refs.myScrollbar.scrollHeight;
},
一定要在updated
中调用
updated() {
this.scrollDown();
},
问题
2
滚动态样式修改
.myScrollbar::-webkit-scrollbar {
/*滚动条整体样式*/
width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.myScrollbar::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
background: transparent;
}
.myScrollbar::-webkit-scrollbar-track {
/*滚动条里面轨道*/
border-radius: 10px;
background: transparent;
}
基于websocket vue 聊天demo 解决方案的更多相关文章
- Ext JS学习第十六天 事件机制event(一) DotNet进阶系列(持续更新) 第一节:.Net版基于WebSocket的聊天室样例 第十五节:深入理解async和await的作用及各种适用场景和用法 第十五节:深入理解async和await的作用及各种适用场景和用法 前端自动化准备和详细配置(NVM、NPM/CNPM、NodeJs、NRM、WebPack、Gulp/Grunt、G
code&monkey Ext JS学习第十六天 事件机制event(一) 此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习 今天我们来说一说什么是事件,对于事件 ...
- 基于WebSocket实现聊天室(Node)
基于WebSocket实现聊天室(Node) WebSocket是基于TCP的长连接通信协议,服务端可以主动向前端传递数据,相比比AJAX轮询服务器,WebSocket采用监听的方式,减轻了服务器压力 ...
- 第一节:.Net版基于WebSocket的聊天室样例
一. 说在前面的话 该篇文章为实时通讯系列的第一节,基于WebSocket编写了一个简易版聊天样例,主要作用是为引出后面SignalR系列的用法及其强大方便之处,通过这个样例与后续的SignalR对比 ...
- 基于websocket的netty demo
前面2文 基于http的netty demo 基于socket的netty demo 讲了netty在http和socket的使用,下面讲讲netty如何使用websocket websocket是h ...
- 【转】iOS基于WebSocket的聊天机制
原文网址:http://www.jianshu.com/p/21d9b3b94cfc WebSocket 的使得浏览器提供对 Socket 的支持成为可能,从而在浏览器和服务器之间提供了一个基于 TC ...
- 基于webSocket的聊天室
前言 不知大家在平时的需求中有没有遇到需要实时处理信息的情况,如站内信,订阅,聊天之类的.在这之前我们通常想到的方法一般都是采用轮训的方式每隔一定的时间向服务器发送请求从而获得最新的数据,但这样会浪费 ...
- 基于 WebSocket 的聊天和大文件上传(有进度提示)完美实现
大家好,好久没有写文章了,当然不是不想写,主要是工作太忙,公司有没有网络环境,不让上网,所以写的就少了.今天是2019年的最后一天,明天就要开始新的一年,当然也希望自己有一个新的开始.在2019年的最 ...
- [已解决][HTML5]基于WebSocket开发聊天室应用
WebSocket示例java的比较少,大部分是nodejs的,比较有名的是socket.io的chat, 借用下他的前端实现一套java的,后端基于https://github.com/genera ...
- 基于WebSocket和SpringBoot的群聊天室
引入 普通请求-响应方式:例如Servlet中HttpServletRequest和HttpServletResponse相互配合先接受请求.解析数据,再发出响应,处理完成后连接便断开了,没有数据的实 ...
随机推荐
- Power BI官方客户案例2021
微软商业应用峰会Power BI客户案例,今年的客户案例相比前2年不同,主要是大客户,基本都是行业Top公司. 选取零售,医药制造,教育,医疗IT等行业龙头.沃尔玛,拜耳,滑铁卢大学的分享内容非常棒, ...
- unapp一键登录
一.整理思路 un-app官网提供多种实现[一键登录](https://uniapp.dcloud.net.cn/uniCloud/univerify "")的方法,这里的选择是 ...
- 最新.NET Core面试题汇总
这几天给.neter们整理了26道.NET Core面试题,初衷也很简单,就是希望在面试的时候能够帮助到大家,减轻大家的负担和节省时间.对于没有跳槽打算的也可以复习一下相关知识点,就当是查缺补漏! 对 ...
- 把el-element的日期格式改为CRON
在日常的开发当中,经常会遇到格式的不匹配造成的困扰. 在日期管理上,el-element也是贴心的准备了相关的日期选择器,但是在取值的时候发现,el-element所给出的值格式可能并不是我们常用的. ...
- [bug] Unrecognized token 'code': was expecting (JSON String, Number, Array, Object,'true', 'false' or 'null')
JSON格式有误,需用JSON.stringify()函数转换一下 参考 https://www.cnblogs.com/sunyanblog/p/13788740.html https://www. ...
- [DB] Hadoop免密登录原理及设置
情景: 现有两台电脑bigdata111.bigdata112,bigdata111想免密码登录bigdata112 过程: 1.bigdata111生成公钥(用于加密,给别人)和私钥(用于解密,自己 ...
- [刷题] 1 Two Sum
要求 给出一个整型数组nums 返回这个数组中两个数字的索引值i和j 使得nums[i]+nums[j]等于一个给定的target值 两个索引不能相等 实例 nums=[2,7,11,15], tar ...
- 利用rsync备份生产应用(二)
概述 上节主要是针对rsync服务端进行的配置和详解,本节主要针对在客户端上的rsync配置进行讲解. rsync用法 本地到本地 语法:rsync [OPTION...] SRC... [DEST] ...
- 解决SSH自动断线,无响应的问题。
解决SSH自动断线,无响应的问题. 3 Replies 在连接远程SSH服务的时候,经常会发生长时间后的断线,或者无响应(无法再键盘输入). 总体来说有两个方法: 1.依赖ssh客户端定时发送心跳. ...
- dpkg -S /usr/lib/mate-notification-daemon/mate-notification-daemon
# dpkg -S /usr/lib/mate-notification-daemon/mate-notification-daemonmate-notification-daemon: /usr/l ...