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>
相关推荐
游戏开发爱好者85 小时前
iOS重构期调试实战:架构升级中的性能与数据保障策略
websocket·网络协议·tcp/ip·http·网络安全·https·udp
却道天凉_好个秋8 小时前
音视频学习(三十六):websocket协议总结
websocket·音视频
(:满天星:)9 小时前
第31篇:块设备与字符设备管理深度解析(基于OpenEuler 24.03)
linux·运维·服务器·网络·centos
野蛮人6号10 小时前
虚拟机网络编译器还原默认设置后VMnet8和VMnet1消失了
网络·vmware·虚拟机网络编译器·vmnet8消失
scuter_yu11 小时前
主流零信任安全产品深度介绍
运维·网络·安全
江苏思维驱动智能研究院有限公司11 小时前
Sophos 网络安全:全球领先的自适应安全解决方案提供商
网络·安全·web安全
面朝大海,春不暖,花不开11 小时前
Java网络编程:TCP/UDP套接字通信详解
java·网络·tcp/ip
ChicagoTypewriter11 小时前
计算机网络中的常用表项梳理
网络·计算机网络·智能路由器
DemonAvenger12 小时前
高性能 TCP 服务器的 Go 语言实现技巧:从原理到实践
网络协议·架构·go
Bruce_Liuxiaowei14 小时前
常见高危端口风险分析与防护指南
网络·网络安全·端口·信息搜集