E-learning-Platform/index.html at master · eatbreads/E-learning-Platform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat Test</title>
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/dist/stomp.min.js"></script>
</head>
<body>
    <h2>WebSocket Chat Test</h2>

    <div>
        <h3>Send Message</h3>
        <textarea id="messageContent" placeholder="Enter your message here"></textarea>
        <button id="sendMessageButton">Send Message</button>
    </div>

    <div>
        <h3>Received Messages</h3>
        <ul id="messages"></ul>
    </div>

    <script>
        // 创建 WebSocket 连接
        var socket = new SockJS('/ws/chat');  // WebSocket 服务端地址
        var stompClient = Stomp.over(socket);

        // 连接成功后的回调
        stompClient.connect({}, function (frame) {
            console.log("Connected: " + frame);

            // 订阅聊天室消息
            stompClient.subscribe('/topic/chat-room/1', function (messageOutput) {
                var message = JSON.parse(messageOutput.body);
                console.log("Received message:", message);
                displayMessage(message);
            });

            // 发送消息到指定聊天室
            document.getElementById("sendMessageButton").addEventListener("click", function() {
                var content = document.getElementById("messageContent").value;
                sendMessage(content);
            });
        });

        // 发送消息
        function sendMessage(content) {
            var message = {
                chatRoomId: 1,
                userId: 10,
                content: content,
                messageType: 'text'
            };
            stompClient.send("/app/sendMessage", {}, JSON.stringify(message));
        }

        // 显示接收到的消息
        function displayMessage(message) {
            var messagesList = document.getElementById("messages");
            var listItem = document.createElement("li");
            listItem.textContent = `${message.userId}: ${message.content} (at ${message.createdAt})`;
            messagesList.appendChild(listItem);
        }
    </script>
</body>
</html>