2015-09-10 50 views
0

在我的web應用程序中,我有2個websocket連接到同一端口上的服務器。一個websocket用於聊天信使,另一個websocket在同一頁面上顯示當前正在查看該事件的總人數。來自同一個頁面的多個websocket與java作爲服務器端

聊天的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); 
} 

而attendeeCount的WebSocket當任何用戶點擊聯合事件 按鈕獲取打開聊天的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); 
    } 

當消息從服務器recived我更新了與會者在onAttendeeJoin所有用戶的方法UI計數。

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

} 

現在我有幾個問題:

  1. 我們可以打開比2周的WebSockets更多來自同一個頁面?因爲我還需要更多以在我的頁面上顯示更多實時更新。

  2. 的另一個問題是我的attendeeCount越做越其他用戶的UI更新正確的,但我的聊天的WebSocket與 我attendeeCount WebSocket的衝突。衝突我的意思是,只要用戶在聊天窗口中鍵入內容並點擊發送按鈕,聊天websocket的onMessage 函數就會被調用完美,但附加到attendeeCount websocket的onAttendeeJoin函數也被調用,並且我的聊天消息也會顯示在$('#attendeeCount')。html(''+ attendeeCount)div中。我無法弄清楚 爲什麼會發生這種情況?雖然onAttendeeJoin和onMessage函數都綁定到相同類型的事件,即onmessage,但它們來自不同的Webocket,它們是 。

  3. 如果我能回答我的前兩個問題我的最後一個問題是,當用戶在該網頁上使用消息進了聊天功能 所有用戶,不論他們是參加活動的現在。因此,參加活動1的用戶將發送一條消息,並且event2中的用戶也會獲取該消息,這是不正確的。理想情況下,來自event1的用戶只能看到來自參加event1的用戶的消息。 換句話說,在同一個聊天室中的人們應該只能夠彼此聊天,他們的消息不應該在聊天室 之外。我如何將WebSocket中的事件ID與參加該事件的人綁定,以便在同一個事件聊天室內留下的消息仍在其中。

+0

爲什麼打開多個webSocket?這只是一個溝通渠道。您可以通過該頻道發送與不同主題相關的不同消息。您確實不應該在同一頁面/服務器之間需要多個webSocket。 – jfriend00

+0

@ jfriend00我明白你的觀點,確實有道理。但是,那麼如何知道我從服務器收到的消息是聊天消息還是與會者計數更新,或者如果我還需要在該頁面上進行一些更新的實時更新,該如何解決? –

+0

總的想法是,你不只是發送數據,但你發送一個消息名稱和一些數據。然後,所有接收的代碼都可以根據消息名稱決定要做什麼。你可能對[socket.io](http:// socket。io /),它會在webSocket之上爲您創建此格式,或者您可以使用webSocket自行完成,如[此處]所示(https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API/ Writing_WebSocket_client_applications#Using_JSON_to_transmit_objects)。 – jfriend00

回答

1

我會把我的意見變成一個答案:

我們可以打開比2周的WebSockets更多來自同一個頁面?因爲我還需要 以便在我的網頁上顯示更多實時更新。

是的,你可以,但你不需要。爲什麼要打開多個webSocket?這只是一個溝通渠道。您可以通過該頻道發送與不同主題相關的不同消息。您確實不應該在同一頁面/服務器之間需要多個webSocket。

一般的想法是,你不只是發送數據,但你發送一個消息名稱和一些數據。然後,所有接收的代碼都可以根據消息名稱決定要做什麼。您可能對socket.io感興趣,它可以在webSocket之上爲您創建此格式,或者您可以使用webSocket自行完成,如here所示。

如果我能回答我的前兩個問題我的最後一個問題是,右 現在,當用戶在該網頁上使用郵件傳遞給所有 用戶聊天功能,不論他們就讀的事件。因此,參加事件1的用戶 發送消息,並且事件2中的用戶獲得 該消息以及這是不正確的。理想情況下,來自event1的用戶 只能看到來自參加event1的用戶的消息。換句話說,在同一個聊天室中的人 應該只能夠彼此聊天,並且他們的消息不應該出現在聊天室外。我怎樣才能綁定websocket中的我的 事件ID與參加該事件的人員,以便 同一事件聊天室中的消息保持在內。

的WebSockets本身不具備「參加活動」的能力你所要求的。使用普通的webSocket,你將不得不跟蹤哪個套接字在哪個事件中,以及何時要發送到事件,只發送到與該事件關聯的已連接webSocket。這將會是你自己的代碼。同樣,我上面提到的socket.io庫具有內置的這種能力。這聽起來像你真正想要的。 Java服務器也支持socket.io。 socket.io具有內置的聊天室並可以在給定的聊天室中進行廣播。

相關問題