Spring Boot - 我将如何实现 Web 套接字来制作一个简单的聊天系统？

Posted 2023-02-26

【中文标题】Spring Boot - 我将如何实现 Web 套接字来制作一个简单的聊天系统？

【英文标题】：Spring Boot - How would I implement Web sockets to make a simple chatting system?

【发布时间】：2021-10-25 02:06:28

【问题描述】：

我正在尝试制作一个基本上有一个聊天系统的网站，任何人都可以在其中连接并互相聊天，我已经实现了一个注册过程和登录过程，连接到一个数据库，现在是最大的和最令人困惑的部分是实现聊天功能。

我将 JSP 用于视图和 vanilla javascript

我已经尝试过教程，但我似乎无法弄清楚很多事情

一旦用户登录网站，他们应该可以立即使用聊天功能（会显示他们的姓名等），如果其他用户登录，他们应该能够通过聊天相互交流

（老实说，我不知道实现它是简单还是复杂）

目前，来自在线教程。我有这些设置 WebSocket 的类。

---

WebSocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) 
        registry.addEndpoint("/safespot").withSockJS();
    
    
    @Override
    public void configureMessageBroker(MessageBrokerRegistry registry) 
        registry.enableSimpleBroker("/topic");
        registry.setApplicationDestinationPrefixes("/app");
    

---

ChatController.java

@Controller
public class ChatController 

    @MessageMapping("/chat.register")
    @SendTo("/topic/public")
    public MessageModel register(@Payload MessageModel message, SimpMessageHeaderAccessor headerAccessor) 
        headerAccessor.getSessionAttributes().put("username", message.getSender());
        return message;
    

    @MessageMapping("/chat.send")
    @SendTo("/topic/public")
    public MessageModel sendMessage(@Payload MessageModel message) 
        return message;
    

---

MessageModel.java

public class MessageModel 

    private String content;
    private String sender;
    private MessageType type;
    
    public enum MessageType 
        CHAT,LEAVE,JOIN
    

    public String getContent() 
        return content;
    

    public void setContent(String content) 
        this.content = content;
    

    public String getSender() 
        return sender;
    

    public void setSender(String sender) 
        this.sender = sender;
    

    public MessageType getType() 
        return type;
    

    public void setType(MessageType type) 
        this.type = type;
    
    

---

聊天框本身的jsp

        <div id="chat-page">
            <div class="chat-container">
            
                <!-- Header of the chat Box -->
                <div class="chat-header">
                  <h1 class="chat-heading mb-1">Welcome</h1>
                  <p class="chat-para mb-1">Please be respectful in the chat</p>
                </div>
                
                <div class="connecting">Connecting...</div>

                <!-- This is where the chat output will appear -->
                <ul id="messageArea">
                    
                </ul>
                
                <!-- Input box -->
                <form id="messageForm" name="messageForm" nameForm="messageForm">
                    <div class="form-group">
                        <div class="input-group clearfix">
                            <input type="text" id="message" placeholder="Type a message..." autocomplete="off" class="form-control" 
                                style="border-radius: 0; color: #fff" />
                            <button type="button" class="chat-send-btn">Send</button>
                        </div>
                    </div>
                </form>
                
            </div>
        </div>

UI 外观的一些图片

Main page

The chat box

----我知道这很模糊，但如果有人可以指导我如何接近这样做，我将非常感激。

【参考方案1】：

您需要的是一个TCP 套接字。进行必要的 WS 握手，然后从那里 websocket 帧只是 TCP 数据包。

可能的题外话： 我已经在使用 websockets 的 c++ 网络服务器中构建了类似的东西，用于实时公共聊天，其中所有用户都有唯一的身份，并且可以在加载后立即使用聊天。它没有实现登录系统，但它确实有一个数据库，它存储来自记录用户名和时间的用户的所有消息。使用 c++ 嵌入式网络服务器和嵌入式 SQL 解决方案与 websockets 进行网络聊天的结果相当简洁。使用 c++ 后端监控套接字和 Web 前端使我能够确保快速处理用户活动和连接状态，以提供流畅的实时聊天环境。 聊天在线：https://1338th.com

如果您对解决自己的问题感兴趣，请告诉我。

【讨论】：

，我会调查一下，谢谢，所以实现这个功能不会很难吧？