在開發(fā) Web 應(yīng)用程序時(shí)，我們有時(shí)需要將服務(wù)端事件推送到連接的客戶端。但 HTTP 并不能做到。客戶端打開與服務(wù)端的連接并請(qǐng)求數(shù)據(jù)，但服務(wù)端不能打開與客戶端的連接并推送數(shù)據(jù)。
為了解決這個(gè)限制，我們可以建立了一個(gè)輪詢模式，網(wǎng)頁會(huì)間隔地輪詢服務(wù)器以獲取新事件。但這種模式不太理想，因?yàn)樗黾恿?HTTP 開銷，速度也只能達(dá)到與輪詢的速率一樣快，并且給服務(wù)器增加了不必要的負(fù)載。
幸運(yùn)的是，HTML5 WebSocket 出現(xiàn)了。WebSocket 協(xié)議允許瀏覽器與 Web 服務(wù)器之間進(jìn)行低開銷的交互。在文中，我們將介紹 Websockets API，并展示如何使用 Spring Boot 實(shí)現(xiàn) Websockets。
HTML5 來救場(chǎng)！
WebSockets 通過瀏覽器和服務(wù)器之間的單連接提供全雙工通信。它不存在 HTTP 開銷，并且允許服務(wù)器將消息實(shí)時(shí)推送到客戶端。
WebSocket API 實(shí)際上很簡(jiǎn)單。您只需要?jiǎng)?chuàng)建一個(gè) WebSocket 對(duì)象，附加事件監(jiān)聽器和發(fā)送消息即可。
以下是一個(gè)例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var socket = new WebSocket('ws://' + window.location.host + '/my-websocket-endpoint'); // Add an event listener for when a connection is opensocket.onopen = function() { console.log('WebSocket connection opened. Ready to send messages.'); // Send a message to the server socket.send('Hello, from WebSocket client!');}; // Add an event listener for when a message is received from the serversocket.onmessage = function(message) { console.log('Message received from server: ' + message);}; |
Spring Boot
Spring 對(duì) WebSockets 接口提供了很好的支持。
首先，我們需要?jiǎng)?chuàng)建一個(gè)類，繼承 Spring 的 TextWebSocketHandler 類。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
public class MyMessageHandler extends TextWebSocketHandler { @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { // The WebSocket has been closed } @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { // The WebSocket has been opened // I might save this session object so that I can send messages to it outside of this method // Let's send the first message session.sendMessage(new TextMessage("You are now connected to the server. This is the first message.")); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage textMessage) throws Exception { // A message has been received System.out.println("Message received: " + textMessage.getPayload()); }} |
接下來，我們需要配置 WebSocket 端點(diǎn)。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
@Configuration@EnableWebSocketpublic class WebsocketConfig implements WebSocketConfigurer { @Bean public WebSocketHandler myMessageHandler() { return new MyMessageHandler(); } @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myMessageHandler(), "/my-websocket-endpoint"); } } |
由于 WebSockets API 是純 JavaScript，您可以在大多數(shù)前端框架中它。包括 Angular，您可以在 TypeScript 中包含 JavaScript 代碼。
總結(jié)
是不是相當(dāng)簡(jiǎn)單？它解決了服務(wù)端和客戶端之間傳輸數(shù)據(jù)的一大困擾。Spring Boot 使它變得更加簡(jiǎn)單。
原文鏈接：https://keyholesoftware.com/2017/04/10/websockets-with-spring-boot/
作者：THOMAS KENDALL
譯者：oopsguy.com
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：http://oopsguy.com/2017/10/30/websockets-with-spring-boot/?utm_source=tuicool&utm_medium=referral
