html 未读消息红点,消息未读之点不完的小红点（Node+Websocket）

前言

这个项目原本是我学生时代为了找工做的一个练手项目，可是没想到受到了不少的关注，star也快要破K了，这也激励着我不断去完善他，一方面是得对得起关注学习的人，另外一方面也是想让本身能过经过慢慢完善一个项目来让本身提升。node

今天给你们带来的是基于Websocket+Node+Redis未读消息功能，可能更加偏向于实战方向，须要对Websocket和Node有一些了解，固然不了解也能够看看效果，效果连接( https://www.qiufengh.com/ )说不定会激起你学习的动力~git

下面我经过本身思考的方式来进行讲解，代码可能讲的很少，可是核心逻辑都进行了讲解，上面也有github地址，有兴趣的能够进行详细地查看。本身的idea或多或少会有一些不成熟，可是我仍是厚着脸皮出来抛头露脸，若是有什么建议还请你们多多提出，能让我更加完善这个做品。github

设计

首先对于消息未读，你们都很熟悉，就是各类聊天的时候，出现的红点点，且是强迫症者必须清理的一个小点点，如👇所示。我会带你们实现一个这样的功能。

web

因为一对一的方式更加简单，我如今只考虑多对多的状况，也就是在一个房间(也能够称为群组，后面都以房间称呼)中的未读消息，那么设计这样的一个功能，首相我将它分红了3种用户。redis

离线用户

在线用户

在线用户且进入群组的用户

离线用户

这种场景就至关于咱们退出微信，可是别人在房间里发的消息，当咱们再次打开的时候依然可以看到房间增加的未读消息。mongodb

在线用户

这种场景就是至关咱们停留在聊天列表页面，当他人在房间中发送消息，咱们可以实时的看到未读消息的条数在增加。数据库

场景示例。ubuntu

在线用户且在房间的用户

这种场景其实就比较普通了，当别人发送新的消息，咱们就能实时看到，此时是不须要标记未读消息的。windows

场景示例。