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

时间 2019-11-17

标签 spring boot 使用 websocket 组件栏目 Spring 繁體版

原文原文链接

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

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

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

而后会进入如下页面，选择左边的Spring Initiailzr,而后nextjava

下图，用来编辑本身项目的一些信息，能够根据本身的需求进行编辑，而后nextjquery

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

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

Thymeleaf是一个JAVA库，一个XML/XHTML/HTML5的可扩展的模板引擎，而且它能够在WEB和非WEB环境下运行。浏览器

（在本人使用Thymeleaf的过程当中感受功能相似JSP中的EL表达式，可能更增强大，将在下次进行讲解）服务器

下图，填写项目名和项目存放路径，而后finishwebsocket

二，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如何向特定目标发送消息，相似聊天室）