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>
相关推荐
叫我阿柒啊20 分钟前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发
绝世剑仙纪宁1 小时前
TCP 三次握手、四次挥手
网络·网络协议·tcp/ip
索迪迈科技1 小时前
HTTP中Payload的含义解析
网络·网络协议·http
时空潮汐2 小时前
我用神卓 NAT 公网 IP 盒子搭建《我的世界》联机的经历
网络·网络协议·tcp/ip
liulilittle2 小时前
HTTP/3.0:网络通信的技术革新与性能飞跃
网络·网络协议·http·https·quic·流媒体·通信
岑梓铭2 小时前
计算机网络第四章(4)——网络层《ARP协议》
网络·笔记·tcp/ip·计算机网络·考研·408
Linux运维技术栈3 小时前
域名网页加载慢怎么解决:从测速到优化的全链路性能优化实战
运维·网络·nginx·性能优化·cloudflare
北极光SD-WAN组网3 小时前
基于智能组网设备的港口网络安全闭环管控方案设计与实践
网络·安全·web安全
妳人話3 小时前
TCP的三次握手和四次挥手
网络·网络协议·tcp/ip
纳祥科技3 小时前
分享:一种为蓝牙、WIFI、U段音频发射设备提供ARC回传数字音频桥接功能的方案
网络·单片机·音视频