时间戳

首页 > 解决方案 > Spring Boot - 我将如何实现 Web 套接字来制作一个简单的聊天系统？

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

问题描述

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

我正在使用 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");
    }
}

聊天控制器.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;
    }

}

消息模型.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 外观的一些图片

主页

聊天框

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

标签： javascriptjavaspringspring-bootwebsocket

解决方案

你需要的是一个TCP插座。进行必要的 WS 握手，然后从那里 websocket 帧只是 TCP 数据包。

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

如果这对您解决自己的问题有任何兴趣，请告诉我。

推荐阅读