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

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

Spring使用STOMP協議提供了對Websocket的支持，因此我們將使用STOMP.js （用于STOMP協議的javascript實現）與服務器進行交互。

在這篇文章中，客戶端將與服務器建立一個websocket連接，并調用在服務器應用程序中注冊的websocket端點以接收一些消息。 除此之外，服務器還會從服務器中觸發的后臺活動向客戶端發送一些實時消息。

首先配置服務器。 首先進入start.spring.io并使用以下設置創建一個新的spring boot項目：

配置Websocket

基本的websocket配置包括：

• 創建用于發布消息的主題地址（ /topic/messages ）
• 客戶端用于調用服務器（ /ws ）中的WebSocket端點的URL的可選前綴
• 定義客戶端用于與服務器建立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" ); } }

創建Websocket端點

我們將創建一個Spring控制器，它將具有兩個WebSocket端點，如下所示。 這些端點之一將創建一個無限運行的任務，向客戶端發送消息，而另一個端點將取消正在運行的任務。

@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" ; } }

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

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

使用SimpMessagingTemplate

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

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

用Javascript創建Websocket客戶端

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

< 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代碼中進行，如下所示：

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端點啟動websocket連接。 開始任務方法和停止任務方法調用我們在WebsocketController定義的兩個websocket端點

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

運行應用程序后，可以創建連接，啟動任務，停止任務并獲取如下所示的消息：

完整應用程序的代碼可以在這里找到。

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。