Reactjs 如何忽略通过HTTP进行更改的客户端的websocket事件？

我们有一个React应用程序，它使用REST获取和更新数据，使用Websocket接收更改通知

想象我们有一个集合/用户

user1调用http方法POST/users来创建新用户

user1收到肯定的http响应，创建的用户被添加到UI列表中

user1还接收Websocket通知“user:created”，并再次尝试向UI列表添加新项 因此，由于HTTP响应和WS-event，进行调用的用户应该两次处理结果。这就是我试图解决的问题

几种可能的解决办法： 1.为调用POST/users的用户跳过WS事件。问题是他可能有几个打开的浏览器选项卡。而且所有这些都不会被更新。 2.不要处理HTTP响应，只处理WS事件

---

有人经历过这样的问题吗？还有哪些解决方案可用？

您基本上已经指出了最佳解决方案（2），但这里有一些选项

不要使用POST的响应，而是等待“user:created”事件，该事件将更新所有订阅客户端（包括发起POST的客户端）的列表—建议的方法

使用您当前的实现，但是您的POST和“user:created”事件应该共享某种标识符，它们与请求的其余部分一起返回，客户端可以使用该标识符来确定他是否已经获得了该信息，例如“user:created:{userId}”。然后，只有内存中没有“user:created:{userId}”的客户端才会使用WS-event数据不推荐

跳过发起POST的用户的WS-event-问题在于，如果特定用户连接了多个客户端（选项卡、浏览器+移动设备等），那么使用这种方法，您必须跳过发起POST请求的客户端（套接字中的connectionId）的WS-event（非用户！）。因此，如果用户有10个连接，您将向9个连接发送“user:created”事件，除了启动请求的连接+所有其他应接收该事件的连接之外——不建议这样做，因为这会使您的后端变得非常复杂

---

在我看来，最简单、最干净的方法就是忽略POST响应并等待WS事件——因为这些都是套接字，所以您不应该有任何UI问题或延迟。

如果添加了用户的客户端发出事件，那么使用

// sending to all clients except sender
  socket.broadcast.emit('broadcast', 'hello friends!');

这不会向客户端发出事件，您可以在react应用程序中使用逻辑来侦听套接字事件以及http请求的响应。 这将防止重复或坏数据

---

如果为同一个客户端打开多个选项卡，则初始化http请求的客户端选项卡将使用http响应更新状态列表，并且所有其他用户的选项卡或其他用户将接收套接字事件。

一种方法是在请求中添加“幂等计数器”字段。基本上，它只是一个数字，每个请求都会递增，并存储在前端。对于每个成功的请求，后端需要使用相同的计数器进行应答

您的处理逻辑如下所示：

function onUserAdded(user, counter) {
  if(current_counter < counter) { 
    console.log("User added");
    current_counter++;
  } else {
    console.log("User not added");
  }
}

添加的函数（用户、计数器）{
如果（当前计数器<计数器）{
console.log（“用户添加”）；
当前_计数器++；
}否则{
console.log（“未添加用户”）；
}
}

• 当前计数器=0

• 调用

  POST/users

  ，使用

  counter=current\u counter+1

  ，使用

  counter=1

  ->

  用户添加的
  

• 使用

  计数器=1获取websocket通知

  ->

  未添加用户

---

你好。第三点是什么意思？user1收到一个ws事件，react然后再次尝试创建用户？