WebSocket的一次瞭解,附demo地址

首先來點基礎知識

WebSocket 是一種網路通訊協議,很多高階功能都需要它。

本文介紹 WebSocket 協議的使用方法。

WebSocket的一次瞭解,附demo地址

一、為什麼需要 WebSocket?

初次接觸 WebSocket 的人,都會問同樣的問題:我們已經有了 HTTP 協議,為什麼還需要另一個協議?它能帶來什麼好處?

答案很簡單,因為 HTTP 協議有一個缺陷:通訊只能由客戶端發起。

舉例來說,我們想了解今天的天氣,只能是客戶端向伺服器發出請求,伺服器返回查詢結果。HTTP 協議做不到伺服器主動向客戶端推送資訊。

WebSocket的一次瞭解,附demo地址

這種單向請求的特點,註定瞭如果伺服器有連續的狀態變化,客戶端要獲知就非常麻煩。我們只能使用“輪詢”:每隔一段時候,就發出一個詢問,瞭解伺服器有沒有新的資訊。最典型的場景就是聊天室。

輪詢的效率低,非常浪費資源(因為必須不停連線,或者 HTTP 連線始終開啟)。因此,工程師們一直在思考,有沒有更好的方法。WebSocket 就是這樣發明的。

二、簡介

WebSocket 協議在2008年誕生,2011年成為國際標準。所有瀏覽器都已經支援了。

它的最大特點就是,伺服器可以主動向客戶端推送資訊,客戶端也可以主動向伺服器傳送資訊,是真正的雙向平等對話,屬於伺服器推送技術的一種。

WebSocket的一次瞭解,附demo地址

這個圖片清晰說明了http和socket的不同

其他特點包括:

(1)建立在 TCP 協議之上,伺服器端的實現比較容易。

(2)與 HTTP 協議有著良好的相容性。預設埠也是80和443,並且握手階段採用 HTTP 協議,因此握手時不容易遮蔽,能透過各種 HTTP 代理伺服器。

(3)資料格式比較輕量,效能開銷小,通訊高效。

(4)可以傳送文字,也可以傳送二進位制資料。

(5)沒有同源限制,客戶端可以與任意伺服器通訊。

(6)協議識別符號是ws(如果加密,則為wss),伺服器網址就是 URL。

ws://example。com:80/some/path

WebSocket的一次瞭解,附demo地址

伺服器端,採用SpringBoot的spring-boot-starter-websocket

客戶端就是瀏覽器啦,目前的瀏覽器幾乎都支援了

先上服務端程式碼:

@Component@ServerEndpoint(“/webSocket”)//@Slf4jpublic class WebSocket { private Session session; private Logger log = LoggerFactory。getLogger(WebSocket。class); private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet<>(); @OnOpen public void onOpen(Session session) { log。info(“socket服務端開啟。。。。”); this。session = session; webSocketSet。add(this); log。info(“【websocket訊息】 有新的連線,總數:{}”, webSocketSet。size()); } @OnClose public void onClose() { webSocketSet。remove(this); log。info(“【websocket訊息】 連線斷開,總數:{}”, webSocketSet。size()); } @OnMessage public void onMessage(String message) { log。info(“【websocket訊息】 收到客戶端發來的訊息:{}”, message); } public void sendMessage(String message) { for (WebSocket webSocket : webSocketSet) { log。info(“【websocket訊息】 廣播訊息,message={}”, message); try { webSocket。session。getBasicRemote()。sendText(message); } catch (Exception e) { e。printStackTrace(); } } }}@Configurationpublic class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointExporter(); }}

上面的程式碼就是啟動服務端了,

WebSocket的一次瞭解,附demo地址

伺服器端向客戶端傳送訊息

下面看看客戶端的情況

WebSocket的一次瞭解,附demo地址

客戶端程式碼(html)

目前這個demo是廣播性質的,就是說,服務端傳送訊息,所有連線的客戶端都能收到。如果想實現網路聊天室的功能就需要點對點的傳送資訊,有時間再講。

demo專案程式碼地址:https://github。com/tigerhoo/websocket-boot