Socket.IO Handbook

Socket.IO.md

https://shav.dev/blog/socket-io-and-redux-middleware

What is Socket.io?

Socket.IO is a Javascript lirary that enables real-time, bidirectional communication between web clients (browsers) and servers. It simplifies the process of bulding interactive web applications by allowing data to be transmitted instantly and continuously between the client and server, facilitating features like chat applications, live updates, and multiplayer gamimg.

What is Bidirectional Communication?

Bidirectional communication means that information can flow in two directions, both the web client(browser) and the server can send and receive data to and from each other in real-time. So if something changes on the server, it can immediately notify the client, and vice versa, without the client needing to constantly ask the server if there's new information available.

Analogy

Think of bidirectional communication like a phone call. When you're talking on the phone with someone, you can both speak and listen at the same time. it's not just one person talking while the other listens, both parties can exchange information back and forth. Similarly, with bidirectional communication in Socket.IO, both the web client and the server can send and receive data, creating a two-way flow of information like a conversation on the phone.

Basic Server Setup with Socket

// 1. Import Packages
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';

// 2. Create Instance
const app = express();
const server = http.createServer(app);
const io = new Server(server)

// 3. Serving Content
app.get('/', (req, res) => {
  res.send('<h1>Socket.IO</h1>');
});

// 4. Define a connection Event Handler
io.on('connection', (client) => {
    console.log('User Connection To server');

    // Send a message to the client using `emit` method and event name called 'message', event name could be anything
    socket.emit('message', 'Welcome to the server!')

    // Disconnect
    client.on('disconnect', () => {
        console.log('User Disconnected From server')
    })
})

// 5. Start The Server
server.listen(3000, () => {
  console.log('listening on *:3000');
});

Connection Event

io.on('connection', callback) is a method used to register event listeners for different events that occure on the server-side. The io object represents the main Socket.IO server instance.

When we call io.on('connection', callback), we're telling Socket.IO to listen for a connection event, which occurs whenever a new client establishes a connection with the server. The callback function will be called/invoked whenever this event occurs, and it will receive a socket object representing the connection to the client.

Similarly, we can use socket.on on the object to listen for events specific to that individual client connection

Client Side Integration

const socket = io()

// Connect
socket.on('connect', () => {
    console.log('Socket Connected')
})

// Receive a message using `on` method same event name called 'message'
socket.on('message', (message) => {
    console.log(message)
})

// Disconnect
socket.on('disconnect', () => {
    console.log('Disconnected From The Server')
})

Emitting Event

Emitting events allows us to send data from one side to other side vice versa. It's a fundamental feature of real-time communication.