Pepguy commited on
Commit
904caf7
·
verified ·
1 Parent(s): 5ec1bdd

Update app.js

Browse files
Files changed (1) hide show
  1. app.js +63 -36
app.js CHANGED
@@ -23,7 +23,7 @@ serve({
23
  </style>
24
  </head>
25
  <body>
26
- <h2>Join a Room & Send Messages</h2>
27
  <input id="room" placeholder="Room ID" />
28
  <button onclick="joinRoom()">Join Room</button>
29
  <div id="log"></div>
@@ -31,44 +31,71 @@ serve({
31
  <button onclick="sendMsg()">Send</button>
32
 
33
  <script>
34
- let ws;
35
- let currentRoom = null;
36
-
37
- window.addEventListener('load', () => {
38
- const scheme = location.protocol === 'https:' ? 'wss' : 'ws';
39
- ws = new WebSocket(\`\${scheme}://\${location.host}\`);
40
-
41
- ws.onopen = () => log('🔌 Connected to server');
42
- ws.onmessage = ({data}) => {
43
- const msg = JSON.parse(data);
44
- log(\`[\${msg.roomId}] \${msg.message}\`);
45
- };
46
- ws.onclose = () => log(' Disconnected' + err.message);
47
- ws.onerror = err => log('⚠️ WebSocket error: ' + err.message);
48
- });
49
-
50
- function joinRoom() {
51
- const roomId = document.getElementById('room').value.trim();
52
- if (!roomId) return alert('Please enter a room ID');
53
- ws.send(JSON.stringify({ action: 'join', roomId }));
54
- currentRoom = roomId;
55
- log('➡️ Joined room: ' + roomId);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  }
57
-
58
- function sendMsg() {
59
- const txt = document.getElementById('msg').value.trim();
60
- if (!txt) return;
61
- if (!currentRoom) return alert('Join a room first');
62
- ws.send(JSON.stringify({ action: 'post', roomId: currentRoom, message: txt }));
63
- document.getElementById('msg').value = '';
 
 
 
64
  }
65
-
66
- function log(t) {
67
- const el = document.getElementById('log');
68
- el.innerHTML += '<div>' + t + '</div>';
69
- el.scrollTop = el.scrollHeight;
70
  }
71
- </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
72
  </body>
73
  </html>`, {
74
  headers: { "Content-Type": "text/html; charset=utf-8" },
 
23
  </style>
24
  </head>
25
  <body>
26
+ <h2>Join a Room & Send Messages (truly 1)</h2>
27
  <input id="room" placeholder="Room ID" />
28
  <button onclick="joinRoom()">Join Room</button>
29
  <div id="log"></div>
 
31
  <button onclick="sendMsg()">Send</button>
32
 
33
  <script>
34
+ let ws;
35
+ let currentRoom = null;
36
+
37
+ window.addEventListener('load', () => {
38
+ // scheme + host from location, no interpolation syntax
39
+ var scheme = location.protocol === 'https:' ? 'wss' : 'ws';
40
+ var socketUrl = scheme + '://' + location.host + '/';
41
+ console.log('Connecting to ' + socketUrl);
42
+
43
+ ws = new WebSocket(socketUrl);
44
+
45
+ ws.onopen = function() {
46
+ log('🔌 Connected to server');
47
+ };
48
+
49
+ ws.onmessage = function(event) {
50
+ var msg = JSON.parse(event.data);
51
+ log('🗨️ [' + msg.roomId + '] ' + msg.message);
52
+ };
53
+
54
+ ws.onerror = function(event) {
55
+ console.error('WebSocket error event:', event);
56
+ log('⚠️ WebSocket error. Check console.');
57
+ };
58
+
59
+ ws.onclose = function(event) {
60
+ log('❌ Disconnected (code=' + event.code + ' reason="' +
61
+ (event.reason || 'none') + '")');
62
+ };
63
+ });
64
+
65
+ function joinRoom() {
66
+ var roomId = document.getElementById('room').value.trim();
67
+ if (!roomId) return alert('Please enter a room ID');
68
+ if (!ws || ws.readyState !== ws.OPEN) {
69
+ return alert('Socket not open yet!');
70
  }
71
+ ws.send(JSON.stringify({ action: 'join', roomId: roomId }));
72
+ currentRoom = roomId;
73
+ log('➡️ Joined room: ' + roomId);
74
+ }
75
+
76
+ function sendMsg() {
77
+ var txt = document.getElementById('msg').value.trim();
78
+ if (!txt) return;
79
+ if (!ws || ws.readyState !== ws.OPEN) {
80
+ return alert('Socket not open yet!');
81
  }
82
+ if (!currentRoom) {
83
+ return alert('Please join a room first');
 
 
 
84
  }
85
+ ws.send(JSON.stringify({
86
+ action: 'post',
87
+ roomId: currentRoom,
88
+ message: txt
89
+ }));
90
+ document.getElementById('msg').value = '';
91
+ }
92
+
93
+ function log(text) {
94
+ var el = document.getElementById('log');
95
+ el.innerHTML += '<div>' + text + '</div>';
96
+ el.scrollTop = el.scrollHeight;
97
+ }
98
+ </script>
99
  </body>
100
  </html>`, {
101
  headers: { "Content-Type": "text/html; charset=utf-8" },