Handling Events with Socket.IO

Socket.IO enables real-time communication by allowing event-based interactions between the client and server. Here's how to handle various events effectively.

1. Event Types in Socket.IO

  • Connection Events: Triggered when a client connects or disconnects.
  • Custom Events: Defined by developers for specific actions (e.g., message, notification).
  • Error Events: Handle connection or communication errors
  • 2. Server-Side Event Handling

    Basic Server Setup

    				
    					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('A user connected');
    
      // Listening for custom events
      socket.on('chat message', (msg) => {
        console.log('Message received:', msg);
        io.emit('chat message', msg); // Broadcast the message
      });
    
      // Handling disconnection
      socket.on('disconnect', () => {
        console.log('User disconnected');
      });
    });
    
    server.listen(3000, () => console.log('Server running on port 3000'));
    
    				
    			

    3. Client-Side Event Handling

    Basic Client Setup

    				
    					<script defer src="/socket.io/socket.io.js"></script> <script defer src="data:text/javascript;base64,DQogIGNvbnN0IHNvY2tldCA9IGlvKCk7DQoNCiAgLy8gU2VuZGluZyBhIGN1c3RvbSBldmVudA0KICBmdW5jdGlvbiBzZW5kTWVzc2FnZSgpIHsNCiAgICBjb25zdCBtZXNzYWdlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21lc3NhZ2UnKS52YWx1ZTsNCiAgICBzb2NrZXQuZW1pdCgnY2hhdCBtZXNzYWdlJywgbWVzc2FnZSk7IC8vIEVtaXQgJ2NoYXQgbWVzc2FnZScgZXZlbnQNCiAgfQ0KDQogIC8vIExpc3RlbmluZyBmb3IgZXZlbnRzDQogIHNvY2tldC5vbignY2hhdCBtZXNzYWdlJywgKG1zZykgPT4gew0KICAgIGNvbnNvbGUubG9nKCdNZXNzYWdlIHJlY2VpdmVkOicsIG1zZyk7DQogICAgLy8gRGlzcGxheSBtZXNzYWdlIGluIFVJDQogIH0pOw0KDQogIC8vIEhhbmRsaW5nIGNvbm5lY3Rpb24gc3RhdHVzDQogIHNvY2tldC5vbignY29ubmVjdCcsICgpID0+IGNvbnNvbGUubG9nKCdDb25uZWN0ZWQgdG8gc2VydmVyJykpOw0KICBzb2NrZXQub24oJ2Rpc2Nvbm5lY3QnLCAoKSA9PiBjb25zb2xlLmxvZygnRGlzY29ubmVjdGVkIGZyb20gc2VydmVyJykpOw0K"></script> 
    				
    			

    4. Broadcasting and Rooms

    Socket.IO makes it easy to broadcast messages or create chat rooms.

    Broadcasting to All Clients

    				
    					socket.on('chat message', (msg) => {
      io.emit('chat message', msg); // Send to all connected clients
    });
    
    
    				
    			

    Using Rooms

    				
    					socket.on('join room', (room) => {
      socket.join(room); // Join a specific room
      io.to(room).emit('message', `User joined room: ${room}`);
    });
    
    				
    			

    5. Error Handling

    Socket.IO includes built-in error events.

    				
    					socket.on('error', (err) => {
      console.error('Socket.IO error:', err);
    });
    
    				
    			

    Conclusion

    Socket.IO's event-driven model allows seamless handling of custom events, broadcasting, and real-time interactions. Its simplicity and flexibility make it ideal for scalable applications.

    ×