最近在項目中使用到了spring的webSocket組件，在這里和大家分享下，如有錯誤，歡迎大家指正。
在這里我使用的IDE工具是Intellij idea，框架是spring boot。spring boot的主要功能是用來簡化新Spring應用的初始搭建以及開發過程。該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置。（簡單點講就是幫你整合好了框架，不用自己搭建了，不用再寫xml配置文件了！！！）
一，首先先搭建spring boot的框架，如圖：File-->New-->Project,
然后會進入以下頁面，選擇左邊的Spring Initiailzr,然后next
下圖，用來編輯自己項目的一些信息，可以根據自己的需求進行編輯，然后next
下圖，用來選擇spring boot的一些服務，我們這里選擇（websocket和Thymeleaf），
在這里選擇什么組件，spring boot就會幫你下載對應的jar包，是不是很方便啊。
Thymeleaf是一個JAVA庫，一個XML/XHTML/HTML5的可擴展的模板引擎，並且它可以在WEB和非WEB環境下運行。
（在本人使用Thymeleaf的過程中感覺功能類似JSP中的EL表達式，可能更加強大，將在下次進行講解）
下圖，填寫項目名和項目存放路徑，然后finish
二，spring boot環境搭建好后，開始寫代碼！！
1.首先先加入三個JS，如圖：
2.創建WebSocketConfig類，代碼如下：
package com.wisely.ch7_6; import org.springframework.context.annotation.Configuration; import org.springframework.messaging.simp.config.MessageBrokerRegistry; import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer; import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker; import org.springframework.web.socket.config.annotation.StompEndpointRegistry; @Configuration @EnableWebSocketMessageBroker//1 public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer{ @Override public void registerStompEndpoints(StompEndpointRegistry registry) { registry.addEndpoint("/endpointWisely").withSockJS(); //2 } @Override public void configureMessageBroker(MessageBrokerRegistry registry) { registry.enableSimpleBroker("/topic");//3 } }
(1),@EnableWebSocketMessageBroker注解用於開啟使用STOMP協議來傳輸基於代理（MessageBroker）的消息，這時候控制器（controller）開始支持@MessageMapping,就像是使用@requestMapping一樣。
(2),注冊一個Stomp的節點（endpoint）,並指定使用SockJS協議。
(3),配置消息代理（MessageBroker）。
3.創建WiselyMessage類（瀏覽器向服務器傳送消息，用該類進行接收），代碼如下：
package com.wisely.ch7_6.domain; public class WiselyMessage { private String name; public String getName(){ return name; } }
4.創建WiselyResponse類（服務器向瀏覽器傳送消息，用該類進行傳送），代碼如下：
package com.wisely.ch7_6.domain; public class WiselyResponse { private String responseMessage; public WiselyResponse(String responseMessage){ this.responseMessage = responseMessage; } public String getResponseMessage(){ return responseMessage; } }
5.創建WsController類，代碼如下：
@Controller public class WsController { @MessageMapping("/welcome")//1 @SendTo("/topic/getResponse")//2 public WiselyResponse say(WiselyMessage message) throws Exception { return new WiselyResponse("Welcome, " + message.getName() + "!"); } }
(1)@MessageMapping和@RequestMapping功能類似，用於設置URL映射地址，瀏覽器向服務器發起請求，需要通過該地址。
(2)如果服務器接受到了消息，就會對訂閱了@SendTo括號中的地址傳送消息。
6.創建前端頁面ws.html,代碼如下：
<!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8" /> <title>Spring Boot+WebSocket+廣播式</title> </head> <body onload="disconnect()"> <noscript><h2 style="color: #ff0000">貌似你的瀏覽器不支持websocket</h2></noscript> <div> <div> <button id="connect" onclick="connect();">連接</button> <button id="disconnect" disabled="disabled" onclick="disconnect();">斷開連接</button> </div> <div id="conversationDiv"> <label>輸入你的名字</label><input type="text" id="name" /> <button id="sendName" onclick="sendName();">發送</button> <p id="response"></p> </div> </div> <script th:src="@{sockjs.min.js}"></script> <script th:src="@{stomp.min.js}"></script> <script th:src="@{jquery.js}"></script> <script type="text/javascript"> var stompClient = null; function setConnected(connected) { document.getElementById('connect').disabled = connected; document.getElementById('disconnect').disabled = !connected; document.getElementById('conversationDiv').style.visibility = connected ? 'visible' : 'hidden'; $('#response').html(); } function connect() { var socket = new SockJS('/endpointWisely'); //1 stompClient = Stomp.over(socket);//2 stompClient.connect({}, function(frame) {//3 setConnected(true); console.log('開始進行連接Connected: ' + frame); stompClient.subscribe('/topic/getResponse', function(respnose){ //4 showResponse(JSON.parse(respnose.body).responseMessage); }); }); } function disconnect() { if (stompClient != null) { stompClient.disconnect(); } setConnected(false); console.log("Disconnected"); } function sendName() { var name = $('#name').val(); stompClient.send("/welcome", {}, JSON.stringify({ 'name': name }));//5 } function showResponse(message) { var response = $("#response"); response.html(message); } </script> </body> </html>
（1）連接SockJS的endpoint是“endpointWisely”，與后台代碼中注冊的endpoint要一樣。
（2）創建STOMP協議的webSocket客戶端。
（3）連接webSocket的服務端。
（4）通過stompClient.subscribe（）訂閱服務器的目標是'/topic/getResponse'發送過來的地址，與@SendTo中的地址對應。
（5）通過stompClient.send（）向地址為"/welcome"的服務器地址發起請求，與@MessageMapping里的地址對應。
7.創建WebMvcConfig類（該類的作用是可以為ws.html提供便捷的地址映射,只需要在地址欄里面輸入localhost:8080/ws,就會找到ws.html），代碼如下：
package com.wisely.ch7_6; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ViewControllerRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter{ @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/ws").setViewName("/ws"); } }
8.然后點擊啟動按鈕就可以了（紅色箭頭所指），如圖：
9.瀏覽器連開三個頁面，如圖所示：
10.隨意使用其中一個頁面進行消息的發送，其它兩個頁面都會接受到發送的消息，如圖所示：
到此為止，websocket的廣播式發送演示完畢，如有錯誤，歡迎大家指正。（下篇將演示websocket如何向特定目標發送消息，類似聊天室）