WebSocket实战

pom.xml

xml 复制代码
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

WebSocketConfiguration.java

java 复制代码
@Configuration
public class WebSocketConfiguration {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

ChatMessage.java

java 复制代码
@Data
@Builder
@AllArgsConstructor
@NoArgsConstructor
public class ChatMessage {
    private Long senderId;
    private Long receiverId;
    private String content;
}

WebSocketServer.java

java 复制代码
@Slf4j
@Component
@ServerEndpoint("/ws/{userId}")
public class WebSocketServer {

    @Autowired
    private IChatService chatService;

    public static Map<Long, Session> sessionMap = new ConcurrentHashMap<>();

    @OnOpen
    public void onOpen(Session session, @PathParam("userId") Long userId) {
        log.info("用户: {} 与服务器建立连接", userId);
        sessionMap.put(userId, session);
    }

    @OnMessage
    public void onMessage(String message, Session senderSession, @PathParam("userId") Long senderUserId) {
        ChatMessage receivedMessage = JSON.parseObject(message, ChatMessage.class);
        chatService.persistChatMessage(receivedMessage);
        sendPrivateMessage(receivedMessage);
    }

    @OnClose
    public void onClose(Session session, @PathParam("userId") Long userId) {
        log.info("用户: {} 与服务器断开连接", userId);
        sessionMap.remove(userId);
    }

    private void sendPrivateMessage(ChatMessage message) {
        String jsonMessage = JSON.toJSONString(message);

        Session receiverSession = sessionMap.get(message.getReceiverId());
        if (receiverSession != null) {
            try {
                receiverSession.getBasicRemote().sendText(jsonMessage);
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
    }
}

chat.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User</title>
</head>
<body>
    <h2>User</h2>

    <div id="message-container">
        <h3>Received Messages:</h3>
        <ul id="received-messages"></ul>
    </div>

    <div>
        <h3>Send a Message:</h3>
        <label for="receiver-id">Receiver ID:</label>
        <input type="text" id="receiver-id" placeholder="Enter receiver's ID...">
        <br>
        <label for="message-input">Message:</label>
        <input type="text" id="message-input" placeholder="Type your message...">
        <button onclick="sendMessage()">Send</button>
    </div>

    <script>
        var userId = prompt("Enter your user ID:");
        var websocket = new WebSocket("ws://localhost:8080/ws/" + userId);

        websocket.onmessage = function (event) {
            var receivedMessages = document.getElementById("received-messages");
            var messageItem = document.createElement("li");
            var messageData = JSON.parse(event.data);
            messageItem.textContent = "From User ID " + messageData.senderId + ": " + messageData.content;
            receivedMessages.appendChild(messageItem);
        };

        function sendMessage() {
            var receiverIdInput = document.getElementById("receiver-id");
            var messageInput = document.getElementById("message-input");

            var receiverId = receiverIdInput.value;
            var messageContent = messageInput.value;

            if (receiverId && messageContent) {
                var message = {
                    senderId: userId,
                    receiverId: receiverId,
                    content: messageContent
                };

                websocket.send(JSON.stringify(message)); 	// 使用JSON.stringify()转换为JSON字符串
                messageInput.value = "";
            } else {
                alert("Please enter receiver ID and message before sending.");
            }
        }
    </script>
</body>
</html>
相关推荐
一只小鱼儿吖29 分钟前
进程代理单窗口单IP技术:原理、应用与实现
网络·网络协议·tcp/ip
稳联技术30 分钟前
Ethernet IP与Profinet共舞:网关驱动绿色工业的智慧脉动
网络·网络协议·tcp/ip
学习3人组39 分钟前
CentOS配置网络
linux·网络·centos
高兴达1 小时前
RPC框架--实现一个非常简单的RPC调用
网络协议·rpc·firefox
~山有木兮2 小时前
LiteHub中间件之限流实现
网络·http·中间件
cui_win2 小时前
【网络】Linux 内核优化实战 - net.core.flow_limit_table_len
linux·运维·网络
BD_Marathon3 小时前
虚拟机网络检查
网络
游戏开发爱好者83 小时前
iOS App首次启动请求异常调试:一次冷启动链路抓包与初始化流程修复
websocket·网络协议·tcp/ip·http·网络安全·https·udp
2501_915106323 小时前
频繁迭代下完成iOS App应用上架App Store:一次快速交付项目的完整回顾
websocket·网络协议·tcp/ip·http·网络安全·https·udp
cocologin4 小时前
RIP 技术深度解析
运维·网络·网络协议