下面是使用SpringBoot和STOMP协议实现私聊和群聊的完整攻略,包含两个示例说明。
STOMP(Simple Text Oriented Messaging Protocol)是一种基于文本的消息传递协议,用于在客户端和服务器之间进行异步通信。在SpringBoot项目中,我们可以使用STOMP协议实现私聊和群聊功能。本文将介绍如何使用SpringBoot和STOMP协议实现私聊和群聊。
方法一:实现私聊
在SpringBoot项目中,使用Maven或Gradle添加Spring Websocket和STOMP依赖。在pom.xml文件中添加以下依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-messaging</artifactId>
</dependency>
在SpringBoot项目中,创建一个WebSocket配置类,并使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理。代码如下:
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
在上面的代码中,我们使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理,并在configureMessageBroker方法中配置了消息代理的地址为/topic,应用程序的前缀为/app。在registerStompEndpoints方法中,我们注册了一个名为/ws的STOMP端点,并使用SockJS协议进行通信。
在SpringBoot项目中,创建一个Controller类,并使用@MessageMapping注解定义请求路径。代码如下:
@Controller
public class ChatController {
@MessageMapping("/chat/{username}")
@SendTo("/topic/messages")
public ChatMessage send(@DestinationVariable String username, ChatMessage message) {
return new ChatMessage(username, message.getContent());
}
}
在上面的代码中,我们使用@MessageMapping注解定义了一个名为/chat/{username}的请求路径,并使用@SendTo注解将消息发送到/topic/messages地址。在send方法中,我们使用@DestinationVariable注解获取了用户名,并将消息内容封装成ChatMessage对象返回。
在SpringBoot项目中,创建一个页面,并使用STOMP.js库连接WebSocket服务器。代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
<script>
var stompClient = null;
function connect() {
var socket = new SockJS('/ws');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/messages', function (message) {
showMessage(JSON.parse(message.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function sendMessage() {
var username = document.getElementById("username").value;
var content = document.getElementById("content").value;
stompClient.send("/app/chat/" + username, {}, JSON.stringify({'content': content}));
}
function showMessage(message) {
var div = document.createElement("div");
div.innerHTML = message.username + ": " + message.content;
document.getElementById("messages").appendChild(div);
}
</script>
</head>
<body onload="connect()">
<input type="text" id="username" placeholder="Username">
<input type="text" id="content" placeholder="Message">
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>
</body>
</html>
在上面的代码中,我们使用STOMP.js库连接WebSocket服务器,并在页面中添加了一个输入框和一个按钮,用于发送消息。在sendMessage方法中,我们使用stompClient.send方法发送消息,并将用户名作为路径参数传递。
在SpringBoot项目中,启动应用程序,并访问页面。在输入框中输入用户名和消息内容,点击发送按钮,将会发送一条私聊消息。
方法二:实现群聊
在SpringBoot项目中,使用Maven或Gradle添加Spring Websocket和STOMP依赖。在pom.xml文件中添加以下依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-messaging</artifactId>
</dependency>
在SpringBoot项目中,创建一个WebSocket配置类,并使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理。代码如下:
@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws").withSockJS();
}
}
在上面的代码中,我们使用@EnableWebSocketMessageBroker注解启用WebSocket消息代理,并在configureMessageBroker方法中配置了消息代理的地址为/topic,应用程序的前缀为/app。在registerStompEndpoints方法中,我们注册了一个名为/ws的STOMP端点,并使用SockJS协议进行通信。
在SpringBoot项目中,创建一个Controller类,并使用@MessageMapping注解定义请求路径。代码如下:
@Controller
public class ChatController {
@MessageMapping("/chat")
@SendTo("/topic/messages")
public ChatMessage send(ChatMessage message) {
return new ChatMessage(message.getUsername(), message.getContent());
}
}
在上面的代码中,我们使用@MessageMapping注解定义了一个名为/chat的请求路径,并使用@SendTo注解将消息发送到/topic/messages地址。在send方法中,我们将消息内容封装成ChatMessage对象返回。
在SpringBoot项目中,创建一个页面,并使用STOMP.js库连接WebSocket服务器。代码如下:
<!DOCTYPE html>
<html>
<head>
<title>Chat</title>
<script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script>
<script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script>
<script>
var stompClient = null;
function connect() {
var socket = new SockJS('/ws');
stompClient = Stomp.over(socket);
stompClient.connect({}, function (frame) {
console.log('Connected: ' + frame);
stompClient.subscribe('/topic/messages', function (message) {
showMessage(JSON.parse(message.body));
});
});
}
function disconnect() {
if (stompClient !== null) {
stompClient.disconnect();
}
console.log("Disconnected");
}
function sendMessage() {
var username = document.getElementById("username").value;
var content = document.getElementById("content").value;
stompClient.send("/app/chat", {}, JSON.stringify({'username': username, 'content': content}));
}
function showMessage(message) {
var div = document.createElement("div");
div.innerHTML = message.username + ": " + message.content;
document.getElementById("messages").appendChild(div);
}
</script>
</head>
<body onload="connect()">
<input type="text" id="username" placeholder="Username">
<input type="text" id="content" placeholder="Message">
<button onclick="sendMessage()">Send</button>
<div id="messages"></div>
</body>
</html>
在上面的代码中,我们使用STOMP.js库连接WebSocket服务器,并在页面中添加了一个输入框和一个按钮,用于发送消息。在sendMessage方法中,我们使用stompClient.send方法发送消息。
在SpringBoot项目中,启动应用程序,并访问页面。在输入框中输入用户名和消息内容,点击发送按钮,将会发送一条群聊消息。
本文介绍了使用SpringBoot和STOMP协议实现私聊和群聊的方法,并提供了两个示例说明。使用这些方法,我们可以方便地实现WebSocket通信,并提高开发效率。
本文链接:http://task.lmcjl.com/news/7202.html