JavaScript/socket.io

Socket.IOは、リアルタイムの双方向通信を実現するためのJavaScriptライブラリです。主にNode.jsとブラウザで使用され、WebSocketを基盤としながら、フォールバックとして他の通信プロトコルもサポートしています。このハンドブックでは、Socket.IOの基本から応用までを解説します。

概要

Socket.IOは以下の特徴を持ちます：

双方向通信 - クライアントとサーバー間でリアルタイムにデータを送受信できます。
フォールバック機能 - WebSocketが利用できない環境では、HTTPロングポーリングなどの代替プロトコルを使用します。
イベント駆動モデル - カスタムイベントを定義して通信を制御できます。
拡張性 - 名前空間やルームの機能を用いて、複数のクライアントを効率的に管理できます。

インストール

Socket.IOを使用するためには、サーバーサイドとクライアントサイドの両方でライブラリをセットアップする必要があります。

サーバーサイド

以下のコマンドを使用してNode.jsのプロジェクトにSocket.IOをインストールします。

npm install socket.io

クライアントサイド

クライアント側のライブラリをCDN経由で読み込むか、npmを使用してインストールします。

CDN経由の場合：

<script src="https://cdn.socket.io/4.8.1/socket.io.min.js"></script>

npm経由の場合：

npm install socket.io-client

基本的な使い方

Socket.IOを用いた基本的なリアルタイム通信の例を以下に示します。

サーバーサイドのコード

// 必要なモジュールをインポート
const { Server } = require("socket.io");
const http = require("http");

// HTTPサーバーを作成
const server = http.createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/plain" });
    res.end("Socket.IOサーバー稼働中");
});

// Socket.IOサーバーを初期化
const io = new Server(server);

// クライアントとの接続を待機
io.on("connection", (socket) => {
    console.log("クライアントが接続しました");

    // メッセージ受信イベント
    socket.on("message", (msg) => {
        console.log("受信メッセージ:", msg);

        // クライアントにメッセージを返信
        socket.emit("reply", `受信: ${msg}`);
    });

    // 切断イベント
    socket.on("disconnect", _ => console.log("クライアントが切断しました"));
});

// サーバーを起動
server.listen(3000, _ => console.log("サーバーがポート3000で起動しました"));

クライアントサイドのコード

<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO クライアント</title>
    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
    <h1>Socket.IO クライアント</h1>
    <script>
        // サーバーに接続
        const socket = io("http://localhost:3000");

        // メッセージ送信
        socket.emit("message", "こんにちは、サーバー！");

        // サーバーからの返信を受信
        socket.on("reply", msg => console.log("サーバーからの返信:", msg));
    </script>
</body>
</html>

名前空間とルーム

Socket.IOには、通信を効率的に管理するための名前空間とルームの機能があります。

名前空間

名前空間を使用することで、1つのSocket.IOサーバー内で複数のロジックを分離できます。

const chat = io.of("/chat");
chat.on("connection", socket => console.log("Chat名前空間に接続"));

ルーム

ルームは、同じルームに属するクライアント間でのみメッセージを送受信する仕組みです。

io.on("connection", socket => {
    socket.join("room1");
    io.to("room1").emit("message", "ルーム1にメッセージを送信");
});

応用例

以下はSocket.IOを活用した応用例です。

チャットアプリ

リアルタイムのチャットアプリを作成できます。

リアルタイム通知

サーバー側で発生したイベントに基づいて、クライアントに通知を送信できます。

コラボレーションツール

複数のユーザーが同時に操作するホワイトボードやドキュメントエディタを実現できます。

エラー処理

Socket.IOでは、接続エラーやタイムアウトを適切に処理することが重要です。

socket.on("connect_error", err => console.error("接続エラー:", err.message));

まとめ

Socket.IOはリアルタイム通信を簡単に実現できる強力なライブラリです。このハンドブックを活用して、効率的なリアルタイムアプリケーションを構築してください。