Smart-Project-1/test.html at main · Tayeb114/Smart-Project-1 · 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Chat Test</title>
    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        #messages { list-style-type: none; padding: 0; margin: 0 0 20px 0; border: 1px solid #ccc; height: 300px; overflow-y: scroll; }
        #messages li { padding: 8px 12px; }
        #messages li:nth-child(odd) { background: #f0f0f0; }
        #form { display: flex; }
        #input { flex-grow: 1; padding: 10px; }
        button { padding: 10px; }
    </style>
</head>
<body>

    <h1>Simple Chat Test</h1>
    <p>This page tests *only* the chat send/receive functionality.</p>
    <p id="status">Status: Connecting...</p>

    <ul id="messages"></ul>

    <form id="form" action="">
        <input id="input" autocomplete="off" placeholder="Type a message..." />
        <button>Send</button>
    </form>

    <script>
        // --- 1. HARD-CODED TEST DATA ---
        const USER_ID = "691360215d5081aa71904ac7";
        const PROJECT_ID = "691366a45d5081aa71904ba9";

        // --- 2. GET HTML ELEMENTS ---
        const status = document.getElementById('status');
        const form = document.getElementById('form');
        const input = document.getElementById('input');
        const messages = document.getElementById('messages');

        // Helper function
        function addMessage(msg) {
            const item = document.createElement('li');
            item.textContent = msg;
            messages.appendChild(item);
            messages.scrollTop = messages.scrollHeight;
        }

        // --- 3. CONNECT TO THE *LOCAL* SOCKET ---
        // <-- THIS IS THE FIX
        const socket = io('http://localhost:9000');

        socket.on('connect', () => {
            status.textContent = `Status: Connected! Socket ID: ${socket.id}`;
            addMessage('System: Connected to server.');

            socket.emit('join_room', PROJECT_ID);
            addMessage(`System: Joined room ${PROJECT_ID}`);
        });

        socket.on('connect_error', (err) => {
            status.textContent = 'Status: Connection Failed.';
            addMessage(`System: Connection error: ${err.message}`);
        });

        // --- 5. LISTEN FOR NEW MESSAGES ---
        socket.on('receive_message', (message) => {
            console.log('Received message:', message);
            addMessage(`[${message.sender.name}]: ${message.content}`);
        });

        // --- 6. HANDLE SENDING A MESSAGE ---
        form.addEventListener('submit', (e) => {
            e.preventDefault();
            const content = input.value.trim();
            if (!content) return;

            const messageData = {
                project: PROJECT_ID,
                sender: USER_ID,
                content: content
            };

            socket.emit('send_message', messageData);
            input.value = '';
        });
    </script>

</body>
</html>