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

Question

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

我将 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

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

Answer 1

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

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

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