使用Spring Boot实现在线聊天功能

2023年11月09日 419阅读 2评论 2点赞

首页
/
技术分享
/
正文

在线聊天功能对于实时通讯的应用程序是必不可少的。在本文中，我们将详细探讨如何使用Spring Boot来实现一个简单的在线聊天接口。

技术栈

Spring Boot: 用于创建MVC架构的Web应用程序。
WebSocket: 提供客户端和服务端之间的双向通信。

第一步：创建Spring Boot项目

首先，使用Spring Initializr (start.spring.io)创建一个新的Spring Boot项目，添加spring-boot-starter-websocket作为依赖。

第二步：配置WebSocket

在Spring Boot中配置WebSocket，需要创建一个配置类，如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.*;

@EnableWebSocketMessageBroker
@Configuration
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        // 注册一个WebSocket端点，客户端将使用它进行连接
        registry.addEndpoint("/chat").withSockJS();
    }

    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) {
        // 配置一个简单的消息代理，它将用于将消息从服务器路由到客户端
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    }
}

这里，/chat是连接端点，客户端通过这个URL来建立WebSocket连接。/topic用于定义目的地前缀，客户端将订阅这个路径以接收消息。

第三步：创建消息模型

创建一个简单的消息模型来承载聊天数据。

public class ChatMessage {
    private String from;
    private String text;
    
    // 构造函数、Getter和Setter
}

第四步：创建消息处理器

定义一个控制器来处理发送到特定路径的消息。

import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    @MessageMapping("/sendMessage")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(ChatMessage chatMessage) {
        return chatMessage;
    }
}

这里的sendMessage方法会处理发送到/app/sendMessage的消息，并将其路由到/topic/public，所有订阅了这个路径的客户端都会收到消息。

第五步：前端实现

在前端，你可以使用JavaScript和HTML来实现客户端逻辑。

<!DOCTYPE html>
<html>
<head>
    <title>Chat Room</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stomp-websocket/lib/stomp.min.js"></script>
</head>
<body>
    <div>
        <input type="text" id="user" placeholder="Enter your name"/>
        <input type="text" id="messageInput" placeholder="Type a message..."/>
        <button onclick="sendMessage()">Send</button>
    </div>
    <ul id="messageArea">
    </ul>

    <script type="text/javascript">
        var stompClient = null;
        var user = document.querySelector('#user');
        var messageInput = document.querySelector('#messageInput');
        var messageArea = document.querySelector('#messageArea');

        function connect() {
            var socket = new SockJS('/chat');
            stompClient = Stomp.over(socket);
            stompClient.connect({}, onConnected, onError);
        }

        function onConnected() {
            stompClient.subscribe('/topic/public', onMessageReceived);
        }

        function onError(error) {
            // 处理连接错误
        }

        function sendMessage() {
            var messageContent = messageInput.value.trim();
            if(messageContent && stompClient) {
                var chatMessage = {
                    from: user.value,
                    text: messageContent
                };
                stompClient.send("/app/sendMessage", {}, JSON.stringify(chatMessage));
                messageInput.value = '';
            }
        }

        function onMessageReceived(payload) {
            var message = JSON.parse(payload.body);
            var messageElement = document.createElement('li');
            messageElement.innerText = message.from + ': ' + message.text;
            messageArea.appendChild(messageElement);
                  }

        connect();
    </script>
</body>
</html>

第六步：运行和测试

启动Spring Boot应用程序，并在浏览器中打开HTML页面，尝试发送和接收消息。

总结

以上步骤展示了如何使用Spring Boot和WebSocket实现在线聊天功能。这只是基础实现，生产环境中你还需要考虑安全、错误处理和消息历史等功能。

2赞

打赏

暂无标签

发布作者： Charlotte

百度收录：正在检测是否收录...

本文链接： http://charblog.top/index.php/archives/123/

作品采用：《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权

—— 评论区 ——

@

wzf
Windows 10 x64 Edition Google Chrome 121

我尝试编写一个语音聊天室，感觉难度较大

2024年02月21日 03:47
@

zzzjun13
Windows 10 x64 Edition Google Chrome 119

嗯好，马上复现

2023年11月17日 09:22