帶你了解一下WebSocket技術
在WebSocket規范提出之前,開發人員實現實時性較強的功能基本采用兩種輪詢方法:輪詢(polling)和Comet技術。
輪詢:輪詢技術要求客戶端以設定的時間間隔周期性地向服務端發送請求,頻繁地查詢是否有新的數據改動。明顯地,這種方法會導致過多不必要的請求,浪費流量和服務器資源。
Comet技術可分為:長輪詢、流技術。長輪詢改進了上述的輪詢技術,減小了無用的請求。它會為某些數據設定過期時間,當數據過期后才會向服務端發送請求;這種機制適合數據的改動不是特別頻繁的情況。流技術**指客戶端使用一個隱藏的窗口與服務端建立HTTP長連接,服務端會不斷更新連接狀態以保持HTTP長連接存活,然后才能主動推送數據給客戶端。
缺點:這兩種技術每一次請求、應答,都浪費了一定流量在相同的頭部信息上,并且開發復雜度也較大。
伴隨著HTML5推出的WebSocket,使B/S模式具備了C/S模式的實時通信能力。WebSocket連接本質上是TCP連接,不需要每次傳輸都帶上重復的頭部數據。WebSocket的工作流程:瀏覽器通過JavaScript向服務端發出建立WebSocket連接的請求,在WebSocket連接建立成功后,客戶端和服務端就可以通過TCP連接傳輸數據。
WebSocket與TCP、HTTP的關系
WebSocket與http協議一樣都是基于TCP的可靠協議,WebSocket在建立握手連接時,數據是通過http協議傳輸的,但是在建立連接之后,真正的數據傳輸階段是不需要http協議參與的。

websocket通訊原理
從下圖可以明顯的看到,分三個階段:
- 打開握手
- 數據傳遞
- 關閉握手

下圖顯示了WebSocket主要的三步 瀏覽器和 服務器端分別做了那些事情。

websocket優缺點
a)、服務器與客戶端之間交換的標頭信息很小,大概只有2字節;
b)、客戶端與服務器可互相主動傳送數據給對方;
c)、Websocket是http協議的升級,支持持久連接并只需一次握手。不用頻率創建TCP請求及銷毀請求,減少網絡帶寬資源的占用,同時也節省服務器資源;
Spring boot websocket實現
引入依賴
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-websocket</artifactId>
- </dependency>
創建 WebSocket 處理器
擴展 TextWebSocketHandler 或 BinaryWebSocketHandler ,你可以覆寫指定的方法。Spring 在收到 WebSocket 事件時,會自動調用事件對應的方法。
- package com.ganhuojun.websocket.spring;
- import org.springframework.stereotype.Component;
- import org.springframework.web.socket.CloseStatus;
- import org.springframework.web.socket.WebSocketHandler;
- import org.springframework.web.socket.WebSocketMessage;
- import org.springframework.web.socket.WebSocketSession;
- @Component
- public class MySpringWebSocketHandler implements WebSocketHandler {
- /**
- * 建立連接后觸發的回調
- */
- @Override
- public void afterConnectionEstablished(WebSocketSession webSocketSession) throws Exception {
- System.out.println("spring 鏈接" + webSocketSession.getId());
- }
- /**
- * 收到消息時觸發的回調
- */
- @Override
- public void handleMessage(WebSocketSession webSocketSession, WebSocketMessage<?> webSocketMessage) throws Exception {
- }
- /**
- * 傳輸消息出錯時觸發的回調
- */
- @Override
- public void handleTransportError(WebSocketSession webSocketSession, Throwable throwable) throws Exception {
- }
- /**
- * 斷開連接后觸發的回調
- */
- @Override
- public void afterConnectionClosed(WebSocketSession webSocketSession, CloseStatus closeStatus) throws Exception {
- }
- /**
- * 是否處理分片消息
- */
- @Override
- public boolean supportsPartialMessages() {
- return false;
- }
- }
配置 WebSocket
將 WebSocket 處理器添加到注冊中心
- package com.ganhuojun.websocket.spring;
- import org.springframework.context.annotation.Bean;
- import org.springframework.context.annotation.Configuration;
- import org.springframework.web.socket.config.annotation.EnableWebSocket;
- import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
- import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
- @Configuration
- @EnableWebSocket
- public class SpringWebSocketConfig implements WebSocketConfigurer {
- @Override
- public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
- //spring默認會給一個OriginHandshakeInterceptor的攔截器
- // 因此需要setAllowedOrigins,否則websocket返回403
- registry.addHandler(springWebSocketHandler(), "/spring/websocket").setAllowedOrigins("*");
- }
- @Bean
- public MySpringWebSocketHandler springWebSocketHandler() {
- return new MySpringWebSocketHandler();
- }
- }
前端可以自己編寫js代碼,本文直接使用websocket在線調試工具
http://www.websocket-test.com/
如下圖,
根據前面后端代碼,測試一下
后端日志
