Multiple websockets from the same page with java as the server side

Question

In my web-app I have 2 websocket connecting to server on the same port. One websocket is used for chat messenger and the other websocket on the same page displays the total number of people currently viewing that event.

Chat Websocket:

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

I have a send button on my chat window and when user clicks on the send button function send_message is called which send the message to the server through websocket chat.

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

And when the message is recived from the server I am calling onMessage function to get the data.

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

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

The chat websocket gets opened as soon as the page loads while the attendeeCount websocket gets open when any user clicks on the join event button. I want to show the other users count of attendees increasing or decreasing as a live update if someone joins or leaves the event. So, Lets say if a user is attending an event and current attendee count he is seeing right now is 10 and another user joins the event then the count should get updated to 11.

When a user clicks on the Join Event button an ajax call is made to the server and an entry is made in the attendee table. So once the ajax call is success in the success callback of my ajax call I am opening the 2nd websocket connection and sending the data to the server to show updated attendee count to the other users. It is exactly like Facebook likes which gets updated in front of your eyes without refreshing the page.

$.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);
   }

Now when the message is recived from the server I am updating the attendee count on the UI in the method onAttendeeJoin all users.

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

}

Now I have couple of question:

1. Can we open more than 2 websockets from the same page? Because i need more as well to show some more live updates on my page.

2. Another problem is my attendeeCount is getting updated correctly on the UI for other users, but my chat websocket is clashing with my attendeeCount websocket. With clashing I mean, as soon as user types something in the chat window and clicks on send button the onMessage function for the chat websocket get called perfectly fine but the onAttendeeJoin function which is attached to attendeeCount websocket also gets called and my chat message gets displayed in $('#attendeeCount').html(' '+attendeeCount) div as well. I am not able to figure out why this is happening? Although both onAttendeeJoin and onMessage function are bound to same type of event i.e onmessage but they are from different webockets.

3. If I get answer to my first two questions my last question is, right now when a user uses a chat functionality the message goes to all the users on that page irrespective of the event they are attending. So a user attending an event1 send a message and user in the event2 gets that message as well which is incorrect. Ideally users from event1 can only seen messages from users attending event1. I other words, people in the same chat room should only be able to chat with each other and their messages should not go outside the chat room. How can I bind my event id in the websocket with the people attending that event so that the messages within the same event chat room remains within.

Answer 1

I'll put my comments into an answer:

Can we open more than 2 websockets from the same page? Because i need more as well to show some more live updates on my page.

Yes, you can, but you shouldn't need to. Why open more than one webSocket? It's just a communications channel. You can send different messages related to different topics over that one channel. You really shouldn't need multiple webSockets between the same page/server.

The general idea is that you don't just send data, but you send a message name and some data. Then, all receiving code can decide what to do based on the message name. You might be interested in socket.io which creates this format for you on top of webSocket, or you can do it yourself with webSocket as shown here.

If I get answer to my first two questions my last question is, right now when a user uses a chat functionality the message goes to all the users on that page irrespective of the event they are attending. So a user attending an event1 send a message and user in the event2 gets that message as well which is incorrect. Ideally users from event1 can only seen messages from users attending event1. I other words, people in the same chat room should only be able to chat with each other and their messages should not go outside the chat room. How can I bind my event id in the websocket with the people attending that event so that the messages within the same event chat room remains within.

webSockets themselves don't have the "attending the event" capability you are asking for. With plain webSockets, you would have to keep track of which socket was in which event and when you want to send to an event, you send to only the connected webSockets associated with that event. It would be all your own code that would do that. Again, the socket.io library I mentioned above has this capability built-in. It sounds like what you really want. There is Java server support for socket.io too. socket.io has built-in chat rooms and the ability to broadcast to those in a given chat room.

Answer 2

Opening two multiple web Socket connection can be possible in same website.

If you should open two web Socket connection with a certain delay such that browser can recognize both.

eg. In a 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>

Here websocket1.js and websocket2.js are two javascript source file where two new webSocket(URL) are opened in certain interval.

It also depends on which browser you used and which server you deployed it. By the way I am using the Chrome and GlassFish 4 as server and this work fine.