WebSockets Basics
WebSocket connection and real-time communication.
Client Side (JavaScript)
Create connection
const ws = new WebSocket("ws://localhost:8080");
Connection opened
ws.addEventListener("open", (event) => {
console.log("Connected");
ws.send("Hello Server!");
});
Receive messages
ws.addEventListener("message", (event) => {
console.log("Received:", event.data);
});
Handle errors
ws.addEventListener("error", (error) => {
console.error("WebSocket error:", error);
});
Connection closed
ws.addEventListener("close", (event) => {
console.log("Disconnected");
});
Send Data
Send string
ws.send("Hello");
Send JSON
ws.send(JSON.stringify({ type: "message", text: "Hello" }));
Send binary data
const buffer = new ArrayBuffer(8);
ws.send(buffer);
Close connection
ws.close();
Connection States
Check ready state
ws.readyState
0 CONNECTING - connecting
1 OPEN - connection open
2 CLOSING - connection closing
3 CLOSED - connection closed
Wait for connection
if (ws.readyState === WebSocket.OPEN) {
ws.send("message");
}
Node.js Server (ws)
const WebSocket = require("ws");
Create server
const wss = new WebSocket.Server({ port: 8080 });
Handle connections
wss.on("connection", (ws) => {
console.log("Client connected");
// Receive messages
ws.on("message", (data) => {
console.log("Received:", data);
ws.send("Echo: " + data);
});
// Handle disconnect
ws.on("close", () => {
console.log("Client disconnected");
});
});