音讯未读之点不完的小红点(Node+Websocket)

媒介

https://github.com/hua1995116…

这个项目本来是我学生时代为了找工作的一个练手项目,然则没想到受到了许多的关注,star也将近破K了,这也鼓励着我不断去完美他,一方面是得对得起关注进修的人,另一方面也是想让本身能过经由历程逐步完美一个项目来让本身进步。

《音讯未读之点不完的小红点(Node+Websocket)》

本日给人人带来的是基于Websocket+Node+Redis未读音讯功用,可以越发倾向于实战方向,须要对Websocket和Node有一些相识,固然不相识也可以看看结果,结果链接( https://www.qiufengh.com/ )说不定会激起你进修的动力~

下面我经由历程本身思索的体式格局来举行解说,代码可以讲的不多,然则中心逻辑都举行了解说,上面也有github地点,有兴致的可以举行细致地检察。本身的idea或多或少会有一些不成熟,然则我照样厚着脸皮出来抛头露脸,如果有什么发起还请人人多多提出,能让我越发完美这个作品。

设想

起首关于音讯未读,人人都很熟习,就是种种谈天的时刻,涌现的红点点,且是强迫症者必需清算的一个小点点,如👇所示。我会带人人完成一个如许的功用。
《音讯未读之点不完的小红点(Node+Websocket)》

由于一对一的体式格局越发简朴,我如今只斟酌多对多的状况,也就是在一个房间(也可以称为群组,背面都以房间称谓)中的未读音讯,那末设想如许的一个功用,宰衡我将它分成了3种用户。

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

离线用户

这类场景就相称于我们退出微信,然则他人在房间里发的音讯,当我们再次翻开的时刻依旧可以看到房间增进的未读音讯。

在线用户

这类场景就是相称我们停留在谈天列表页面,当他人在房间中发送音讯,我们可以及时的看到未读音讯的条数在增进。

场景示例。

《音讯未读之点不完的小红点(Node+Websocket)》

在线用户且在房间的用户

这类场景实在就比较普通了,当他人发送新的音讯,我们就可以及时看到,此时是不须要标记未读音讯的。

场景示例。
《音讯未读之点不完的小红点(Node+Websocket)》

流程图

重要流程可以简化为三个部份,离别为用户,推送功用,音讯行列。

用户可所以音讯提供者也可所以音讯接受者。以下就是这个历程。
《音讯未读之点不完的小红点(Node+Websocket)》

固然在这个历程当中触及比较庞杂的音讯的存储,怎样推送,猎取,同步等题目,下面就是对这个历程举行细致的形貌

《音讯未读之点不完的小红点(Node+Websocket)》

图上的流程诠释

A. 存储在Node缓存中的房间用户列表(此处信息也可以存在Redis中)

B. 存储在Redis中的未读音讯列表

C. 存储在MongoDB中的未读音讯列表

  1. 用户1进入首页。
  2. 用户1进入房间,重置用户在房间1的未读音讯,触发更新模块去更新B未读音讯列表。
  3. 用户1向向房间B中发送了一条音讯。
  4. 后端须要去猎取房间用户列表,推断用户是不是在房间?
  5. 是,由于在房间中的用户已读取了最新音讯,不须要举行计数。
  6. 否,若用户不在房间中,更新其的未读音讯计数
  7. 从缓存中猎取用户的音讯举行分发。
  8. 用户2登录我们的项目,从离线用户变成了在线用户。
  9. 用户2登录时,触发查询模块,去猎取其当前在各个房间未读音讯状况。
  10. 查询模块去查询Redis中的未读音讯,若Redis中没有数据,会继承向数据库中查询,若没有则返回0给用户。
  11. Redis缓存将会每分钟和数据库同步一次,保证数据的耐久化。

环境

  • Node: 8.5.0 +
  • Npm: 5.3.0 +
  • MongoDB
  • Redis

为何是redis ?

引见

Redis 是互联网技术领域运用最为普遍的存储中间件,它是「Remote Dictionary Service」的首字母缩写,是一个高机能的key-value数据库。具有机能极高,雄厚的数据类型,原子,雄厚的特征等上风。

redis 具有以下5种数据构造

  • String——字符串
  • Hash——字典
  • List——列表
  • Set——鸠合
  • Sorted Set——有序鸠合

想要深切相识这5种存储构造可以检察http://www.runoob.com/w3cnote/redis-use-scene.html

装置

windows

http://www.cnblogs.com/jaign/…

mac

brew install redis

ubuntu

apt-get install redis

redhat

yum install redis

centos

https://www.cnblogs.com/zuido…

运转客户端

redis-cli

可视化东西装置

windows

https://pan.baidu.com/s/1kU8sY3P

mac

https://pan.baidu.com/s/10vpd…

源码编译

http://docs.redisdesktop.com/…

项目中的数据构造

在本项目中我们用String 来存储用户的未读音讯纪录,应用其incr敕令来举行自增操纵。应用Hash构造 来存储我们websocket衔接时用户的socket-id。

上面说了计数应用Redis的Stirng数据构造,
在Redis 我们的计数key-value是如许的。

username-roomid – number

例子: hua1995116-room1 – 1

我们的Socket-id则为Hash构造。

  • socketId

    • username – socketid

例子:

  • socketId

    • hua1995116 – En4ilYqDpk-P5_tzAAAG

MongoDB

本项目一开始就运用了MongoDB,Node自然搭配的MongoDB的上风,这里就不再举行解说,Node操纵MongoDB的模块叫做mongoose,详细的参数要领,可以检察官方文档。

https://mongoosejs.com/docs/4.x/index.html

MongoDB下载地点

https://www.mongodb.com/downl…

可视化下载地点

https://github.com/mrvautin/a…

websocket + node 完成

下面我们经由历程一开始的3种用户的场景来详细申明完成的代码。

离线用户变成在线用户

《音讯未读之点不完的小红点(Node+Websocket)》

客户端在登录时会发送一个login事宜,以下是后端逻辑。

// 竖立衔接
socket.on('login',async (user) => {
    console.log('socket login!');
    const {name} = user;
    if (!name) {
      return;
    }
    socket.name = name;
    const roomInfo = {};
    // 初始化socketId
    await updatehCache('socketId', name, socket.id);
    
    for(let i = 0; i < roomList.length; i++) {
      const roomid = roomList[i];
      const key = `${name}-${roomid}`;
      // 轮回一切房间
      const res = await findOne({username: key});
      const count = await getCacheById(key);
    
      if(res) {
        // 数据库查数据, 若缓存中没有数据,更新缓存
        if(+count === 0) {
          updateCache(key, res.roomInfo);
        }
        roomInfo[roomid] = res.roomInfo;
      } else {
        roomInfo[roomid] = +count;
      }
    }
    // 关照本身有若干条未读音讯
    socket.emit('count', roomInfo);
        
});

用户从离线变成在线状况,竖立socket衔接时刻,会发送一个login事宜, 效劳端就会去查询当前用户的未读音讯状况,从MongoDB和Redis离别查询,若Redis中没有数据,则像数据库查询。

在线用户进入房间

《音讯未读之点不完的小红点(Node+Websocket)》

客户端在到场房间措辞会发送一个room事宜,以下是后端逻辑

// 到场房间
socket.on('room', async (user) => {
    console.log('socket add room!');
    const {name, roomid} = user;
    if (!name || !roomid) {
      return;
    }
    socket.name = name;
    socket.roomid = roomid;
    
    if (!users[roomid]) {
      users[roomid] = {};
    }
    // 初始化user
    users[roomid][name] = Object.assign({}, {
      socketid: socket.id
    }, user); 
    
    // 初始化user
    const key = `${name}-${roomid}`;
    await updatehCache('socketId', name, socket.id);
    
    // 进入房间默许置空,示意悉数已读
    await resetCacheById(key);
    // 举行会话
    socket.join(roomid);
    
    const onlineUsers = {};
    for(let item in users[roomid]) {
      onlineUsers[item] = {};
      onlineUsers[item].src = users[roomid][item].src;
    }
    io.to(roomid).emit('room', onlineUsers);
    global.logger.info(`${name} 到场了 ${roomid}`);
});

效劳端接收到客户端发送的room事宜,来重置该用户房间内的未读音讯,而且该用户到场房间列表。

在房间中的用户发送音讯

《音讯未读之点不完的小红点(Node+Websocket)》

客户端在到场房间措辞会发送一个message事宜,以下是后端逻辑

socket.on('message', async (msgObj) => {
    console.log('socket message!'); 
    //向一切客户端播送宣布的音讯
    const {username, src, msg, img, roomid, time} = msgObj;
    if(!msg && !img) {
      return;
    }
    ... // 此处为向数据库存入音讯
    const usersList = await gethAllCache('socketId');// 一切用户列表
    usersList.map(async item => {
      if(!users[roomid][item]) {  // 推断是不是在房间内
        const key = `${item}-${roomid}`
        await inrcCache(key);
        const socketid = await gethCacheById('socketId', item);
        const count = await getCacheById(key);
        const roomInfo = {};
        roomInfo[roomid] = count;
        socket.to(socketid).emit('count', roomInfo);
    }
}) 

此步骤稍微庞杂,重如果房间中的用户发送音讯,须要经由推断,哪部份用户须要计数,哪部份用户不须要计数,从图中可以看出,不在房间内的用户都须要计数。

接下来还须要推送,那末哪些用户须要及时地推送呢,对的,就是那些在线用户而且不在房间内的用户。因而在这里也须要一个推断。

如许就完美了,可以精确地给用户增添计数,而且精确地推送给须要的用户。

跋文

在线演示: https://www.qiufengh.com/

github地点: https://github.com/hua1995116…

如果有什么发起或许疑问可以到场微信群举行讨论。

《音讯未读之点不完的小红点(Node+Websocket)》

    原文作者:蓝色的秋风
    原文地址: https://segmentfault.com/a/1190000017061585
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞