Spring Boot提供了一个非常方便的方式来整合
WebSocket和
STOMP协议，可以非常容易地在应用程序中添加实时消息推送功能。下面是实现的步骤：
1.添加依赖
在pom.xml中添加以下依赖：
```xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-
websocket</artifactId>
</dependency>
```
2.创建
WebSocket配置类
创建一个类来配置
WebSocket支持：
```java
@Configuration
@Enable
WebSocketMessageBroker
public class
WebSocketConfig implements
WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry registry) {
registry.enableSimpleBroker("/topic");
registry.setApplicationDestinationPrefixes("/app");
}
@Override
public void register
StompEndpoints(
StompEndpointRegistry registry) {
registry.addEndpoint("/ws").setAllowedOrigins("*").withSock
JS();
}
}
```
该类通过@Enable
WebSocketMessageBroker注解启用了
WebSocket消息代理功能，并实现了
WebSocketMessageBrokerConfigurer接口来配置消息代理。
configureMessageBroker()方法配置了一个简单的消息代理，它将以“/topic”为前缀的消息发送到代理。应用程序的目标前缀将是“/app”。
register
StompEndpoints()方法将“/ws”路径注册为
STOMP端点，并启用Sock
JS支持。
3.编写控制器
创建一个控制器来处理
WebSocket请求：
```java
@Controller
public class
WebSocketController {
@MessageMapping("/hello")
@SendTo("/topic/greetings")
public Greeting greeting(HelloMessage message) throws Exception {
Thread.sleep(1000); // simulated delay
return new Greeting("Hello, " + message.getName() + "!");
}
}
```
@MessageMapping注解表示该方法可以处理来自“/app/hello”的消息。@SendTo注解表示当处理完成后，将结果发送到“/topic/greetings”主题。
4.创建实体类
创建HelloMessage和Greeting实体类：
```java
public class HelloMessage {
private String name;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
public class Greeting {
private String content;
public Greeting(String content) {
this.content = content;
}
public String getContent() {
return content;
}
}
```
5.创建
前端页面
在
前端页面中
使用STOMP.
js和Sock
JS来连接
WebSocket，发送和接收消息：
```html
<!DOCTYPE html>
<html>
<head>
<title>
WebSocket Example</title>
<script src="https://cdn.
jsdelivr.net/sock
js/1.1.4/sock
js.min.
js"></script>
<script src="https://cdn.
jsdelivr.net/
stomp.
js/2.3.3/
stomp.min.
js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.
js"></script>
</head>
<body>
<div>
<label for="name">What is your name?</label>
<input type="text" id="name" name="name">
<button id="connect">Connect</button>
</div>
<br/>
<div>
<label for="message">Message:</label>
<input type="text" id="message" name="message">
<button id="send">Send</button>
</div>
<br/>
<div id="greetings"></div>
<script>
var
stompClient = null;
function connect() {
var socket = new Sock
JS('/ws');
stompClient =
Stomp.over(socket);
stompClient.connect({}, function(frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/greetings', function(greeting){
showGreeting(
JSON.parse(greeting.body).content);
});
});
}
function disconnect() {
if (
stompClient !== null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function sendName() {
stompClient.send("/app/hello", {},
JSON.stringify({'name': $("#name").val()}));
}
function showGreeting(message) {
$("#greetings").append("<tr><td>" + message + "</td></tr>");
}
$(function () {
$("form").on('submit', function (e) {
e.preventDefault();
});
$("#connect").click(function() { connect(); });
$("#disconnect").click(function() { disconnect(); });
$("#send").click(function() { sendName(); });
});
</script>
</body>
</html>
```
在页面中，我们
使用了Sock
JS和
STOMP.
js，创建一个
WebSocket连接。我们可以
使用connect()函数来建立连接，
使用sendName()函数来发送消息，并
使用showGreeting()函数来显示接收到的消息。
最后，我们需要在应用程序的主类上添加@SpringBootApplication注解，并运行应用程序。
这样，当用户在页面上输入一个名字并点击“Connect”按钮时，将建立一个
WebSocket连接，并向服务器发送一个消息。服务器将在1秒钟后返回一个问候语，并将其发送到“/topic/greetings”主题。浏览器将接收到这个消息，并通过showGreeting()函数显示它。
最低0.47元/天 解锁文章
1203
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
