WebSocketは双方向リアルタイム通信を可能にするプロトコルです。 チャットアプリ、ライブ通知、リアルタイムダッシュボードなど、 サーバーからクライアントへのプッシュ通知が必要な場面で活躍します。

Socket.IOのセットアップ

npm install socket.io express

サーバー側のコード

const express = require('express');
const { createServer } = require('http');
const { Server } = require('socket.io');

const app = express();
const server = createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log('ユーザー接続:', socket.id);

  socket.on('chat message', (msg) => {
    io.emit('chat message', { id: socket.id, text: msg });
  });

  socket.on('disconnect', () => {
    console.log('ユーザー切断:', socket.id);
  });
});

server.listen(3000);

クライアント側のコード

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();

document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const msg = document.getElementById('input').value;
  socket.emit('chat message', msg);
});

socket.on('chat message', (data) => {
  const li = document.createElement('li');
  li.textContent = `${data.id}: ${data.text}`;
  document.getElementById('messages').appendChild(li);
});
</script>

部屋（Room）機能

// 部屋への参加
socket.join('room-1');

// 部屋にいる全員に送信
io.to('room-1').emit('message', 'こんにちは');

まとめ

Socket.IOはWebSocketのフォールバック機能も備えており、古いブラウザでも動作します。 スケールアウトには Redis Adapter を使ってサーバー間でイベントを共有できます。