Websocket是客戶端和服務(wù)器之間的全雙工（持久）連接，因此兩者可以彼此共享信息，而無需重復(fù)建立新的連接。 這消除了從客戶端重復(fù)輪詢以從服務(wù)器獲取更新的需要。

并非所有瀏覽器都支持Websocket，因此我們利用SockJS javascript庫創(chuàng)建WebSocket連接。 SockJS充當(dāng)抽象層，它首先檢查是否對WebSockets提供本機(jī)支持，如果不支持，它將嘗試使用瀏覽器支持的協(xié)議模仿WebSocket行為。

Spring使用STOMP協(xié)議提供了對Websocket的支持，因此我們將使用STOMP.js （用于STOMP協(xié)議的javascript實(shí)現(xiàn)）與服務(wù)器進(jìn)行交互。

在這篇文章中，客戶端將與服務(wù)器建立一個websocket連接，并調(diào)用在服務(wù)器應(yīng)用程序中注冊的websocket端點(diǎn)以接收一些消息。 除此之外，服務(wù)器還會從服務(wù)器中觸發(fā)的后臺活動向客戶端發(fā)送一些實(shí)時消息。

首先配置服務(wù)器。 首先進(jìn)入start.spring.io并使用以下設(shè)置創(chuàng)建一個新的spring boot項(xiàng)目：

配置Websocket

基本的websocket配置包括：

• 創(chuàng)建用于發(fā)布消息的主題地址（ /topic/messages ）
• 客戶端用于調(diào)用服務(wù)器（ /ws ）中的WebSocket端點(diǎn)的URL的可選前綴
• 定義客戶端用于與服務(wù)器建立WebSocket連接的URL。 （ /connect ）

@Configuration @EnableWebSocketMessageBroker public class WebsocketConfiguration implements WebSocketMessageBrokerConfigurer { @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint( "/connect" ).withSockJS(); } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker( "/topic/messages" ); registry.setApplicationDestinationPrefixes( "/ws" ); } }

創(chuàng)建Websocket端點(diǎn)

我們將創(chuàng)建一個Spring控制器，它將具有兩個WebSocket端點(diǎn)，如下所示。 這些端點(diǎn)之一將創(chuàng)建一個無限運(yùn)行的任務(wù)，向客戶端發(fā)送消息，而另一個端點(diǎn)將取消正在運(yùn)行的任務(wù)。

@Controller public class WebsocketController { @Autowired SimpMessagingTemplate simpMessagingTemplate; String destination = "/topic/messages" ; ExecutorService executorService = Executors.newFixedThreadPool(1); Future<?> submittedTask; @MessageMapping( "/start" ) public void startTask(){ if ( submittedTask != null ){ simpMessagingTemplate.convertAndSend(destination, "Task already started" ); return ; } simpMessagingTemplate.convertAndSend(destination, "Started task" ); submittedTask = executorService.submit(() -> { while ( true ){ simpMessagingTemplate.convertAndSend(destination, LocalDateTime.now().toString() + ": doing some work" ); Thread.sleep(10000); } }); } @MessageMapping( "/stop" ) @SendTo( "/topic/messages" ) public String stopTask(){ if ( submittedTask == null ){ return "Task not running" ; } try { submittedTask.cancel( true ); } catch (Exception ex){ ex.printStackTrace(); return "Error occurred while stopping task due to: " + ex.getMessage(); } return "Stopped task" ; } }

我已使用上述兩種方法將消息發(fā)送到配置中定義的主題URL：

通過注釋為@MessageMapping的方法的返回值

使用SimpMessagingTemplate

Spring boot配置了一個SimpMessagingTemplate實(shí)例，我們可以利用它來向主題發(fā)送消息。

就像我們定義REST API端點(diǎn)或查看端點(diǎn)的方式一樣，通過傳遞端點(diǎn)URL來使用@MessageMapping注釋websocket端點(diǎn)。

用Javascript創(chuàng)建Websocket客戶端

我們將首先創(chuàng)建一個HTML頁面，其中包含用于啟動連接的按鈕，然后調(diào)用我們定義的websocket端點(diǎn)，如下所示：

< div class = "content" id= "websocket" > < div > </ div > < div class = "row" > < div class = "col" > <button class = "btn btn-sm btn-info" @click= "connect" >Create connection</button> <button class = "btn btn-sm btn-success" @click= "startTask" >Start Task</button> <button class = "btn btn-sm btn-danger" @click= "stopTask" >Stop Task</button> <button class = "btn btn-sm btn-primary" @click= "disconnect" >Close connection</button> </ div > </ div > < div > </ div > < div class = "row" > < div class = "col" > <ul class = "list-group" style= "height: 500px; overflow:scroll;" > <li class = "list-group-item d-flex justify-content-between align-items-center" v- for = "(m,idx) in messages" :key= "'m-'+idx" > {{m}} </li> </ul> </ div > </ div > </ div >

重要的是要注意上面HTML中鏈接的sockjs和STOMP js庫。

所有工作都在Javascript代碼中進(jìn)行，如下所示：

var stompClient = null; $(function(){ new Vue({ el: "#websocket" , data: { messages: [] }, methods: { connect: function(){ var socket = new SockJS( '/connect' ); stompClient = Stomp.over(socket); var that = this ; stompClient.connect({}, function(frame) { that.handleMessageReceipt( "Connected" ); stompClient.subscribe( '/topic/messages' , function(messageOutput) { that.handleMessageReceipt(messageOutput.body); }); }); }, disconnect: function(){ if (stompClient != null) { stompClient.disconnect(); } this .handleMessageReceipt( "Disconnected" ); }, startTask: function(){ if ( stompClient != null ){ stompClient.send( "/ws/start" ); } else { alert( "Please connect first" ); } }, stopTask: function(){ if ( stompClient != null ){ stompClient.send( "/ws/stop" ); } else { alert( "Please connect first" ); } }, handleMessageReceipt: function (messageOutput) { this .messages.push(messageOutput); } } }); });

connect方法使用/connect端點(diǎn)啟動websocket連接。 開始任務(wù)方法和停止任務(wù)方法調(diào)用我們在WebsocketController定義的兩個websocket端點(diǎn)

stompClient接收到的消息由`handleMessageReceipt`方法處理。

運(yùn)行應(yīng)用程序后，可以創(chuàng)建連接，啟動任務(wù)，停止任務(wù)并獲取如下所示的消息：

完整應(yīng)用程序的代碼可以在這里找到。

翻譯自: https://www.javacodegeeks.com/2020/02/using-websocket-with-spring-framework-and-vuejs.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的将Websocket与Spring Framework和Vuejs结合使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。