在spring boot中使用webSocket组件（一）

矫情吗；* 2022-05-31 11:40 262阅读 0赞

**WebSocket 技术学习，更多知识请访问[https://www.itkc8.com][https_www.itkc8.com]**

[https://www.cnblogs.com/Java-dzz/p/6179317.html][https_www.cnblogs.com_Java-dzz_p_6179317.html]

[http://blog.csdn.net/u012702547/article/details/53816326][http_blog.csdn.net_u012702547_article_details_53816326]

最近在项目中使用到了spring的webSocket组件，在这里和大家分享下，如有错误，欢迎大家指正。

在这里我使用的IDE工具是Intellij idea，框架是spring boot。spring boot的主要功能是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。（简单点讲就是帮你整合好了框架，不用自己搭建了，不用再写xml配置文件了！！！）

一，首先先搭建spring boot的框架，如图：File-->New-->Project,

![1075411-20161214141250792-872859036.png][]

然后会进入以下页面，选择左边的Spring Initiailzr,然后next

![1075411-20161214141532167-1274539461.png][]

下图，用来编辑自己项目的一些信息，可以根据自己的需求进行编辑，然后next

![1075411-20161214142201792-545201095.png][]

下图，用来选择spring boot的一些服务，我们这里选择（websocket和Thymeleaf），

在这里选择什么组件，spring boot就会帮你下载对应的jar包，是不是很方便啊。

Thymeleaf是一个JAVA库，一个XML/XHTML/HTML5的可扩展的模板引擎，并且它可以在WEB和非WEB环境下运行。

（在本人使用Thymeleaf的过程中感觉功能类似JSP中的EL表达式，可能更加强大，将在下次进行讲解）

![1075411-20161214143917401-1952109184.png][]

下图，填写项目名和项目存放路径，然后finish

![1075411-20161214145748729-1181502025.png][]

二，spring boot环境搭建好后，开始写代码！！

1.首先先加入三个JS，如图：

![1075411-20161214153723136-196299811.png][]

2.创建WebSocketConfig类，代码如下：

![复制代码][copycode.gif]

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
        }
    }

![复制代码][copycode.gif]

(1),@EnableWebSocketMessageBroker注解用于开启使用STOMP协议来传输基于代理（MessageBroker）的消息，这时候控制器（controller）开始支持@MessageMapping,就像是使用@requestMapping一样。

(2),注册一个Stomp的节点（endpoint）,并指定使用SockJS协议。

(3),配置消息代理（MessageBroker）。

3.创建WiselyMessage类（浏览器向服务器传送消息，用该类进行接收），代码如下：

![复制代码][copycode.gif]

package com.wisely.ch7_6.domain;
    
    public class WiselyMessage {
        private String name;
        public String getName(){
            return name;
        }
    }

![复制代码][copycode.gif]

4.创建WiselyResponse类（服务器向浏览器传送消息，用该类进行传送），代码如下：

![复制代码][copycode.gif]

package com.wisely.ch7_6.domain;
    
    public class WiselyResponse {
        private String responseMessage;
        public WiselyResponse(String responseMessage){
            this.responseMessage = responseMessage;
        }
        public String getResponseMessage(){
            return responseMessage;
        }
    }

![复制代码][copycode.gif]

5.创建WsController类，代码如下：

![复制代码][copycode.gif]

@Controller
    public class WsController {
        @MessageMapping("/welcome")//1
        @SendTo("/topic/getResponse")//2
        public WiselyResponse say(WiselyMessage message) throws Exception {
            return new WiselyResponse("Welcome, " + message.getName() + "!");
        }
    }

![复制代码][copycode.gif]

(1)@MessageMapping和@RequestMapping功能类似，用于设置URL映射地址，浏览器向服务器发起请求，需要通过该地址。

(2)如果服务器接受到了消息，就会对订阅了@SendTo括号中的地址传送消息。

6.创建前端页面ws.html,代码如下：

![复制代码][copycode.gif]

<!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>

![复制代码][copycode.gif]

（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），代码如下：

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

8.然后点击启动按钮就可以了（红色箭头所指），如图：

![1075411-20161214163157589-1492797656.png][]

9.浏览器连开三个页面，如图所示：

![1075411-20161214163619808-1491233458.png][]

![1075411-20161214163633808-433192001.png][]

![1075411-20161214163644089-685414418.png][]

10.随意使用其中一个页面进行消息的发送，其它两个页面都会接受到发送的消息，如图所示：

![1075411-20161214163905761-2089843261.png][]

![1075411-20161214163951151-1558150559.png][]

![1075411-20161214164005714-1615871792.png][]

**WebSocket 技术学习，更多知识请访问[https://www.itkc8.com][https_www.itkc8.com]**

[https_www.itkc8.com]: https://www.itkc8.com/
[https_www.cnblogs.com_Java-dzz_p_6179317.html]: https://www.cnblogs.com/Java-dzz/p/6179317.html
[http_blog.csdn.net_u012702547_article_details_53816326]: http://blog.csdn.net/u012702547/article/details/53816326
[1075411-20161214141250792-872859036.png]: /images/20220531/626c81f0337f4695a720df2053de4bc3.png
[1075411-20161214141532167-1274539461.png]: /images/20220531/9052f1ffec5842a480097f502967f30f.png
[1075411-20161214142201792-545201095.png]: /images/20220531/bf1bccd96e844d48a31e1994d05f35bf.png
[1075411-20161214143917401-1952109184.png]: /images/20220531/63eeb8b9f54842059283d29699653a2b.png
[1075411-20161214145748729-1181502025.png]: /images/20220531/82c30914990f446181bf7d59833171c8.png
[1075411-20161214153723136-196299811.png]: /images/20220531/793b617436f64b06b8bbddcbea534fff.png
[copycode.gif]: /images/20220531/2c68552f52844cecb64347f221406997.png
[1075411-20161214163157589-1492797656.png]: /images/20220531/7275021b268e444fa9a8c9061bf0d63b.png
[1075411-20161214163619808-1491233458.png]: /images/20220531/c569432ecbd6424fa9819a09aea468e3.png
[1075411-20161214163633808-433192001.png]: /images/20220531/4aa4bb9247464465b5a2d760010a4659.png
[1075411-20161214163644089-685414418.png]: /images/20220531/1380761f0c344cbdb0e168244e239e9b.png
[1075411-20161214163905761-2089843261.png]: /images/20220531/a8148a2625cc447d81fe63315bda02cc.png
[1075411-20161214163951151-1558150559.png]: /images/20220531/dc9d7404503a44a58453ee93ad84bb97.png
[1075411-20161214164005714-1615871792.png]: /images/20220531/d6fc594045024ac1b05031ce77281e6b.png