メインコンテンツにスキップ
バージョン: 4.x

Socket.IOの統合

Socket.IOは2つの部分で構成されています

  • Node.JS HTTPサーバーと統合（またはマウント）するサーバー（socket.io パッケージ）
  • ブラウザ側でロードされるクライアントライブラリ（socket.io-client パッケージ）

開発中は、後述するように、socket.ioがクライアントを自動的に提供してくれるため、今のところは1つのモジュールをインストールするだけで済みます

npm install socket.io

これはモジュールをインストールし、依存関係をpackage.jsonに追加します。それでは、index.jsを編集して追加しましょう

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

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

app.get('/', (req, res) => {
  res.sendFile(join(__dirname, 'index.html'));
});

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

server.listen(3000, () => {
  console.log('server running at http://localhost:3000');
});

server（HTTPサーバー）オブジェクトを渡すことで、socket.ioの新しいインスタンスを初期化していることに注目してください。次に、受信ソケットのconnectionイベントをリッスンし、コンソールにログ出力します。

それでは、index.htmlの</body>（ボディタグの終了）の前に、次のスニペットを追加します

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

socket.io-clientを読み込むにはこれだけで十分です。これは、グローバルなio（およびエンドポイントGET /socket.io/socket.io.js）を公開し、接続します。

クライアント側JSファイルのローカルバージョンを使用したい場合は、node_modules/socket.io/client-dist/socket.io.jsにあります。

{/* SVGアイコンは翻訳不要 */}ヒント

ローカルファイルの代わりにCDNを使用することもできます（例：<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>）。

ページを提供するホストへの接続を試みるのがデフォルトであるため、io()を呼び出すときにURLを指定していないことに注意してください。

{/* SVGアイコンは翻訳不要 */}注記

Apacheやnginxなどのリバースプロキシの背後にある場合は、こちらのドキュメントをご覧ください。

Webサイトのルートではないフォルダ（例：https://example.com/chatapp）でアプリをホストしている場合は、サーバーとクライアントの両方でパスを指定する必要もあります。

プロセスを再起動し（Control + Cを押してnode index.jsを再度実行する）、Webページを更新すると、コンソールに「ユーザーが接続しました」と表示されます。

複数のタブを開いてみてください。複数のメッセージが表示されます。

A console displaying several messages, indicating that some users have connected

各ソケットは、特別なdisconnectイベントも発生させます

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
});

タブを数回更新すると、動作を確認できます。

A console displaying several messages, indicating that some users have connected and disconnected
{/* SVGアイコンは翻訳不要 */}情報

この例は、ブラウザで直接実行できます。