WebSocket,幹什麼用的?我們有了HTTP,為什麼還要用WebSocket?很多同學都會有這樣的疑問。我們先來看一個場景,大家的手機裡都有微信,在微信中,只要有新的訊息,這個聯絡人的前面就會有一個紅點,這個需求要怎麼實現呢?大家思考3秒鐘。哈哈,最簡單,最笨的方法就行客戶端輪詢,在微信的客戶端每隔一段時間(比如:1s或者2s),向服務端傳送一個請求,查詢是否有新的訊息,如果有訊息就顯示紅點。這種方法是不是太笨了呢?每次都要客戶端去發起請求,難道就不能從服務端發起請求嗎?這樣客戶端不就省事了嗎。再看看股票軟體,每個股票的當前價格都是實時的,這我們怎麼做,每個一秒請求後臺查詢當前股票的價格嗎?這樣效率也太低了吧,而且時效性也很低。這就需要我們今天的主角WebSocket去實現了。
什麼是WebSocket
WebSocket協議,RFC 6455這個大家有興趣可以看看,太深,太底層。它是通過一個TCP連線,在客服端與服務端之間建立的一個全雙工、雙向的通訊渠道。它是一個不同於HTTP的TCP協議,但是它通過HTTP工作。它的預設埠也是80和443,和HTTP是一樣的。
一個WebSocket的互動開始於一個HTTP請求,這是一個握手請求,這個請求中包含一個Upgrade請求頭,具體如下:
GET /spring-websocket-portfolio/portfolio HTTP/1.1
Host: localhost:8080
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: Uc9l9TMkWGbHFD2qnFHltg==
Sec-WebSocket-Protocol: v10.stomp, v11.stomp
Sec-WebSocket-Version: 13
Origin: http://localhost:8080
我們看到的第3行和第4行就是這個特殊的請求頭,既然包含了這個特殊的請求頭,那麼請求就要升級,升級成WebSocket請求。這個握手請求的響應也比較特殊,它的成功狀態碼是101,而不是HTTP的200,如下:
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: 1qVdfYHU9hPOl4JYYNXF623Gzn0=
Sec-WebSocket-Protocol: v10.stomp
在這次成功的握手請求以後,在客戶端和服務端之間的socket被開啟,客戶端和服務端可以進行訊息的傳送和接收。
程式實現
我們還是使用現在流程的SpringBoot去搭建我們的專案,在專案中,我們新增兩個依賴,如下:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
- spring-boot-starter-websocket,這是我們今天的主角,我們WebSocket的實現都依賴於這個jar包;
- spring-boot-starter-thymeleaf,這只是起個輔助作用,在專案中要寫個頁面;
好了,基礎工作準備好了,下面進入最核心的程式碼,先寫個WebSocketHandler,這個是用於在服務端接收和返回訊息使用的。如下:
public class MyHandler extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session,
TextMessage message) throws Exception {
String payload = message.getPayload();
System.out.println("我接收到的訊息:"+payload);
String rtnMsg = "我回復了";
for (int i=0;i<10;i++) {
Thread.sleep(2000);
session.sendMessage(new TextMessage(rtnMsg+i));
}
super.handleTextMessage(session, message);
}
}
- 我們建立一個MyHandler類,繼承TextWebSocketHandler類,這個類主要是處理文字的,當然也可以繼承其他的類,比如:處理二進位制的BinaryWebSocketHandler;
- 然後,我們實現handleTextMessage方法,這個方法有兩個引數,WebSocketSession和TextMessage,TextMessage是接收客戶端發來的訊息。WebSocketSession用於設定WebSocket會話和向客戶端傳送訊息;
- 在具體的方法實現中,我們呼叫TextMessage的getPayload方法,可以取出客戶端傳送的訊息;
- 最後我們通過WebSocketSession的sendMessage方法向客戶端傳送訊息,這裡進行10次迴圈,每次迴圈我們間隔2秒;
好了,到這裡最核心的處理接收訊息的方法,我們已經寫好了,然後我們將這個handler指定一個URL,如下:
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myHandler(),"/websocket");
}
@Bean
public MyHandler myHandler() {
return new MyHandler();
}
}
- 首先,我們寫一個WebSocket的配置類WebSocketConfig去實現WebSocketConfigurer介面;
- 由於這是一個配置類,所以在類上加上註解@Configuration,同時因為要做WebSocket的配置,還要加上@EnableWebSocket這個註解;
- 這個類要實現註冊WebSocketHandler的方法registerWebSocketHandlers,在這裡,我們將前面寫的Handler對映到/websocket這個URL;
- 例項化前面寫的MyHandler這個類;
到這裡,WebSocket的服務端的內容就寫好了,接下來,我們再寫個簡單的頁面,在頁面中,使用js進行socket的呼叫,具體頁面內容如下:
<body>
<div id="msg"></div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
var socket = new WebSocket("ws://localhost:8080/websocket");
socket.onopen = function() {
socket.send("傳送資料");
console.log("資料傳送中...");
};
socket.onmessage = function (evt){
var received_msg = evt.data;
$("#msg").append(received_msg+'<br>');
console.log("資料已接收..."+received_msg);
};
socket.onclose = function(){
// 關閉 websocket
console.log("連線已關閉...");
};
</script>
</body>
- 我們先寫個div,在這個div中展示服務端返回內容;
- 引入jquery,主要進行div內容的操作;
- 在第二個script中,我們進行websocket的連線,注意,協議名稱是ws,地址就是我們在WebSocketConfig中配置的地址;
- 接下來就是onopen,onmessage,onclose方法,分別對應著socket開啟,接收服務端訊息和socket關閉的方法。我們在onmessage方法中,接收到服務端的訊息,將其新增到div當中。
最後,我們再給這個html頁面寫個controller對映,如下:
@Controller
public class MyController {
@RequestMapping("index")
public String index() {
return "index";
}
}
這個就不過多解釋了,我們啟動一下應用,在瀏覽器中訪問一下這個html頁面吧。
- 我們訪問的連線是:http://localhost:8080/index,這對應我們寫的html頁面;
- 在這個頁面中,我們通過js訪問了服務端的websocket;
- socket連線成功後,每隔2s向服務端傳送一條訊息;
- 在html頁面中,通過onmessage方法接收訊息,並將訊息新增到div當中;
如果使用以前輪詢的方法,我們需要在html頁面中,定時輪詢請求後臺。而現在,我們通過websocket,服務端可以向客戶端傳送訊息,大大提高了效率。
好了,通過Spring整合WebSocket就先給大家介紹到這裡了。