Installing and Setup

Analogy categoryAnalogies

Getting Socket.IO running requires installing two separate packages: 'socket.io' on the server and 'socket.io-client' on the client (the client package is bundled automatically if you're serving the browser client from the Socket.IO server itself, but for bundler-based frontends like Vite or webpack you install it explicitly). Both packages are published independently and versioned together, so keeping their major versions aligned matters for protocol compatibility.

🏏

Cricket analogy: It's like a stadium needing both a broadcast truck and matching receiver units in commentary boxes; installing socket.io on the server and socket.io-client on the browser are the two halves of the same broadcast chain.

Server-Side Installation

On the server, run 'npm install socket.io' inside a Node.js project. Socket.IO does not require Express, but it commonly wraps an existing HTTP server -- typically created via Node's built-in 'http' module or the server instance returned by an Express app -- because Socket.IO needs to attach its own upgrade handler to that server to intercept WebSocket handshake requests. You create the Socket.IO server by passing that HTTP server instance into 'new Server(httpServer, options)'.

🏏

Cricket analogy: It's like installing a Hawk-Eye tracking rig onto the stadium's existing camera scaffolding rather than building a brand new tower; 'npm install socket.io' attaches to your existing HTTP server rather than replacing it.

javascript

// server.js
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');

const app = express();
const httpServer = http.createServer(app);

const io = new Server(httpServer, {
  cors: { origin: 'http://localhost:5173' },
});

io.on('connection', (socket) => {
  console.log('connected:', socket.id);
});

httpServer.listen(3000, () => {
  console.log('Server listening on port 3000');
});

Client-Side Installation

On the frontend, run 'npm install socket.io-client' for any bundler-based project (React, Vue, Svelte, plain webpack/Vite). Import 'io' from 'socket.io-client' and call io(url, options) to connect. If you don't use a bundler, Socket.IO's server automatically serves a client bundle at '/socket.io/socket.io.js', which you can include directly via a script tag -- convenient for quick prototypes but not recommended for production apps that already have a build pipeline.

🏏

Cricket analogy: It's like a fan choosing between a full team broadcast app (npm install with a bundler) versus just tuning into the stadium's free public radio feed (the auto-served client script) for a quick check.

javascript

// client.js (bundler-based project)
import { io } from 'socket.io-client';

const socket = io('http://localhost:3000', {
  transports: ['websocket', 'polling'],
});

socket.on('connect', () => {
  console.log('connected with id', socket.id);
});

Keep the major versions of 'socket.io' and 'socket.io-client' aligned (e.g., both on v4.x). Mixing a v2 client with a v4 server, or vice versa, causes handshake failures because the underlying Engine.IO protocol version differs between major releases.

Install 'socket.io' on the server with npm and 'socket.io-client' on the frontend.
Socket.IO wraps an existing HTTP server (via http.createServer or Express's server instance).
Pass the HTTP server into 'new Server(httpServer, options)' to create the Socket.IO instance.
Bundler-based frontends should npm install 'socket.io-client'; quick prototypes can use the auto-served '/socket.io/socket.io.js' script.
Keep client and server major versions aligned to avoid handshake failures.
CORS options often need to be configured on the server when client and server run on different origins/ports.

Practice what you learned

1. What must you pass into 'new Server(...)' when setting up a Socket.IO server manually?

2. Which npm package do you install on the frontend for a bundler-based app?

3. Why might mixing socket.io v2 on the server with socket.io-client v4 cause failures?

4. Is Express required to use Socket.IO?

5. How can you quickly get a Socket.IO client in the browser without a bundler or npm install?

Was this page helpful?

What Is Socket.IO?

Socket.IO vs WebSockets

Related Study Notes in Programming

Browse all study notes

Programming

Apache Spark Study Notes

Programming · 30 topics

Programming

Apache Flink Study Notes

Programming · 30 topics

Programming

Hadoop Study Notes

Programming · 30 topics

Programming

Snowflake Study Notes

Programming · 30 topics

Programming

Apache Airflow Study Notes

Programming · 30 topics

Programming

dbt (Data Build Tool) Study Notes

Programming · 30 topics

Topics covered

#Programming#SocketIOStudyNotes#InstallingAndSetup#Installing#Setup#Server#Side#StudyNotes#SkillVeris#ExamPrep

Installing and Setup