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

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

javascript jquery websocket

Javascript 使用java作为服务器端，来自同一页面的多个WebSocket,javascript,jquery,websocket,Javascript,Jquery,Websocket,在我的web应用程序中，我有两个websocket连接到同一端口上的服务器。一个websocket用于聊天messenger，另一个用于聊天同一页面上的websocket显示当前查看该事件的总人数聊天网站： var chat = new WebSocket("ws://localhost:8080/chat"); 我的聊天窗口上有一个发送按钮，当用户单击发送按钮时，会调用发送消息的功能send_message 通过websocket聊天连接到服务器 function send_messag

在我的web应用程序中，我有两个websocket连接到同一端口上的服务器。一个websocket用于聊天messenger，另一个用于聊天同一页面上的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将立即打开，而AttendeCount websocket将在任何用户单击join事件时打开按钮如果有人加入或离开活动，我想以实时更新的形式显示其他用户参与人数的增加或减少。所以假设一个用户正在参加一个活动，而他现在看到的当前出席人数是10，而另一个用户则加入了该活动计数应更新为11

当用户单击Join Event按钮时，会对服务器进行ajax调用，并在attendee表中创建一个条目。所以一旦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 all users中UI上的与会者计数

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

}

现在我有几个问题：

我们可以从同一页打开两个以上的WebSocket吗？因为我还需要更多的内容来在我的页面上显示更多的实时更新

另一个问题是我的AttendeCount在其他用户的UI上得到了正确更新，但我的聊天websocket与我的帐户是websocket。我的意思是，当用户在聊天窗口中键入内容并单击发送按钮时，onMessage 聊天websocket的函数调用得非常好，但附加到AttendeCount websocket的OnateDeeJoin函数也可以调用，我的聊天信息也显示在$（'#AttendeCount'）.html（''+AttendeCount）div中。我搞不懂为什么会这样？虽然OnAtEndeeJoin和onMessage函数都绑定到同一类型的事件，即onMessage，但它们是来自不同的webockets

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

我将把我的评论写进一个答案：

我们可以从同一页打开两个以上的WebSocket吗？因为我需要在我的页面上显示更多的实时更新

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

一般的想法是，您不只是发送数据，而是发送消息名和一些数据。然后，所有接收代码都可以根据消息名称决定要做什么。您可能对在webSocket之上为您创建这种格式感兴趣，或者您可以自己使用webSocket，如图所示

如果我得到前两个问题的答案，我的最后一个问题是，对吗现在，当用户使用聊天功能时，消息会传到所有该页面上的用户，无论他们参加的是什么活动。那么参加事件1的用户发送消息，事件2中的用户获得这个信息也是不正确的。理想情况下，event1的用户可以仅看到来自参加event1的用户的消息。换句话说，人们在同一个聊天室里应该只能互相聊天和聊天他们的信息不应该出现在聊天室之外。我怎样才能把我的头发绑起来 websocket中的事件id以及参与该事件的人员，以便同一事件聊天室中的消息仍保留在中

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

在同一网站中可以打开两个多web套接字连接

如果您应该以一定的延迟打开两个web套接字连接，以便浏览器能够识别这两个连接

例如，在

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源文件，其中两个新的webSocket（URL）
以一定的间隔打开
它还取决于您使用的浏览器和部署它的服务器。顺便说一句，我使用Chrome和GlassFish 4作为服务器，这很好。
为什么要打开超过个