SpringBoot WebSocket技术 - Intotw的博客

最近看了Spring in Action，了解了一下WebSocket和Stomp协议相关技术，并搭建了一个项目。网上的例子不完整或者描述不清，所以自己记录一下以作备忘。

一.配置#

Spring Boot项目搭建完成后，基于Spring Boot一切皆配置的概念，添加WebSocket支持十分简单。

首先是maven依赖：

1
<dependency>
2
  <groupId>org.springframework.boot</groupId>
3
  <artifactId>spring-boot-starter-websocket</artifactId>
4
</dependency>

如果是使用的Spring Mvc的话，可能需要添加另外的2个依赖。

然后是添加配置类：WebSocketConfig

1
import org.springframework.context.annotation.Configuration;
2
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
3
import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
4
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
5
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
6

7
@Configuration
8
@EnableWebSocketMessageBroker
9
public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
10
    @Override
11
    public void registerStompEndpoints(StompEndpointRegistry stompEndpointRegistry) {
12
        stompEndpointRegistry.addEndpoint("/endpointSang").withSockJS();
13
    }
14

15
    @Override
16
    public void configureMessageBroker(MessageBrokerRegistry registry) {
17
        registry.enableSimpleBroker("/happy");
18
    }
19
}

其中的两个路径： 1.addEndpoint添加的第一个路径，是监听WebSocket连接的Stomp代理的端点，页面请求WebSocket连接时，连接到注册的该端点上Stomp代理，之后的消息会交给Stomp代理处理。

2.该配置启用了一个简单的消息代理，用来处理前缀为/happy的消息，也就是说，只有路径为/happy请求时，消息才会由消息代理处理

二.后端配置控制器Controller#

Controller十分相似，部分注解略有不同:

1
import com.example.demo.bean.TestMessage;
2
import com.example.demo.bean.TestResponse;
3
import org.springframework.beans.factory.annotation.Autowired;
4
import org.springframework.messaging.handler.annotation.MessageMapping;
5
import org.springframework.messaging.handler.annotation.SendTo;
6
import org.springframework.messaging.simp.SimpMessagingTemplate;
7
import org.springframework.stereotype.Controller;
8
import java.text.DateFormat;
9
import java.text.SimpleDateFormat;
10
import java.util.Date;
11

12
@Controller
13
public class WsController {
14
    @Autowired
15
    private SimpMessagingTemplate messagingTemplate;
16
    @MessageMapping("/welcome")//接收路径
17
    @SendTo("/happy/getNewResponse")//消息返回到的路径
18
    public TestResponse say(TestMessage message) {
19
        System.out.println(message.getName());
20
        say1();//调用另外的方式返回（由服务器主动发起的返回）
21
        return new TestResponse("welcome," + message.getName() + " !");//这次同步通信的返回
22
    }
23

24
    public void say1() {
25
        Date date =new Date(System.currentTimeMillis());
26
        DateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
27
        System.out.println(date);
28
        messagingTemplate.convertAndSend("/happy/getHappyResponse", df.format(new Date()));//设置路径以及内容，返回当前服务器时间
29
    }
30
}

TestMessage与TestResponse为普通JavaBean，消息转换机制等与普通Controller基本一致
SimpMessagingTemplate该类提供为主动向页面正在监听WebSocket的程序发送消息的功能
@MessageMapping注解，与@RequestMapping注解类似，配置后台接收消息的路径以及处理函数
@SendTo注解，一般与@MessageMapping注解一起使用，该注解配置的控制器，返回的数据将发送到监听该配置路径的监听函数

三.前端页面#

1
<html lang="en" xmlns:th="http://www.thymeleaf.org">
2
<head>
3
    <meta charset="UTF-8"/>
4
    <title>广播式WebSocket</title>
5
    <script src="../static/jquery.min.js"></script>
6
    <script src="../static/stomp.js"></script>
7
    <script src="../static/sockjs.js"></script>
8
</head>
9
<body onload="disconnect()">
10
<div>
11
    <div>
12
        <button id="connect" onclick="connect();">连接</button>
13
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
14
    </div>
15

16
    <div id="conversationDiv">
17
        <label>输入你的名字</label><input type="text" id="name"/>
18
        <button id="sendName" onclick="sendName();">发送</button>
19
        <p id="response"></p>
20
    </div>
21
</div>
22
<script type="text/javascript">
23
    var stompClient = null;
24
    function setConnected(connected) {
25
        document.getElementById("connect").disabled = connected;
26
        document.getElementById("disconnect").disabled = !connected;
27
        document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
28
        $("#response").html();
29
    }
30
    function connect() {
31
        var socket = new SockJS('/endpointSang');//通过先前配置的端点建立连接
32
        stompClient = Stomp.over(socket);
33
        stompClient.connect({}, function (frame) {
34
            setConnected(true);
35
            console.log('Connected:' + frame);
36
            //开启监听，监听服务器推送到路径/happy/getNewResponse
37
            stompClient.subscribe('/happy/getNewResponse', function (response) {
38
                alert(JSON.parse(response.body).responseMessage);
39
            });
40
            //开启监听，监听服务器推送到路径/happy/getHappyResponse
41
            stompClient.subscribe('/happy/getHappyResponse', function (response) {
42
                console.log(response.body);
43
            })
44
        });
45
    }
46
    //关闭连接
47
    function disconnect() {
48
        if (stompClient != null) {
49
            stompClient.disconnect();
50
        }
51
        setConnected(false);
52
        console.log('Disconnected');
53
    }
54
    //主动发送信息
55
    function sendName() {
56
        var name = $('#name').val();
57
        console.log('name:' + name);
58
        //发送信息到后台监听/welcome路径的controller
59
        stompClient.send("/welcome", {}, JSON.stringify({'name': name}));
60
    }
61
    function showResponse(message) {
62
        $("#response").html(message);
63
    }
64
</script>
65
</body>
66
</html>

运行结果控制台日志：

注：广播模式，只要所有程序监听同一个后台广播路径就可以了点对点通信模式，可以在Js端使用随机数或者根据TokenId开启监听路径，后台根据用户的TokenId派发到不同端点就可以了

乘桴

一.配置#

二.后端配置控制器Controller#

三.前端页面#

继续阅读

换条路线

乘桴

一.配置#

二.后端配置控制器Controller#

三.前端页面#

分享文章

沿着主题读

换条路线