摘要：花了將近一周的時(shí)間終于完成了利用完成網(wǎng)頁(yè)版聊天室這個(gè)小，期間還走過(guò)了一段看似彎曲的道路，但是我想其實(shí)也不算是彎路吧，因?yàn)槟阕哌^(guò)的路必將留下你的足跡。

花了將近一周的時(shí)間終于完成了利用WebSocket完成網(wǎng)頁(yè)版聊天室這個(gè)小demo，期間還走過(guò)了一段“看似彎曲”的道路，但是我想其實(shí)也不算是彎路吧，因?yàn)槟阕哌^(guò)的路必將留下你的足跡。這個(gè)小demo看似簡(jiǎn)單，但是這一路走來(lái)自己也是花了不少心思才將其完成，今天就和大家一起分享一下。
剛剛接手這個(gè)任務(wù)時(shí)，我就想能不能使用Node.js來(lái)編寫(xiě)聊天室的服務(wù)器端，而后才發(fā)現(xiàn)這樣做卻存在“跨域問(wèn)題”，因?yàn)槟愕那芭_(tái)是部署在Tomcat服務(wù)器上的，所以前臺(tái)和后臺(tái)的數(shù)據(jù)無(wú)法進(jìn)行直接的交互，雖然可以間接的進(jìn)行交互但是卻不容易，在此不建議大家采用此種方法，可直接采用Java+html實(shí)現(xiàn)網(wǎng)頁(yè)版聊天室。我將首先介紹客戶(hù)端的構(gòu)造而后介紹服務(wù)器端：

【1】 頁(yè)面的編寫(xiě)（使用HTML編寫(xiě)）

         
         
  
         
歡迎光臨聊天室          
           
  
             昵稱(chēng)：   
             內(nèi)容：   
        發(fā)送  
        退出聊天室          
        
           
    

說(shuō)明：

在此我首先放置了一個(gè)ID 名為message的div用來(lái)顯示存放的消息

然后我放置了兩個(gè)input標(biāo)簽：一個(gè)存放昵稱(chēng)，另一個(gè)存放用戶(hù)要發(fā)出去的昵稱(chēng)

最后設(shè)置兩個(gè)按鈕用來(lái)發(fā)送消息和退出聊天

【2】頁(yè)面的腳本編寫(xiě)

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

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;  
     
//該注解用來(lái)指定一個(gè)URI，客戶(hù)端可以通過(guò)這個(gè)URI來(lái)連接到WebSocket。類(lèi)似Servlet的注解mapping。無(wú)需在web.xml中配置。  
@ServerEndpoint("/websocket")  
public class MyWebSocket {  
  // 靜態(tài)變量，用來(lái)記錄當(dāng)前在線連接數(shù)。應(yīng)該把它設(shè)計(jì)成線程安全的。  
  private static int onlineCount = 0;  
     
  // concurrent包的線程安全Set，用來(lái)存放每個(gè)客戶(hù)端對(duì)應(yīng)的MyWebSocket對(duì)象。若要實(shí)現(xiàn)服務(wù)端與單一客戶(hù)端通信的話，可以使用Map來(lái)存放，其中Key可以為用戶(hù)標(biāo)識(shí)  
  private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();  
     
  // 與某個(gè)客戶(hù)端的連接會(huì)話，需要通過(guò)它來(lái)給客戶(hù)端發(fā)送數(shù)據(jù)  
  private Session session;  
  @OnOpen  
  public void onOpen(Session session) {  
    this.session = session;  
    webSocketSet.add(this); // 加入set中  
    addOnlineCount(); // 在線數(shù)加1  
    System.out.println("有新連接加入！當(dāng)前在線人數(shù)為" + getOnlineCount());  
  }  
     
  /** 
   * 連接關(guān)閉調(diào)用的方法 
   */  
  @OnClose  
  public void onClose() {  
    webSocketSet.remove(this); // 從set中刪除  
    subOnlineCount(); // 在線數(shù)減1  
    System.out.println("有一連接關(guān)閉！當(dāng)前在線人數(shù)為" + getOnlineCount());  
  }  
     
  @OnMessage  
  public void onMessage(String message, Session session) {  
    System.out.println("來(lái)自客戶(hù)端的消息:" + message);  
     
    // 群發(fā)消息  
    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("發(fā)生錯(cuò)誤");  
    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--;  
  }  
}  

程序中我對(duì)重要的部門(mén)都標(biāo)記了注釋?zhuān)嘈糯蠹抑灰晕⒖催^(guò)就可以看懂，在此我就不一一贅述了，大家如果在運(yùn)行過(guò)程中有問(wèn)題的可以在文章下方進(jìn)行評(píng)論，我們可以一起討論一下。最后我附上整個(gè)項(xiàng)目文件的位置以供小伙伴們下載運(yùn)行。
百度網(wǎng)盤(pán)下載地址：鏈接：http://pan.baidu.com/s/1pLQbeDP 密碼：t2vp

該鏈接可能已經(jīng)失效，有需要的朋友可以發(fā)送郵件至280815640@qq.com。感謝您的關(guān)注。