Introduction to Socket.IO-Client
Socket.IO is a popular library that enables real-time, bidirectional, and event-based communication between web clients and servers. The socket.io-client
is the client-side counterpart of Socket.IO which helps developers to seamlessly integrate real-time communication with their web applications. In this guide, we will explore various methods provided by socket.io-client
with code snippets.
Installation
npm install socket.io-client
Basic Usage
import { io } from "socket.io-client"; const socket = io("http://localhost:3000"); socket.on("connect", () => { console.log("Connected to server"); }); socket.on("message", (msg) => { console.log("Message received:", msg); }); socket.emit("message", "Hello, Server!"); socket.on("disconnect", () => { console.log("Disconnected from server"); });
Connecting with Options
const socket = io("http://localhost:3000", { reconnection: true, // whether to reconnect automatically reconnectionAttempts: 5, // number of reconnection attempts reconnectionDelay: 1000, // delay between reconnections in ms timeout: 20000, // connection timeout in ms autoConnect: true // whether to connect automatically });
Namespaces
const chatSocket = io("http://localhost:3000/chat"); chatSocket.on("connect", () => { console.log("Connected to chat namespace"); }); const newsSocket = io("http://localhost:3000/news"); newsSocket.on("connect", () => { console.log("Connected to news namespace"); });
Rooms
socket.on("connect", () => { socket.emit("joinRoom", "room1"); socket.on("roomMessage", (msg) => { console.log("Message from room:", msg); }); });
Handling Events
socket.on("connect", () => { console.log("Connected"); }); socket.on("disconnect", (reason) => { console.log("Disconnected:", reason); }); socket.on("reconnect", (attemptNumber) => { console.log("Reconnected after", attemptNumber, "attempts"); }); socket.io.on("reconnect_attempt", (attemptNumber) => { console.log("Reconnect attempt:", attemptNumber); });
Using Middleware on Client Side
socket.use((packet, next) => { if (packet.danger) { // validate packet return next(new Error("unauthorized event")); } next(); });
Chat Application Example
import { io } from "socket.io-client"; const socket = io("http://localhost:3000"); document.getElementById("sendButton").addEventListener("click", () => { const message = document.getElementById("messageInput").value; socket.emit("chatMessage", message); }); socket.on("chatMessage", (msg) => { const newMessage = document.createElement("li"); newMessage.textContent = msg; document.getElementById("messages").appendChild(newMessage); }); socket.on("connect", () => { console.log("Connected to chat server"); document.getElementById("status").textContent = "Connected"; }); socket.on("disconnect", () => { console.log("Disconnected from chat server"); document.getElementById("status").textContent = "Disconnected"; });
With these examples and APIs, you can harness the power of socket.io-client
to develop feature-rich, real-time web applications. Keep experimenting with different functionalities to master its capabilities fully. Happy coding!
Hash: bbf0e8bbef29c7fcb6695089a90b98bc4b8bc362712f270a5286807877098081