Running the App & Testing in Two Tabs
You built all the pieces — now connect them. This lesson is hands-on: start the server, open two browser tabs, join the same room, and watch real-time magic happen.
Step 1 — Start the development server
In terminal, inside your chat-app folder:
npm run devExpected output:
Chat server running on http://localhost:3000
[nodemon] watching path(s): *.*
[nodemon] starting `node server.js`💡 Tip: If port 3000 is busy, change
const PORT = 3000 to 3001 in server.js and use http://localhost:3001.Step 2 — Open the app in your browser
Navigate to:
http://localhost:3000You should see the login screen — dark background, username and room inputs, Join button.
⚠️ Common Mistake: Opening
public/index.html as a file (file:///...). Socket.IO requires HTTP — always use localhost through Express.Step 3 — Two-tab test (the “wow” moment)
- Tab 1: Name =
Alice, Room =general→ Join Chat - Tab 2: Name =
Bob, Room =general→ Join Chat - In Tab 1, type “Hello from Alice!” and press Enter
- Tab 2 should show the message instantly without refresh
- Reply from Tab 2 — Tab 1 receives it immediately
What to verify
| Feature | Expected behavior |
|---|---|
| Join message | Both tabs show “Bob joined the room” (system text, centered) |
| Chat bubbles | Your messages blue/right; others gray/left |
| Timestamps | Small time under each bubble (e.g. 2:45 PM) |
| Online users | Header shows “Online (2) — Alice, Bob” |
| Typing | Start typing in Tab 1 → Tab 2 shows “Alice is typing…” |
| Disconnect | Close Tab 2 → Tab 1 shows “Bob left the room” |
Step 4 — Test different rooms
Open Tab 3: join room random as Charlie. Messages in general should not appear in random. This proves Socket.IO rooms isolate conversations.
👨🏫 Teaching note: Make this a class activity: half the class joins
#team-a, half joins #team-b. Shout “send hello” — only same-room students see it. Teaches rooms viscerally.Debugging with browser DevTools
- Press F12 → Network tab
- Filter by WS (WebSocket)
- Click the socket.io connection → Messages
- Watch JSON frames fly when you send chat — great for demos
Server terminal logs
When tabs connect/disconnect, server prints:
A user connected: xK39f...
A user connected: pQ82a...
User disconnected: pQ82a...If something does not work
- Blank page → check Express static path and that files are in
public/ - Cannot connect → server running? Correct port?
- Messages missing → compare event names in server.js and client.js character by character
Full troubleshooting table is in Lesson 10.
Celebrate 🎉
You built a working real-time chat application. Next we explain why it works — the Socket.IO deep dive.