Html Websocket搭建右下角聊天室

標籤：out   height   locale   soc   建立   server   ane   接收   support   

最近閑來無事,為我的網站增加了聊天室功能,這裡主要用到了websocket技術,這時html5的一種新技術

controller部分

package main.java.web.news;import java.io.IOException;  import java.util.concurrent.CopyOnWriteArraySet;   import javax.websocket.*;  import javax.websocket.server.ServerEndpoint;  /** * @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket伺服器端, * 註解的值將被用於監聽使用者串連的終端訪問URL地址,用戶端可以通過這個URL來串連到WebSocket伺服器端 */  @ServerEndpoint("/websocket")  public class newsServer {      //靜態變數，用來記錄當前線上串連數。應該把它設計成安全執行緒的。      private static int onlineCount = 0;       //concurrent包的安全執行緒Set，用來存放每個用戶端對應的MyWebSocket對象。若要實現服務端與單一用戶端通訊的話，可以使用Map來存放，其中Key可以為使用者標識      private static CopyOnWriteArraySet<newsServer> webSocketSet = new CopyOnWriteArraySet<newsServer>();       //與某個用戶端的串連會話，需要通過它來給用戶端發送資料      private Session session;       /**     * 串連建立成功調用的方法     * @param session  可選的參數。session為與某個用戶端的串連會話，需要通過它來給用戶端發送資料     */      @OnOpen      public void onOpen(Session session){          this.session = session;          webSocketSet.add(this);     //加入set中          addOnlineCount();           //線上數加1          System.out.println("有新串連加入！當前線上人數為" + getOnlineCount());      }       /**     * 串連關閉調用的方法     */      @OnClose      public void onClose(){          webSocketSet.remove(this);  //從set中刪除          subOnlineCount();           //線上數減1          System.out.println("有一串連關閉！當前線上人數為" + getOnlineCount());      }       /**     * 收到用戶端訊息後調用的方法     * @param message 用戶端發送過來的訊息     * @param session 可選的參數     */      @OnMessage      public void onMessage(String message, Session session) {          System.out.println("來自用戶端的訊息:" + message);          //群發訊息          for(newsServer item: webSocketSet){              try {                  item.sendMessage(message);              } catch (IOException e) {                  e.printStackTrace();                  continue;              }          }      }       /**     * 發生錯誤時調用     * @param session     * @param error     */      @OnError      public void onError(Session session, Throwable error){          System.out.println("發生錯誤");          error.printStackTrace();      }       /**     * 這個方法與上面幾個方法不一樣。沒有用註解，是根據自己需要添加的方法。     * @param message     * @throws IOException     */      public void sendMessage(String message) throws IOException{          this.session.getBasicRemote().sendText(message);          //this.session.getAsyncRemote().sendText(message);      }       public static synchronized int getOnlineCount() {          return onlineCount;      }       public static synchronized void addOnlineCount() {          newsServer.onlineCount++;      }       public static synchronized void subOnlineCount() {          newsServer.onlineCount--;      }  }  

jsp和js部分

 <script type="text/javascript">     var websocket = null;     var nameleng = $("#userDetailDiv").text().split("@")[0].length;   var name = $("#userDetailDiv").text().split("@")[0].substring(4,nameleng);      /* //判斷當前瀏覽器是否支援WebSocket     if (‘WebSocket‘ in window) {         websocket = new WebSocket("ws://localhost:8288/cptIdeWeb/websocket");     }     else {         alert(‘當前瀏覽器 Not support websocket‘);    }      //串連發生錯誤的回調方法     websocket.onerror = function () {         setMessageInnerHTML("WebSocket串連發生錯誤");     };      //串連成功建立的回調方法     websocket.onopen = function () {         setMessageInnerHTML("加入問題群");     };      //接收到訊息的回調方法     websocket.onmessage = function (event) {         setMessageInnerHTML(event.data);     };      //串連關閉的回調方法     websocket.onclose = function () {         setMessageInnerHTML("關閉問題群");     };      //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket串連，防止串連還沒斷開就關閉視窗，server端會拋異常。     window.onbeforeunload = function () {         closeWebSocket();     };   */    //將訊息顯示在網頁上     function setMessageInnerHTML(innerHTML) {         document.getElementById(‘message‘).innerHTML +=innerHTML + ‘<br/>‘;         var content = document.getElementById(‘message‘);       content.scrollTop = content.scrollHeight;   }      //關閉WebSocket串連     function closeWebSocket() {     var myDate = new Date();   var mytime=myDate.toLocaleTimeString().substring(2,myDate.toLocaleTimeString().length);        var message = mytime+" "+name+":退出問題群";         websocket.send(message);       websocket.close();         $("#chatView").hide();//隱藏div         $("#startChatView").show();   }      //開啟WebSocket串連     function openWebSocket() {    $("#chatView").show();//隱藏div   $("#startChatView").hide(); //判斷當前瀏覽器是否支援WebSocket     if (‘WebSocket‘ in window) {         websocket = new WebSocket("ws://10.129.9.115:8081/cptIdeWeb/websocket");     }     else {         alert(‘當前瀏覽器 Not support websocket‘);    }      //串連發生錯誤的回調方法     websocket.onerror = function () {         setMessageInnerHTML("WebSocket串連發生錯誤");     };      //串連成功建立的回調方法     websocket.onopen = function () {         /* setMessageInnerHTML("加入問題群"); */       var myDate = new Date();   var mytime=myDate.toLocaleTimeString().substring(2,myDate.toLocaleTimeString().length);        var message = mytime+" "+name+":加入問題群";         websocket.send(message);    };      //接收到訊息的回調方法     websocket.onmessage = function (event) {         setMessageInnerHTML(event.data);     };      //串連關閉的回調方法     websocket.onclose = function () {         setMessageInnerHTML("關閉問題群");     };      //監聽視窗關閉事件，當視窗關閉時，主動去關閉websocket串連，防止串連還沒斷開就關閉視窗，server端會拋異常。     window.onbeforeunload = function () {         closeWebSocket();     };   }   //發送訊息     function send() {   //擷取時間   var myDate = new Date();   var mytime=myDate.toLocaleTimeString().substring(2,myDate.toLocaleTimeString().length);          var message = mytime+" "+name+":"+document.getElementById(‘text‘).value;         websocket.send(message);        document.getElementById(‘text‘).value="";   }  </script>

    <!-- 新增問題諮詢頁面  -->     <div id="chatView" style="position:fixed;bottom:0;width:400px;height:300px;right:0px;margin-bottom:0px;z-index:9999;display:none">                <div class="panel panel-default" style="bottom:0px;margin-bottom:0px">            <div class="panel-heading">                        問題討論室            </div>                        <div id="message" class="panel-body" style="height:220px;overflow:scroll">                            </div>            <hr style="margin-bottom:0px;margin-top:0px">            <input id="text" type="text" style="width:260px" placeholder="提出問題" onkeydown=‘if(event.keyCode==13){$(sendMessage).click()}‘/>                     <button id="sendMessage" onclick="send()">發送訊息</button>               <button onclick="closeWebSocket()">隱藏</button>        </div>            </div>

按照自己的功能定製就可以了

Html Websocket搭建右下角聊天室