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

Update app.js

Browse files
Files changed (1) hide show
  1. app.js +96 -130
app.js CHANGED
@@ -1,156 +1,122 @@
1
- // server.js (for Bun)
2
  import { serve } from "bun";
3
 
4
- const rooms = new Map(); // roomId Set<WebSocket>
5
 
6
  serve({
7
  port: Number(process.env.PORT) || 7860,
8
 
9
- // Serve the HTML page at “/”
10
  async fetch(req) {
11
  const url = new URL(req.url);
12
- if (url.pathname !== "/") return new Response("Not Found", { status: 404 });
13
 
14
- return new Response(`<!doctype html>
15
- <html>
16
- <head>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
17
  <title>Dubem Realtime Rooms</title>
18
- <meta charset="utf-8" />
19
  <style>
20
  body { font-family: sans-serif; padding: 20px; background: #f0f0f0; }
21
- #log { border: 1px solid #ccc; height: 200px; overflow-y: auto; padding: 10px; background: #fff; }
22
- input, button { margin: 5px 0; padding: 8px; font-size: 16px; }
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>
30
- <input id="msg" placeholder="Type a message" style="width:80%;" />
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" },
102
- });
103
- },
104
-
105
- // Hook into Bun's WebSocket handling
106
- websocket: {
107
- open(ws) {
108
- // no-op here; clients join via “join” action
109
- },
110
-
111
- message(ws, raw) {
112
- let msg;
113
- try {
114
- msg = JSON.parse(raw.toString());
115
- } catch {
116
- return;
117
- }
118
-
119
- if (msg.action === "join" && msg.roomId) {
120
- // remove from all rooms
121
- for (const clients of rooms.values()) {
122
- clients.delete(ws);
123
- }
124
- // add to new room
125
- const roomSet = rooms.get(msg.roomId) || new Set();
126
- roomSet.add(ws);
127
- rooms.set(msg.roomId, roomSet);
128
- return;
129
- }
130
-
131
- if (msg.action === "post" && msg.roomId && msg.message) {
132
- const clients = rooms.get(msg.roomId);
133
- if (!clients) return;
134
- const payload = JSON.stringify({
135
- roomId: msg.roomId,
136
- message: msg.message,
137
- timestamp: Date.now(),
138
- });
139
- for (const client of clients) {
140
- if (client.readyState === 1) { // OPEN
141
- client.send(payload);
142
- }
143
- }
144
- }
145
- },
146
 
147
- close(ws) {
148
- // on disconnect, remove from all rooms
149
- for (const clients of rooms.values()) {
150
- clients.delete(ws);
151
- }
152
- },
153
  },
154
  });
155
 
156
- console.log("✅ Bun realtime server running on port " + (process.env.PORT || 7860));
 
1
+ // server.js (Bun)
2
  import { serve } from "bun";
3
 
4
+ const rooms = new Map(); // roomId Set<WebSocket>
5
 
6
  serve({
7
  port: Number(process.env.PORT) || 7860,
8
 
 
9
  async fetch(req) {
10
  const url = new URL(req.url);
 
11
 
12
+ // Handle WebSocket upgrade
13
+ if (req.headers.get("upgrade")?.toLowerCase() === "websocket") {
14
+ // Bun’s upgrade helper
15
+ const { socket, response } = Bun.upgradeWebSocket(req);
16
+
17
+ socket.onmessage = (raw) => {
18
+ let msg;
19
+ try { msg = JSON.parse(raw.data); } catch { return; }
20
+
21
+ if (msg.action === "join" && msg.roomId) {
22
+ // leave all rooms
23
+ for (const set of rooms.values()) set.delete(socket);
24
+ // join target room
25
+ const set = rooms.get(msg.roomId) || new Set();
26
+ set.add(socket);
27
+ rooms.set(msg.roomId, set);
28
+ }
29
+
30
+ if (msg.action === "post" && msg.roomId && msg.message) {
31
+ const set = rooms.get(msg.roomId);
32
+ if (!set) return;
33
+ const payload = JSON.stringify({
34
+ roomId: msg.roomId,
35
+ message: msg.message,
36
+ timestamp: Date.now(),
37
+ });
38
+ for (const client of set) {
39
+ if (client.readyState === WebSocket.OPEN) {
40
+ client.send(payload);
41
+ }
42
+ }
43
+ }
44
+ };
45
+
46
+ socket.onclose = () => {
47
+ // clean up on disconnect
48
+ for (const set of rooms.values()) set.delete(socket);
49
+ };
50
+
51
+ return response;
52
+ }
53
+
54
+ // Fallback to serving the HTML for non-WS requests
55
+ if (url.pathname === "/") {
56
+ return new Response(`<!doctype html>
57
+ <html><head>
58
  <title>Dubem Realtime Rooms</title>
59
+ <meta charset="utf-8"/>
60
  <style>
61
  body { font-family: sans-serif; padding: 20px; background: #f0f0f0; }
62
+ #log { border: 1px solid #ccc; height:200px; overflow-y:auto; padding:10px; background:#fff;}
63
+ input, button { margin:5px 0; padding:8px; font-size:16px; }
64
  </style>
65
+ </head><body>
66
+ <h2>Join a Room & Send Messages</h2>
67
+ <input id="room" placeholder="Room ID"/>
 
68
  <button onclick="joinRoom()">Join Room</button>
69
  <div id="log"></div>
70
+ <input id="msg" placeholder="Type a message" style="width:80%;"/>
71
  <button onclick="sendMsg()">Send</button>
72
 
73
  <script>
74
+ var ws, currentRoom;
75
+ window.addEventListener('load', function() {
76
+ var scheme = location.protocol === 'https:' ? 'wss' : 'ws';
77
+ var socketUrl = scheme + '://' + location.host + '/';
78
+ console.log('Connecting to ' + socketUrl);
79
+ ws = new WebSocket(socketUrl);
80
+
81
+ ws.onopen = function(){ log('🔌 Connected'); };
82
+ ws.onmessage = function(ev){
83
+ var m=JSON.parse(ev.data);
84
+ log('['+m.roomId+'] '+m.message);
85
+ };
86
+ ws.onerror = function(e){
87
+ console.error('WS error', e);
88
+ log('⚠️ WebSocket error');
89
+ };
90
+ ws.onclose = function(c){
91
+ log(' Disconnected (code='+c.code+')');
92
+ };
93
+ });
 
 
 
 
 
 
 
 
 
 
94
 
95
+ function joinRoom(){
96
+ var id = document.getElementById('room').value.trim();
97
+ if(!id) return alert('Enter room ID');
98
+ ws.send(JSON.stringify({ action:'join', roomId:id }));
99
+ currentRoom = id; log('➡️ Joined '+id);
100
  }
101
+ function sendMsg(){
102
+ var t = document.getElementById('msg').value.trim();
103
+ if(!t) return;
104
+ if(!currentRoom) return alert('Join a room first');
105
+ ws.send(JSON.stringify({ action:'post', roomId:currentRoom, message:t }));
106
+ document.getElementById('msg').value = '';
 
 
 
 
107
  }
108
+ function log(txt){
109
+ var e=document.getElementById('log');
110
+ e.innerHTML+='<div>'+txt+'</div>'; e.scrollTop=e.scrollHeight;
111
+ }
112
+ </script>
113
+ </body></html>`, {
114
+ headers: { "Content-Type": "text/html; charset=utf-8" }
115
+ });
116
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
117
 
118
+ return new Response("Not Found", { status: 404 });
 
 
 
 
 
119
  },
120
  });
121
 
122
+ console.log("✅ Bun realtime server running on port " + (process.env.PORT||7860));