vue实现web在线聊天功能

本文实例为大家分享了vue实现web在线聊天的具体代码,供大家参考,具体内容如下

最终实现的效果

vue实现web在线聊天功能_第1张图片

实现过程

无限滚动窗体的实现之前已经介绍过,这里就不在赘述了,不清楚的可以通过文档前文的传送门进行查看。

实时在线聊天主要功能点

  • 滚动到两天窗体顶部,自动加载历史跟多信息,数据加载的时候,需要有一个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代码

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

你可能感兴趣的