当前位置: 首页 > 网络应用技术

next.js通过socket.io和redis(3)socket.io与REDIS统计数据相结合,当前计数在线用户

时间:2023-03-07 00:33:53 网络应用技术

  前言:

  最近,我已经完成了大三的最终设计,并且我独立地完成了博客社区。主要技术堆栈是:

  前端:next.js + mobx + ts + antd;

  背景管理系统:vue3.0 + pinia + ts + elementui

  后端:Next.js + TS + Alibaba Cloud OSS Storage + REDIS

  在开发过程中,我遇到了很多坑,我将总结我在开发过程中踏上的凹坑以及通过本文的一些小体验。

  由于博客社区,例如我们的掘金平台,因此有信息推动系统消息,例如新闻等,然后我也想制作横幅(即,在系统维护中或错误,并且用户希望用户能够使用用户想要用户,想要用户,希望用户感知到usersi,所以我想推动系统消息。首先是Websocket实现的,但是Next.js的框架似乎并不支持它。取而代之的是,它支持封装Websocket.io的第三方依赖关系。因此,我使用socket.io执行消息推动的操作和在线人员的数量。我希望每个人都喜欢?

  您还可以查看上一篇文章?:

  本系列的第一部分:https://juejin.cn/post/7099460618289152037本系列1

  需求非常简单,在线人员的数量,我们必须使用Websocket,如何在上一篇文章中使用包装Websocket的socket.io,您可以在上一篇文章中查看如何使用它。您可以看到https://juejin.cn./post/7099460618289152037

  而且有必要识别每个用户。由于此博客是两种类型:访问者和正式用户,如果我们用来识别用户的User_id,如果是正式用户是我们数据库中用户表的ID,则如果是访问者模式,我们可以,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,我们,通过时间戳new Date()。getTime() +六个随机数字)

  之后,每次用户“在线”时,它都会发送到server.js事件,这是告诉浏览器哪个用户在线并将其添加到数组中。然后将用户从此数组中删除,我们获取此数组的长度以获取当前的在线用户数量。

  有问题:1。我们如何知道行上的用户?2。如何定义此在线用户的数组?3。在用户离线后,断开事件的断开事件监视您要做什么?

  问题:1。用户可以参考它。我之前写的文章是监视浏览器的可见性。当浏览器显示器听到可见性事件时

  然后,您可以询问用户是否将页面切成小窗口(没有页面关闭),然后打开页面以执行可见性事件,因此是否重复统计信息?重新设计了REDIS数据结构。实际上,它使用集合数组(无法重复内部值),然后将USERID传递到此集合数组。

  问题2和问题III,如何定义数据结构,断开连接的操作是什么,只需查看以下和重新数据结构设计即可。

  对于如何在Next.js中使用Redis,您可以参考我在?https://juejin.cn/post/7097150195426656270之前共享的这篇文章

  我们使用UserID来识别每个不同的用户,并且因为它是在线用户的统计信息,但是每个用户可以将其发送到服务器多次“我在线”通知,因此我们不能重复相同的用户,因此我们使用redisthe选择redis设置阵列(无法显示数组),请参阅https://www.runoob.com/redis/redis-sets.html。

  如果用户在线:

  那就是将用户添加到此集合数组中。如果此设置结构中已经有此userId,则不会重复添加

  如果用户离线,我们可以直接从设置数组中删除此值。

  如果您想直接计算在线编号:

  有关上述SADD,SREM和卡方法的说明,您可以参考https://www.runoob.com/redis/redis/redis-sets.html

  借助需求和数据结构的设计,让我们直接进入前端和后端实现的代码,然后解释一下,让我们继续前进!

  next.js的server.js实现:

  说明:我们是由Server的Sustom Server在Next.js中自定义的。有关如何自定义服务器,您可以参考我之前共享的文章:https://juejin.cn/post/7099460618289152037

  一个问题是server.js聆听的用户socket.io disconnect是一个构建的 - 断开事件,而不是用户的前端,因此断开连接无法从前端用户获取信息。”用户退出,服务器,服务器。监视断开事件,然后从redis的设定结构中删除用户的用户ID”,因此如何在Disconnect.have中获取用户ID!

  socket.ID实际上我们使用了通过socket.id识别不同的连接。保存此连接的套接字。ID和用户的用户ID。通过键值,键是socket.id.value是用户ID,然后当浏览器触发断开连接的当前断开连接连接socket.io映射时,我们可以获取USERID。

  在代码中,我们使用:redis的哈希表存储此键值

  有关特定REDIS表的操作,请参阅:https://www.runoob.com/redis/redis/redis-hashes.html

  然后断开连接时:

  在这种情况下,我们解决了我们的问题

  我们以前是根据layout.ts组件代码对其进行修改的,Layout.ts中的代码可以参考我的先前文章:https://juejin.cn/post/7099460618289152037

  为了顺序,当我们初始化套接字时,我们将clientconnect事件发送到server.js的socket.io server,并带上用户的唯一标识用户IDS(如果是访问者,它将生成随机ID))

  然后监视浏览器的可示词事件,以确定用户是否正在查看当前网站

  “ next.js使用socket.io将指定的用户消息推向指定的用户,并执行在线和离线的两个操作,实时推动,Onlinestay Tuned?

  原始:https://juejin.cn/post/709985136843685888