vue实现web在线聊天功能 vue实现web在线聊天功能

本文实例为大家分享了vue实现web在线聊天的具体代码，供大家参考，具体内容如下
最终实现的效果
【vue实现web在线聊天功能】
文章图片

实现过程
无限滚动窗体的实现之前已经介绍过，这里就不在赘述了，不清楚的可以通过文档前文的传送门进行查看。
实时在线聊天主要功能点

滚动到两天窗体顶部，自动加载历史跟多信息，数据加载的时候，需要有一个loading动画；
发送信息是滚动条自动滑动到窗体底部，并且自己发送的信息出现在聊天窗体中；
收到别人发送信息时，需要判断滚动条处于窗体中的位置，在距离底部一定范围内收到信息需要自动滑动到窗体底部；
收发的信息在聊天状态不能重复显示；
收发的信息在聊天窗体中需要以逆序的方式展示，即离窗体底部越近的信息为最新消息；
授信最好通过WebSocket与后端建立长连接，有新消息由后端主动向前端推送消息方式实现，这里主要介绍前端实现聊天窗体思路，WebSocket部分就不展开了，采用定时器轮询的方式简单实现。

话不多说，直接上代码
后端返回数据格式
我觉得所有的设计和功能实现都是基于数据的基础上去实现的，所以咋们先来看一下后端返回的数据格式：

{ "code": 200, // 响应编码 "msg": "OK", // 响应消息 "total": 1, "sysTime": "2020-12-16 15:23:27", // 系统响应时间 "data": [{"avatar": "",// 用户头像"content": "{\"type\":\"txt\",\"msg\":\"你好！\"}", // 消息内容"isRead": 0, // 是否已读"isOneself": 0,// 是否是自己发送的消息 0否，1是"msgId": 10, // 消息ID，用来去重"nickName": "碧海燕鱼", // 用户昵称"userCode": "202012162030202232" // 用户编码 }]}

这里需要说明的是，content字段返回的是一个json格式的字符串数据，content内容格式如下：

// 文本消息{"type": "txt","msg":"你好" //消息内容}

// 图片消息{"type": "img","url": "图片地址","ext":"jpg","width":360,//宽"height":480,//高"size": 388245}

// 视频消息{"type": 'video',"url": "http://nimtest.nos.netease.com/cbc500e8-e19c-4b0f-834b-c32d4dc1075e","ext":"mp4","width":360,//宽"height":480,//高"size": 388245}

// 地理位置消息{"type": "local","address":"中国浙江省杭州市网商路 599号",//地理位置"longitude":120.1908686708565,// 经度"latitude":30.18704515647036// 纬度}

HTML代码

注：自己发的信息和别人发的信息展示样式不一样，所以需要通过isOneself字段进行展示样式的区分。
JavaScript代码

CSS代码

.message {height: 350px; }.ivu-card-body {padding:5px; }.ivu-modal-body{padding: 0px 16px 16px16px; }.chat-message-body {background-color:#F8F8F6; width:545px; height: 350px; overflow: auto; }.message-card {margin:5px; }.message-row-left {display: flex; flex-direction:row; }.message-row-right {display: flex; flex-direction:row-reverse; }.message-content {margin:-5px 5px 5px 5px; display: flex; flex-direction:column; }.message-body {border:1px solid #D9DAD9; padding:5px; border-radius:3px; background-color:#FFF; }.message-time {margin:0 5px; font-size:5px; color:#D9DAD9; }.footer-btn {float:right; margin-bottom: 5px; }.spin-icon-load {animation:ani-spin 1s linear infinite; }@keyframes ani-spin{form{transform: rotate(0deg); }50% {transform: rotate(180deg); }to{transform: rotate(360deg); }}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。