WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。
WebSocket 使得客戶端和服務器之間的數據交換變得更加簡單，允許服務端主動向客戶端推送數據。在 WebSocket API 中，瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。
在 WebSocket API 中，瀏覽器和服務器只需要做一個握手的動作，然後，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
相關功能代碼中有註釋
下面是聊天功能的服務端代碼，服務端代碼使用java創建的Maven project編寫，核心代碼如下：
package edu;
import java.io.IOException;
import java.util.concurrent.CopyOnWriteArraySet;
import javax.websocket.*;
import javax.websocket.server.ServerEndpoint;
/**
* @ServerEndpoint 註解是一個類層次的註解，它的功能主要是將目前的類定義成一個websocket服務器端,
* 註解的值將被用於監聽用戶連接的終端訪問URL地址,客戶端可以通過這個URL來連接到WebSocket服務器端
*/
@ServerEndpoint("/hello")
public class WebSocket {
//靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的。
private static int onlineCount = 0;
//concurrent包的線程安全Set，用來存放每個客戶端對應的MyWebSocket對象。若要實現服務端與單一客戶端通信的話，可以使用Map來存放，其中Key可以爲用戶標識
private static CopyOnWriteArraySet<WebSocket> webSocketSet = new CopyOnWriteArraySet<WebSocket>();
//與某個客戶端的連接會話，需要通過它來給客戶端發送數據
private Session session;
/**
* 連接建立成功調用的方法
* @param session 可選的參數。session爲與某個客戶端的連接會話，需要通過它來給客戶端發送數據
*/
@OnOpen
public void onOpen(Session session){
this.session = session;
webSocketSet.add(this);
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(WebSocket item: webSocketSet){
try {
System.out.println("向客戶端發送消息:" + message);
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() {
WebSocket.onlineCount++;
}
public static synchronized void subOnlineCount() {
WebSocket.onlineCount--;
}
}
下面是客戶端代碼，使用easyUI做的建議聊天頁面樣式（文件必須有JS腳本文件）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Websocket</title>
<link rel="shortcut icon" href="./EasyUI/favicon.ico">
<link rel="stylesheet" type="text/css" href="EasyUI/themes/black/easyui.css">
<link rel="stylesheet" type="text/css" href="EasyUI/themes/icon.css">
<script type="text/javascript" src="EasyUI/jquery.min.js"></script>
<script type="text/javascript" src="EasyUI/jquery.easyui.min.js"></script>
</head>
<body>
<div style="margin-bottom: 30px">
<input id="name" class="easyui-textbox" label="暱稱:" labelPosition="left" style="width: 100%;">
<input id="msgInfo" class="easyui-textbox" label="聊天:" labelPosition="left" style="width: 100%;">
</div>
<div style="margin-bottom: 5px; position:relative;left:30px"><a id="sendToServer" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'">發送消息</a></div>
<div id="message"></div>
<script>
var websocket = null;
//判斷當前瀏覽器是否支持websocket
if('WebSocket' in window)
{
//ws://localhost:8080/com/hello 這裏的地址記得修改，服務器是什麼地址就用什麼
websocket = new WebSocket("ws://ws://localhost:8080/com/helloo");
}
else
{
alert("當前瀏覽器 Not support websocket")
}
//連接發生錯誤的回調方法
websocket.onerror = function () {
setMessageInnerHTML("WebSocket連接發生錯誤");
};
//連接成功建立的回調方法
websocket.onopen = function () {
setMessageInnerHTML("WebSocket連接成功");
};
//接收到消息的回調方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//連接關閉的回調方法
websocket.onclose = function () {
setMessageInnerHTML("webSocket連接關閉");
}
//監聽窗口關閉事件,當窗口關閉時,主動去關閉websocket防止連接還沒斷開就關閉窗口,server端會拋異常.
window.onbeforeunload = function () {
closeWebSocket();
}
//將消息顯示在網頁上
function setMessageInnerHTML(innerHTML) {
document.getElementById('message').innerHTML += innerHTML +'<br/>';
}
function closeWebSocket() {
websocket.close();
}
//發送消息
function send() {
var message = document.getElementById('name').value+":"+document.getElementById('msgInfo').value;
websocket.send(message);
}
//快熟定位
$("#sendToServer").click(
function () {
send();
});
</script>
</body>
</html>