如何利用WebSocket實現網頁版聊天室

時間 2019-12-04

原文原文鏈接

花了將近一週的時間終於完成了利用WebSocket完成網頁版聊天室這個小demo，期間還走過了一段「看似彎曲」的道路，可是我想其實也不算是彎路吧，由於你走過的路必將留下你的足跡。這個小demo看似簡單，可是這一路走來本身也是花了很多心思纔將其完成，今天就和你們一塊兒分享一下。
剛剛接手這個任務時，我就想能不能使用Node.js來編寫聊天室的服務器端，然後才發現這樣作卻存在「跨域問題」，由於你的前臺是部署在Tomcat服務器上的，因此前臺和後臺的數據沒法進行直接的交互，雖然能夠間接的進行交互可是卻不容易，在此不建議你們採用此種方法，可直接採用Java+html實現網頁版聊天室。我將首先介紹客戶端的構造然後介紹服務器端：

客戶端

【1】頁面的編寫（使用HTML編寫）javascript

<body>         
         <div class="container">  
         <center><h1>歡迎光臨聊天室 </h1></center>         
           <div id="message"></div>  
             暱稱： <input id="username" type="text"/>  
             內容： <input id="text" type="text" style="width:300px"/>  
        <button onclick="send()">發送</button>  
        <button onclick="closeWebSocket()">退出聊天室</button>          
        </div>           
  </body>

說明：html

在此我首先放置了一個ID 名爲message的div用來顯示存放的消息
而後我放置了兩個input標籤：一個存放暱稱，另外一個存放用戶要發出去的暱稱
最後設置兩個按鈕用來發送消息和退出聊天

【2】頁面的腳本編寫java

<script type="text/javascript">  
      var websocket = null;  
      //判斷當前瀏覽器是否支持WebSocket  
      if('WebSocket' in window){  
          websocket = new 
          地址格式是：主機名+項目名+客戶端註明的名稱
      WebSocket("ws://localhost:8080/Chat_01/websocket");  
      }  
      else{  
          alert('您的瀏覽器不支持 websocket！')  
      }  
            
      //鏈接發生錯誤的回調方法  
      websocket.onerror = function(){  
          setMessageInnerHTML("error");  
      };  
            
      //鏈接成功創建的回調方法  
      websocket.onopen = function(event){  
          alert("連接成功,歡迎加入聊天室！");  
      }  
            
      //接收到消息的回調方法  
      websocket.onmessage = function(event){  
          setMessageInnerHTML(event.data);  
      }  
            
      //鏈接關閉的回調方法  
      websocket.onclose = function(){  
          var username=document.getElementById('username').value;  
          setMessageInnerHTML(getNowFormatDate()+" "+username+" 退出了聊天室！");  
      }  
            
      //監聽窗口關閉事件，當窗口關閉時，主動去關閉websocket鏈接，防止鏈接還沒斷開就關閉窗口，server端會拋異常。  
      window.onbeforeunload = function(){  
          websocket.close();  
      }  
            
      //將消息顯示在網頁上  
      function setMessageInnerHTML(innerHTML){  
          document.getElementById('message').innerHTML += innerHTML + '';  
      }  
            
      //關閉鏈接  
      function closeWebSocket(){  
          websocket.close();  
      }  
            
      //發送消息  
      function send(){  
          var username=document.getElementById('username').value;  
          var message = document.getElementById('text').value;  
          websocket.send(getNowFormatDate()+" "+username+"說: "+message+"<br/>");  
          //發送消息後，發送消息框自動清空
          document.getElementById('text').value="";  
      }  
           
      function getNowFormatDate() {  
          var myDate = new Date();  
          myDate.getYear();        //獲取當前年份(2位)  
          myDate.getFullYear();    //獲取完整的年份(4位,1970-????)  
          myDate.getMonth();       //獲取當前月份(0-11,0表明1月)  
          myDate.getDate();        //獲取當前日(1-31)  
          myDate.getDay();         //獲取當前星期X(0-6,0表明星期天)  
          myDate.getTime();        //獲取當前時間(從1970.1.1開始的毫秒數)  
          myDate.getHours();       //獲取當前小時數(0-23)  
          myDate.getMinutes();     //獲取當前分鐘數(0-59)  
          myDate.getSeconds();     //獲取當前秒數(0-59)  
          myDate.getMilliseconds();    //獲取當前毫秒數(0-999)  
          myDate.toLocaleDateString();     //獲取當前日期  
          var mytime=myDate.toLocaleTimeString();     //獲取當前時間  
         return myDate.toLocaleString( );        //獲取日期與時間  
        }           
  </script>

說明：以上幾個方法例如onclose，onmessage均是websocket自帶的方法，你們只須要在websocket文檔上查看各個函數是什麼功能。web

服務器端

import java.io.IOException;  
import java.util.concurrent.CopyOnWriteArraySet;  
     
import javax.websocket.OnClose;  
import javax.websocket.OnError;  
import javax.websocket.OnMessage;  
import javax.websocket.OnOpen;  
import javax.websocket.Session;  
import javax.websocket.server.ServerEndpoint;  
     
//該註解用來指定一個URI，客戶端能夠經過這個URI來鏈接到WebSocket。相似Servlet的註解mapping。無需在web.xml中配置。  
@ServerEndpoint("/websocket")  
public class MyWebSocket {  
  // 靜態變量，用來記錄當前在線鏈接數。應該把它設計成線程安全的。  
  private static int onlineCount = 0;  
     
  // concurrent包的線程安全Set，用來存放每一個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通訊的話，可使用Map來存放，其中Key能夠爲用戶標識  
  private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<MyWebSocket>();  
     
  // 與某個客戶端的鏈接會話，須要經過它來給客戶端發送數據  
  private 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());  
  }  
     
  @OnMessage  
  public void onMessage(String message, Session session) {  
    System.out.println("來自客戶端的消息:" + message);  
     
    // 羣發消息  
    for (MyWebSocket item : webSocketSet) {  
      try {  
        item.sendMessage(message);  
      } catch (IOException e) {  
        e.printStackTrace();  
        continue;  
      }  
    }  
  }  
  @OnError  
  public void onError(Session session, Throwable error) {  
    System.out.println("發生錯誤");  
    error.printStackTrace();  
  }  
  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() {  
    MyWebSocket.onlineCount++;  
  }      
  public static synchronized void subOnlineCount() {  
    MyWebSocket.onlineCount--;  
  }  
}

程序中我對重要的部門都標記了註釋，相信你們只要稍微看過就能夠看懂，在此我就不一一贅述了，你們若是在運行過程當中有問題的能夠在文章下方進行評論，咱們能夠一塊兒討論一下。最後我附上整個項目文件的位置以供小夥伴們下載運行。
百度網盤下載地址：連接：http://pan.baidu.com/s/1pLQbeDP 密碼：t2vp 跨域

該連接可能已經失效，有須要的朋友能夠發送郵件至280815640@qq.com。感謝您的關注。瀏覽器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。