Question

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

Chat 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就会被打开，而当任何用户点击加入事件时，参与者数量的websocket会被打开按钮。如果有人加入或离开活动，我想向其他用户显示增加或减少的与会者数量作为实时更新。所以，让我们说如果用户正在参加活动，他现在看到的当前与会者人数是10，而另一个用户加入活动然后计数应该更新为11。

当用户点击“加入事件”按钮时，将对服务器进行ajax调用，并在与会者表中进行输入。所以一旦ajax call是成功回调我的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);

}

现在我有几个问题：

我们可以在同一页面打开2个以上的网页套件吗？因为我还需要更多，以便在我的页面上显示更多实时更新。
另一个问题是我的参与者计划在其他用户的UI上正确更新，但我的聊天websocket与之冲突我的参加者计数websocket。碰撞我的意思是，只要用户在聊天窗口中键入内容并点击onMessage上的发送按钮即可聊天websocket的函数被称为完全正常但onAttendeeJoin函数附加到attendeeCount websocket也被叫，我的聊天消息也显示在$（＆＃39;＃attendeeCount＆＃39;）。html（＆＃39;＆＃39; + attendeeCount）div中。我无法搞清楚为什么会这样？尽管onAttendeeJoin和onMessage函数都绑定了相同类型的事件，即onmessage，但它们是来自不同的网址。
如果我回答前两个问题，我的最后一个问题是，现在当用户使用聊天功能时，消息会转到该页面上的所有用户，无论他们参加什么活动。因此，参加event1的用户发送消息和用户 event2也获取该消息，这是不正确的。理想情况下，来自event1的用户只能看到来自参加event1的用户的消息。换句话说，同一个聊天室里的人应该只能聊天，他们的消息不应该在聊天之外房间。如何将我在websocket中的事件ID与参加该事件的人员绑定，以便同一事件中的消息进行聊天房间还在。

Answer 1

我会把我的评论写成答案：

我们可以在同一页面打开2个以上的网页套件吗？因为我需要还可以在我的页面上显示更多实时更新。

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

一般的想法是，您不仅要发送数据，还要发送消息名称和一些数据。然后，所有接收代码都可以根据消息名称决定做什么。您可能对socket.io感兴趣，它会在webSocket上为您创建此格式，或者您可以使用webSocket自行完成，如here所示。

如果我回答前两个问题，我的最后一个问题是，对现在当用户使用聊天功能时，消息将转到所有用户该页面上的用户，无论他们参加什么活动。那么一个用户参加event1发送消息并在event2获取用户该消息也是不正确的。理想情况下，来自event1的用户可以只看到来自参加event1的用户的消息。我换句话说，人在同一个聊天室里应该只能和对方聊天他们的消息不应该在聊天室外面。我怎么能绑定我的在websocket中的事件ID，人们参加该事件同一个事件聊天室内的消息仍在其中。

webSockets本身没有您要求的“参加活动”功能。使用普通的webSockets，您必须跟踪哪个套接字在哪个事件以及何时要发送到事件，您只发送与该事件关联的已连接的webSockets。这将是你自己的代码。同样，我上面提到的socket.io库内置了这个功能。这听起来像你真正想要的。还有对socket.io的Java服务器支持。 socket.io具有内置聊天室，并能够向给定聊天室中的人广播。

Answer 2

可以在同一个网站上打开两个多个Web Socket连接。

如果您打开两个带有某个延迟的Web Socket连接，以便浏览器可以识别这两者。

例如。在index.html

中

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="js/websocket1.js"></script>
    </head>
    <body>

        <!-- Other code goes here -->
    <script type="text/javascript" src="js/websocket2.js"></script>
    </body>
    </html>

此处websocket1.js和websocket2.js是两个javascript源文件，其中两个new webSocket(URL)在特定时间间隔内打开。

它还取决于您使用的浏览器以及部署它的服务器。顺便说一下，我使用Chrome和GlassFish 4作为服务器，这很好。

来自同一页面的多个websockets，其中java为服务器端

2 个答案: