WebSocket的那些事（3-STOMP实操篇）-Toy模板网

这篇具有很好参考价值的文章主要介绍了WebSocket的那些事（3-STOMP实操篇）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、序言

上节中我们在 WebSocket的那些事（2-实操篇）中简单介绍了Spring中对于WebSocket的封装，并实现一个简单的服务端，这节我们将会结合STOMP子协议实现WebSocket通信。

二、STOMP详解

1、STOMP简单介绍

WebSocket协议定义了两种消息类型（文本类型和二进制类型），但是消息内容却是未定义的，下面我们介绍一下STOMP协议。

STOMP (Simple Text Oriented Messaging Protocol) 起源于脚本语言，比如Ruby、Python和Perl，用于连接企业消息代理，它可以用于任何可靠的双向网络协议中，如TCP和WebSocket。尽管STOMP是一个面向文本的协议，但消息负载可以是文本或者二进制。

STOMP基于WebSocket在客户端和服务端之间定义了一种机制，协商通过子协议（更高级的消息协议）来定义可以发送何种消息，每条消息的内容是什么，等等。

2、STOMP协议内容

STOMP是一个基于帧的协议，帧的结构如下：

COMMAND
header1:value1
header2:value2

Body

客户端可以用SEND或者SUBSCRIBE命令去发送和订阅消息，destination头部用来描述消息发送到哪里以及谁应该接收消息，下面的消息结构是客户端订阅股票行情的例子，如下：

SUBSCRIBE
id:sub-1
destination:/topic/price.stock.*

下面的消息结构是客户端发送交易请求的例子，如下：

SEND
destination:/queue/trade
content-type:application/json
content-length:44

{"action":"BUY","ticker":"MMM","shares",44}

STOMP服务端可以使用MESSAGE命令广播消息给所有的订阅者，下面的例子为广播股票行情消息给所有消息订阅者。

MESSAGE
message-id:nxahklf6-1
subscription:sub-1
destination:/topic/price.stock.MMM

{"ticker":"MMM","price":129.45}

3、使用STOMP的好处

在Spring中使用STOMP与原生WebSockets相比提供了更加丰富的编程模型，下面是使用STOMP的优点：

不需要发明自定义消息协议和消息格式。
在Spring中，STOMP客户端，包括Java客户端都可用。
可使用其它消息代理管理消息订阅和广播，如RabbitMQ，ActiveMQ等支持STOMP协议的中间件。
应用逻辑处理入口可以像Spring MVC一样统一在@Controller实例内，同时消息可以基于STOMP头部消息进行路由，而不是直接用WebSocketHandler处理原生WebSocket消息。
可以基于STOMP目的地和消息类型使用Spring Security对消息进行安全传输。

三、代码示例

1、Maven依赖

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

备注：这里我就简单用Thymeleaf作模板引擎，为了方便调试在application.yml中将spring.thymeleaf.cache设为false来禁用模板缓存。

2、开启WebSocket消息代理

@Configuration
@EnableWebSocketMessageBroker
public class WebsocketMessageBrokerConfig implements WebSocketMessageBrokerConfigurer {

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		registry.addEndpoint("/websocket") // WebSocket握手端口
			.addInterceptors(new HttpSessionHandshakeInterceptor())
			.setAllowedOriginPatterns("*") // 设置跨域
			.withSockJS(); // 开启SockJS回退机制
	}

	@Override
	public void configureWebSocketTransport(WebSocketTransportRegistration registry) {
		// 这里我们设置入站消息最大为8K
		registry.setMessageSizeLimit(8 * 1024);
	}

	@Override
	public void configureMessageBroker(MessageBrokerRegistry registry) {
		registry.setApplicationDestinationPrefixes("/app") // 发送到服务端目的地前缀
			.enableSimpleBroker("/topic");// 开启简单消息代理，指定消息订阅前缀
	}

}

备注：

关于SockJS的介绍请参考上篇文章 WebSocket的那些事（1-概念篇）最后部分。

setApplicationDestinationPrefixes的意思是以目的地以/app开头的消息将会被路由到Controller实例中的方法进行处理。

enableSimpleBroker将会启用一个内置的内存消息代理，用于订阅、广播和路由消息。

3、控制器

@Slf4j
@Controller
public class GreetingController {

	@GetMapping("/page/greeting")
	public ModelAndView turnToGreetingPage() {
		return new ModelAndView("/greeting");
	}

	@MessageMapping("/greeting")
	public String sayGreeting(String name) {
		log.info("Message received: {}", name);
		return "Hello, " + name;
	}
}

4、前端页面greeting.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>greeting</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.6.1/sockjs.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <style>
        #mainWrapper {
            width: 600px;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="mainWrapper">
    <div id="msgWrapper">
        <p style="vertical-align: top">发送的消息:</p>
        <textarea id="msgSent" style="width: 400px;height: 100px"></textarea>
        <p style="vertical-align: top">收到的消息:</p>
        <textarea id="msgReceived" style="width: 400px;height: 100px"></textarea>
    </div>
    <div style="margin-top: 5px;">
        <button onclick="connect()">连接</button>
        <button onclick="sendMessage()">发送消息</button>
        <button onclick="disconnect()">断开连接</button>
    </div>
</div>
<script type="text/javascript">
    $(() => {
        $('#msgSent').val('');
        $("#msgReceived").val('');
    });

    let stompClient = null;

    // 连接服务器
    const connect = () => {
        const ws = new SockJS('http://localhost:8080/websocket');
        stompClient = Stomp.over(ws);
        stompClient.connect({}, () => {
            $("#msgReceived").val('Connected to websocket server!');
            stompClient.subscribe('/topic/greeting', function (message) {
                    console.log(`Received message: ${message.body}`);
                    $("#msgReceived").val(message.body);
                }
            );
        });
    }

    // 断连
    const disconnect = () => {
        stompClient.disconnect(() => {
            $("#msgReceived").val('Disconnected from WebSocket server');
        });
    }

    // 发送消息，这里直接发的是文本
    const sendMessage = () => {
        stompClient.send('/app/greeting', {}, $('#msgSent').val());
    }
</script>
</body>
</html>

备注：

greeting.html为Thymeleaf模板页面，文件直接放在类路径templates目录下即可.

这里我们选用了SockJS去连接服务端，为什么使用SockJS请参考 WebSocket的那些事（1-概念篇），同时注意协议名称是http而不是ws。