一.WebSocket是什么
1.概念
WebSocket協議是基於TCP的一種新的網絡協議,它實現了瀏覽器與服務器雙全工(full-duplex)通信——允許服務器主動發送信息給客戶端。
2.實現原理
在實現WebSocket連線過程中,需要通過瀏覽器發出WebSocket連線請求,然后服務器發出回應,這個過程通常稱為“握手”。在WebSocket API,瀏覽器和服務器只需要做一個握手的動作,然后瀏覽器和服務器之間就形成了一條快速通道,兩者間就可以直接互相傳送數據。

二.在java web使用WebSocket
1.創建一個jsp項目
往簡單來說,就是用idea創建一個maven項目 ,add support為web application的項目。

2.maven添加WebSocket庫
<dependencies>
<dependency>
<groupId>javax.websocket</groupId>
<artifactId>javax.websocket-api</artifactId>
<version>1.1</version>
<scope>provided</scope>
</dependency>
</dependencies>
3.聲明WebSocket類
import javax.websocket.*; import javax.websocket.server.PathParam; import javax.websocket.server.ServerEndpoint; import java.io.IOException; @ServerEndpoint(value = "/websocketTest/{userId}") public class TestWebSocket { private static String userId; //連接時執行 @OnOpen public void onOpen(@PathParam("userId") String userId, Session session) throws IOException { this.userId = userId; System.out.println("新連接:" + userId); } //關閉時執行 @OnClose public void onClose() { System.out.println("連接:" + this.userId + " 關閉"); } //收到消息時執行 @OnMessage public void onMessage(String message, Session session) throws IOException { System.out.println("收到用戶" + this.userId + "的消息" + message); session.getBasicRemote().sendText("收到 " + this.userId + " 的消息 "); //回復用戶 } //連接錯誤時執行 @OnError public void onError(Session session, Throwable error) { System.out.println("用戶id為:" + this.userId + "的連接發送錯誤"); error.printStackTrace(); } }
使用@ServerEndpoint來聲明接口:@serverEndpoint(value=“/websocket/{paraName}”);其中“{}”用來表示帶參數的連接,如果需要獲取{}參數,可以在方法中添加@PathParam("paraName") 。連接地址格式為:ws://localhost:8080/projectName/websocket/abc。
Session代表的是兩個WebSocket端點的會話。當WebSocket握手成功后,WebSocket就會提供一個打開的session,可以通過這個session來對另一個端點發送數據。如果這個session關閉了,那發送數據將會報錯。
4.前端代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> websocket Demo---- user000 <br /> <input id="text" type="text" /> <button onclick="send()"> Send </button> <button onclick="closeWebSocket()"> Close </button> <div id="message"> </div> <script type="text/javascript"> //判斷當前瀏覽器是否支持WebSocket if('WebSocket' in window){ websocket = new WebSocket("ws://localhost:8080/test/websocketTest/user000"); console.log("link success") }else{ alert('Not support websocket') } //連接發生錯誤的回調方法 websocket.onerror = function(){ setMessageInnerHTML("error"); }; //連接成功建立的回調方法 websocket.onopen = function(event){ setMessageInnerHTML("open"); } console.log("-----") //接收到消息的回調方法 websocket.onmessage = function(event){ setMessageInnerHTML(event.data); } //連接關閉的回調方法 websocket.onclose = function(){ setMessageInnerHTML("close"); } //監聽窗口關閉事件,當窗口關閉時,主動去關閉websocket連接,防止連接還沒斷開就關閉窗口,server端會拋異常。 window.onbeforeunload = function(){ websocket.close(); } //將消息顯示在網頁上 function setMessageInnerHTML(innerHTML){ document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //關閉連接 function closeWebSocket(){ websocket.close(); } //發送消息 function send(){ var message = document.getElementById('text').value; websocket.send(message); } </script> </body> </html>
在前端打開WebSocket,根據地址和后端交互。
websocket = new WebSocket("ws://localhost:8080/test/websocketTest/user000");
注意上面這一段中的test是這個項目在tomcat設置的啟動地址名稱。
5.測試運行
在瀏覽器打開頁面后,就立即進行了連接。建立了連接,在前端發送數據,然后就接收到后端返回的信息。

在后端可以看到連接的建立和接收到的信息。

三.總結
1.WebSocket建立連接后,通信就是全雙工模式,客戶端和服務端就可以在任何時間里自由發送數據。適合於服務端要主動推送實時數據的場景。
