最近在项目中使用到了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如何向特定目标发送消息，类似聊天室）