摘要：花了將近一周的時間終于完成了利用完成網頁版聊天室這個小，期間還走過了一段看似彎曲的道路，但是我想其實也不算是彎路吧，因為你走過的路必將留下你的足跡。

花了將近一周的時間終于完成了利用WebSocket完成網頁版聊天室這個小demo，期間還走過了一段“看似彎曲”的道路，但是我想其實也不算是彎路吧，因為你走過的路必將留下你的足跡。這個小demo看似簡單，但是這一路走來自己也是花了不少心思才將其完成，今天就和大家一起分享一下。
剛剛接手這個任務時，我就想能不能使用Node.js來編寫聊天室的服務器端，而后才發現這樣做卻存在“跨域問題”，因為你的前臺是部署在Tomcat服務器上的，所以前臺和后臺的數據無法進行直接的交互，雖然可以間接的進行交互但是卻不容易，在此不建議大家采用此種方法，可直接采用Java+html實現網頁版聊天室。我將首先介紹客戶端的構造而后介紹服務器端：

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

         
         
  
         
歡迎光臨聊天室          
           
  
             昵稱：   
             內容：   
        發送  
        退出聊天室          
        
           
    

說明：

在此我首先放置了一個ID 名為message的div用來顯示存放的消息

然后我放置了兩個input標簽：一個存放昵稱，另一個存放用戶要發出去的昵稱

最后設置兩個按鈕用來發送消息和退出聊天

【2】頁面的腳本編寫

說明：以上幾個方法例如onclose，onmessage均是websocket自帶的方法，大家只需要在websocket文檔上查看各個函數是什么功能。

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 webSocketSet = new CopyOnWriteArraySet();  
     
  // 與某個客戶端的連接會話，需要通過它來給客戶端發送數據  
  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。感謝您的關注。