使用 socket.io 对可见/不可见消息执行操作答案

【问题标题】：Perform action on seen/unseen messages with socket.io使用 socket.io 对可见/不可见消息执行操作
【发布时间】：2021-12-31 05:18:15
【问题描述】：

在基于 Nodejs/SocketIO/React 的聊天室应用程序中处理可见/不可见消息的最佳实践是什么。

考虑 User1 向房间发送消息。如果其他用户看到了该消息，则通知所有用户该消息的状态已被看到。

在我看来，使用消息代理可能是更好的解决方案，而不是套接字。我实际上认为套接字应该只处理同步的聊天消息。但对于可见/不可见状态，我更喜欢异步的消息代理。在大规模应用中是否有任何解决方案或最佳实践？

【问题讨论】：

标签： socket.io chat messagebroker

【解决方案1】：

目前尚不清楚您目前尝试了什么，这意味着我只能建议解决方案以实现您的目标。

为了首先识别一条消息被看到，IntersectionObserver 是一个内置的 API，用于检测元素何时进入视口，这意味着它是可见的，因此；明显看到了。我在下面的代码中添加了 cmets，您应该添加一个函数来调用看到消息的服务器，但是，这取决于您来实现。

const observer = new window.IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    // Send a message to the server that the user has viewed the message.
    // Eg. socket.emit('read-message', message.id)
    return
  }
}, {
  root: null,
  threshold: 0.1,
})
observer.observe(document.getElementById(message.id));

此外，无需使用消息代理，因为 socket.io 可以处理诸如此类的简单交互。

然后，您需要向服务器发送一条消息，表明已看到指定的消息 ID，然后向所有其他客户端广播状态已更改，并更新它以读取 - 如果需要的话。

【讨论】：