WebSockets with Socket.io
Build real-time applications with Socket.io. Learn bidirectional communication for chat, notifications, and live updates.
WebSockets with Socket.io
HTTP is request-response. WebSockets enable real-time, bidirectional communication.
Setup
```bash npm install socket.io ```
Basic Server
```javascript const express = require('express'); const http = require('http'); const { Server } = require('socket.io');
const app = express(); const server = http.createServer(app); const io = new Server(server);
io.on('connection', (socket) => { console.log('User connected:', socket.id); socket.on('disconnect', () => { console.log('User disconnected:', socket.id); }); });
server.listen(3000, () => { console.log('Server running on port 3000'); }); ```
Client Connection
```html <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); socket.on('connect', () => { console.log('Connected!'); }); </script> ```
Sending & Receiving Events
```javascript // Server io.on('connection', (socket) => { // Receive from client socket.on('chat message', (msg) => { console.log('Message:', msg); // Send to all clients io.emit('chat message', msg); }); });
// Client socket.emit('chat message', 'Hello!');
socket.on('chat message', (msg) => { console.log('Received:', msg); }); ```
Emit Patterns
```javascript // To sender only socket.emit('private', data);
// To all except sender socket.broadcast.emit('news', data);
// To all connected clients io.emit('announcement', data);
// To specific socket io.to(socketId).emit('private', data);
// To room io.to('room1').emit('room message', data); ```
Rooms
```javascript io.on('connection', (socket) => { // Join room socket.on('join room', (room) => { socket.join(room); socket.to(room).emit('user joined', socket.id); }); // Leave room socket.on('leave room', (room) => { socket.leave(room); socket.to(room).emit('user left', socket.id); }); // Message to room socket.on('room message', ({ room, message }) => { io.to(room).emit('message', message); }); }); ```
Complete Chat Example
```javascript // Server const express = require('express'); const http = require('http'); const { Server } = require('socket.io');
const app = express(); const server = http.createServer(app); const io = new Server(server);
app.use(express.static('public'));
const users = new Map();
io.on('connection', (socket) => { socket.on('set username', (username) => { users.set(socket.id, username); io.emit('user list', Array.from(users.values())); io.emit('system', `${username} joined`); }); socket.on('chat message', (msg) => { const username = users.get(socket.id); io.emit('chat message', { user: username, text: msg, time: new Date().toLocaleTimeString() }); }); socket.on('typing', () => { const username = users.get(socket.id); socket.broadcast.emit('typing', username); }); socket.on('disconnect', () => { const username = users.get(socket.id); users.delete(socket.id); io.emit('user list', Array.from(users.values())); io.emit('system', `${username} left`); }); });
server.listen(3000); ```
```html <!-- public/index.html --> <!DOCTYPE html> <html> <body> <div id="messages"></div> <input id="input" /><button onclick="send()">Send</button> <script src="/socket.io/socket.io.js"></script> <script> const socket = io(); const input = document.getElementById('input'); const messages = document.getElementById('messages'); socket.emit('set username', prompt('Username?')); function send() { socket.emit('chat message', input.value); input.value = ''; } socket.on('chat message', (msg) => { messages.innerHTML += `<p><b>${msg.user}:</b> ${msg.text}</p>`; }); </script> </body> </html> ```
With CORS
```javascript const io = new Server(server, { cors: { origin: 'http://localhost:3000', methods: ['GET', 'POST'] } }); ```
Key Takeaway
Socket.io enables real-time communication. `emit()` sends events, `on()` receives them. Use rooms for group messaging. It handles reconnection, fallbacks, and cross-browser issues automatically.