来自同一页面的多个 websocket，使用 java 作为服务器端

Question

在我的网络应用程序中，我有 2 个 websocket 连接到同一端口上的服务器。一个 Websocket 用于聊天信使，同一页面上的另一个 Websocket 显示当前查看该事件的总人数。

聊天网络套接字：

var chat = new WebSocket("ws://localhost:8080/chat");

我的聊天窗口上有一个发送按钮，当用户单击发送按钮时，将调用 send_message 函数，该函数通过 websocket 聊天将消息发送到服务器。

function send_message() {
  chat.send("Hey There!");
}

当从服务器收到消息时，我调用 onMessage 函数来获取数据。

chat.onmessage = function(evt) { onMessage(evt) };

function onMessage(evt) {
  alert('Message Recived from server: "+evt.data);
}

页面加载后，聊天 Websocket 就会打开，而当任何用户单击加入活动按钮时， attendeeCount Websocket 就会打开。如果有人加入或离开活动，我想向其他用户显示参加者数量增加或减少的实时更新。因此，假设一个用户正在参加一个活动，并且他现在看到的当前与会者人数为 10，而另一个用户加入了该活动，那么该人数应更新为 11。

当用户单击“加入活动”按钮时，将向服务器发出 ajax 调用，并在出席者表中创建一个条目。因此，一旦 ajax 调用在我的 ajax 调用的成功回调中成功，我将打开第二个 websocket 连接并将数据发送到服务器，以向其他用户显示更新的与会者计数。它就像 Facebook 的点赞一样，无需刷新页面即可在您眼前更新。

$.ajax({

    type: 'POST',
    url: '/mixtri/rest/event/updateAttendeeCount',
    contentType: "application/x-www-form-urlencoded",
    data: {data},

    success: function(result){
     var attendeeCount = new WebSocket("ws://localhost:8080/attendeeCount");
     attendeeCount.onopen = function(evt) { onOpen(attendeeCount,result.countOfAttendees) };
     attendeeCount.onmessage = function(evt) { onAttendeeJoin(evt) };
    }

  });




/*Function called in ajax success call back to send data to the server via websocket attendeeCount */

  function onOpen(attendeeCount,countOfAttendees) {
      console.log('Connected live Data Update: ');
      attendeeCount.send(countOfAttendees);
   }

现在，当从服务器收到消息时，我将在 onAttendeeJoin 所有用户方法中更新 UI 上的与会者计数。

/*Function called when message recieved from the server*/
function onAttendeeJoin(evt) {
    var attendeeCount = evt.data;
    $('#attendeeCount').html(' '+attendeeCount);

}

现在我有几个问题：

1. 我们可以从同一页面打开 2 个以上的 websocket 吗？因为我还需要更多信息来在我的页面上显示更多实时更新。

2. 另一个问题是我的 attendeeCount 在其他用户的 UI 上正确更新，但我的聊天 Websocket 与我的 attendeeCount Websocket 发生冲突。我的意思是，一旦用户在聊天窗口中输入内容并单击发送按钮，聊天 Websocket 的 onMessage 函数就会被完全调用，但附加到 attendeeCount Websocket 的 onAttendeeJoin 函数也会被调用，并且我的聊天消息也会显示也在 $('#attendeeCount').html(' '+attendeeCount) div 中。我不明白为什么会发生这种情况？虽然 onAttendeeJoin 和 onMessage 函数都绑定到相同类型的事件，即 onmessage，但它们来自不同的 webockets。

3. 如果我得到前两个问题的答案，那么我的最后一个问题是，现在当用户使用聊天功能时，消息会发送给该页面上的所有用户，无论他们正在参加什么活动。因此，参加 event1 的用户发送一条消息，而 event2 中的用户也会收到该消息，这是不正确的。理想情况下，来自 event1 的用户只能看到来自参加 event1 的用户的消息。换句话说，同一聊天室中的人只能互相聊天，并且他们的消息不应该传到聊天室之外。如何将 websocket 中的事件 ID 与参加该事件的人员绑定，以便同一事件聊天室中的消息保留在其中。

Answer 1

我将把我的评论放入答案中：

我们可以从同一页面打开 2 个以上的 websocket 吗？因为我还需要更多信息来在我的页面上显示更多实时更新。

是的，您可以，但您不需要这样做。为什么要打开多个webSocket？这只是一个沟通渠道。您可以通过该渠道发送与不同主题相关的不同消息。您确实不需要在同一页面/服务器之间使用多个 webSocket。

总体思路是，您不仅发送数据，还发送消息名称和一些数据。然后，所有接收代码都可以根据消息名称决定要做什么。您可能对socket.io感兴趣，它在 webSocket 之上为您创建了这种格式，或者您可以使用 webSocket 自己完成此操作，如下所示。

如果我得到前两个问题的答案，那么我的最后一个问题是，现在当用户使用聊天功能时，消息会发送给该页面上的所有用户，无论他们正在参加什么活动。因此，参加 event1 的用户发送一条消息，而 event2 中的用户也会收到该消息，这是不正确的。理想情况下，来自 event1 的用户只能看到来自参加 event1 的用户的消息。换句话说，同一聊天室中的人只能互相聊天，并且他们的消息不应该传到聊天室之外。如何将 websocket 中的事件 ID 与参加该事件的人员绑定，以便同一事件聊天室中的消息保留在其中。

webSockets 本身不具备您所要求的“参加活动”功能。使用普通的 webSockets，您必须跟踪哪个套接字处于哪个事件中，并且当您想要发送到某个事件时，您只能发送到与该事件关联的已连接的 webSockets。这将是您自己的代码来完成的。同样，我上面提到的 socket.io 库内置了此功能。这听起来像是你真正想要的。Java 服务器也支持 socket.io。socket.io 具有内置聊天室，并且能够向给定聊天室中的用户进行广播。