花了將近一周的時間終於完成了利用WebSocket完成網頁版聊天室這個小demo，期間還走過了一段“看似彎曲”的道路，但是我想其實也不算是彎路吧，因為你走過的路必將留下你的足跡。這個小demo看似簡單，但是這一路走來自己也是花了不少心思才將其完成，今天就和大家一起分享一下。
剛剛接手這個任務時，我就想能不能使用Node.js來編寫聊天室的服務器端，而后才發現這樣做卻存在“跨域問題”，因為你的前台是部署在Tomcat服務器上的，所以前台和后台的數據無法進行直接的交互，雖然可以間接的進行交互但是卻不容易，在此不建議大家采用此種方法，可直接采用Java+html實現網頁版聊天室。我將首先介紹客戶端的構造而后介紹服務器端：
客戶端
【1】 頁面的編寫（使用HTML編寫）
<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> 說明：
- 在此我首先放置了一個ID 名為message的div用來顯示存放的消息
- 然后我放置了兩個input標簽：一個存放昵稱，另一個存放用戶要發出去的昵稱
- 最后設置兩個按鈕用來發送消息和退出聊天
【2】頁面的腳本編寫
<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文檔上查看各個函數是什么功能。
服務器端
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