vue+websocket+nodejs实现聊天室

前言
上一篇讲了聊天室增加一对一单聊，这次讲如何新增已读未读状态。

大概思路：
服务器返回消息列表，增加参数status为1，单聊和群聊通过过滤状态区分对应未读数量，当前聊天，直接在currentMessage里面设置status为0即可。

效果图：

上代码：

服务端：

其他的跟之前都一样，只是type为2时候，新增了status:1 ...broadcast({type: 2,nickname: obj.nickname,uid: obj.uid,msg: obj.msg,users,date: moment().format('YYYY-MM-DD HH:mm:ss'),brige: obj.brige,status: 1 // 表示未读})

客户端：

视图层：
（只是增加了未读提示，其他的都没变，通过getMsgNum()获取未读消息数）

<div class="left"><div class="user" @click="triggerGroup()"><span> 群一</span><span class="msgtip" v-show="getMsgNum()">{{getMsgNum()}}</span></div><div class="user" v-for="(itm, idex) in users" :key="idex" v-show="itm.uid !== uid" @click="triggerUser(itm)"><span>{{itm.nickname}}</span><span class="msgtip" v-show="getMsgNum(itm)">{{getMsgNum(itm)}}</span></div></div>

逻辑层：
(…表示跟之前代码一致)

computed: {// 筛选当前brige一致的放到一个聊天数组里，区分单聊和群聊currentMessage () {...data.forEach(m => { // 当前群聊，所有status设置为0m.status = 0})return data}}// 获取消息未读数量，有user表示是单聊，没有表示群聊getMsgNum (user) {if (!user) {// 群聊，brige为空数组，找未读消息数return this.messageList.filter (item => {return !item.brige.length && item.status === 1}).length} else {// 增加了uid相同判断，确认是当前聊天对应人的消息数组return this.messageList.filter (m => {return m.brige.length && m.status === 1 && m.uid === user.uid}).length}},

这里使用messageList，是因为messageList包含了所有服务端返回的消息内容，需要由它过滤出对应的未读消息。

样式层：
样式不在写，可自行根据需求定义。

参考链接：Node + WebSocket + Vue 一对一、一对多聊天室消息已读未读 – 第四章

vue+websocket+nodejs实现聊天室 - 消息已读未读相关推荐

Web聊天室消息[已读未读]的实现
聊天室快速访问继上次完成聊天室的历史记录功能后,我又想着实现聊天记录的已读未读功能.(轻喷..) 开始之前首先我看了抖音和钉钉这两款应用的消息已读未读功能的呈现效果.首先是抖音,在聊天界面,给好友 ...
原生JavaScript+WebSocket+nodejs实现聊天室功能
码字不易,有帮助的同学希望能关注一下我的微信公众号:Code程序人生,感谢!代码自用自取. WebSocket也是前端非常重要的技术栈. 现在各种网站.App.小程序都伴有即时通信的功能.WebSoc ...
使用WebSocket实现网页聊天室
使用WebSocket实现网页聊天室一.文章导读服务器推送你还在使用轮询吗?本文将带你领略WebSocket的魅力,轻松实现服务器推送功能.本文将以下面两方面让你理解WebSocket并应用到具体 ...
springboot+websocket构建在线聊天室（群聊+单聊）
系列导读: 1.springboot+websocket构建在线聊天室(群聊+单聊) 2.Spring Boot WebSocket:单聊(实现思路) 3.Websocket Stomp+Rabbit ...
swoole + 浏览器webSocket 实现的聊天室
这两天在学习swoole,作为练手弄了个swoole + 浏览器webSocket 实现的聊天室,效果如下: 环境:php7.3 swoole4.4.3 hredis 参考代码下载地址 https: ...
如何使用WebSocket实现网页聊天室？
一.文章导读服务器推送你还在使用轮询吗?本文将带你领略WebSocket的魅力,轻松实现服务器推送功能.本文将以下面两方面让你理解WebSocket并应用到具体的开发中 WebSocket概述使用 ...
SpringBoot与webSocket实现在线聊天室——实现私聊+群聊+聊天记录保存
SpringBoot与webSocket实现在线聊天室--实现私聊+群聊+聊天记录保存引用参考:原文章地址:https://blog.csdn.net/qq_41463655/article/det ...
workerman-chat（PHP开发的基于Websocket协议的聊天室框架）（thinkphp也是支持socket聊天的）...
workerman-chat(PHP开发的基于Websocket协议的聊天室框架)(thinkphp也是支持socket聊天的) 一.总结 1.下面链接里面还有一个来聊的php聊天室源码可以学习 2. ...
基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...

vue+websocket+nodejs实现聊天室 - 消息已读未读

vue+websocket+nodejs实现聊天室 - 消息已读未读相关推荐

最新文章

热门文章