Java端
/**
* @ServerEndpoint 註解是一個類層次的註解，他的功能主要是將目前的類定義成一個websocket的服務器端
* 註解的值將被用於監聽用戶連接的終端訪問URL地址，客戶端可以通過這個URL來連接到WebSocker服務器端
* */
@ServerEndpoint("/websocket")
public class WebSocketTest {
// 靜態變量，用來記錄當前在線連接數。應該把它設計成線程安全的
private static int onlinCount = 0;
// concurrent包的線程安全set，用來存放每個客戶端對應的MyWebsocket對象，若要實現服務器端和單
// 一客戶端通信的話，可以使用Map來存放，其中key可以爲用戶名
private static CopyOnWriteArraySet<WebSocketTest> webSocketSet = new CopyOnWriteArraySet<WebSocketTest>();
// 與某個客戶端的連接會話，需要通過它來給客戶端發送數據
private Session session;
/**
* 連接建立成功調用的方法
* @param 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());
}
/**
* 收到客戶端消息後調用的方法
* @param message 客戶端發送的消息
* @param session 可選的參數
* */
@OnMessage
public void onMessage(String message, Session session) {
System.out.println("來自客戶端的消息：" + message);
// 羣發消息
for(WebSocketTest item : webSocketSet) {
try {
item.sendMessage(message);
} catch (Exception e) {
e.printStackTrace();
continue;
}
}
}
public void sendMessage(String message) throws IOException{
this.session.getBasicRemote().sendText(message);
// this.session.getAsyncRemote().sendText(message);
}
public static synchronized void addOnlineCount() {
WebSocketTest.onlinCount++;
}
public static synchronized void subOnlineCount() {
WebSocketTest.onlinCount--;
}
public static synchronized int getOnlineCount() {
return onlinCount;
}
}前端代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Java後端Websocket的實現</title>
</head>
<body>
<input type="text" id="text">
<button onclick="send()">發送消息</button>
<hr/>
<button onclick="closeWebSocket()">關閉WebSocket的連接</button>
<hr/>
<div id="message"></div>
<script>
var websocket = null;
// 判斷瀏覽器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket("ws://localhost:8080/websocket");
}else{
alert("當前瀏覽器不支持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(message){
document.querySelector("#message").innerHtml += message + "<br>";
}
// 關閉WebSocket的連接
function closeWebSocket(){
websocket.close();
}
function send(){
var message = document.querySelector("#text").value;
websocket.send(message);
}
</script>
</body>
</html>這是拷貝別人的代碼，不在所述問題範圍內，詳情點擊這裏寫鏈接內容
在連接的時候通常會出現握手失敗 302錯誤，主要問題是URL路徑不對，可以參考下面路徑的設置方法
websocket = new WebSocket(“ws://localhost:端口號/項目名稱/websocket”)
在以上代碼修改就可正常連接