前言：
最近，我已经完成了大三的最终设计，并且我独立地完成了博客社区。主要技术堆栈是：
前端：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