Socket.io ESM: ブラウザとサーバー間のリアルタイム通信のためのモジュール化されたJavaScriptライブラリ

まず、Socket.io ESMの基本的な使い方を紹介します。Socket.io ESMを使用するには、まず必要なパッケージをインストールする必要があります。以下のコマンドを使用して、Node.jsプロジェクトにSocket.io ESMを追加します。

npm install [email protected] esm

インストールが完了したら、以下のようにSocket.ioを初期化します。

import { Server } from 'socket.io';
const io = new Server();

上記のコードでは、Socket.ioのServerクラスをインポートし、new Server()を使用してSocket.ioのインスタンスを作成しています。

次に、Socket.ioを使用してクライアントとサーバー間の通信を確立します。以下のコードは、クライアント側のコード例です。

import { io } from 'socket.io-client';
const socket = io('http://localhost:3000');
socket.on('connect', () => {
  console.log('接続が確立されました');
});
socket.on('message', (data) => {
  console.log('新しいメッセージ:', data);
});
socket.emit('message', 'こんにちは、サーバー！');

上記のコードでは、socket.io-clientパッケージからioをインポートし、io('http://localhost:3000')を使用してサーバーに接続しています。接続が確立された後、connectイベントが発火し、コンソールにメッセージが表示されます。また、messageイベントを受信した時には、受信したデータをコンソールに表示します。emitメソッドを使用して、サーバーにメッセージを送信することもできます。

サーバーサイドの処理は以下のようになります。

import { Server } from 'socket.io';
const io = new Server();

io.on('connection', (socket) => {
  console.log('新しいクライアントが接続しました');

  socket.on('message', (data) => {
    console.log('新しいメッセージ:', data);
    io.emit('message', data);
  });

  socket.on('disconnect', () => {
    console.log('クライアントが切断されました');
  });
});

io.listen(3000);

上記のコードでは、io.on('connection', ...)を使用して、新しいクライアントが接続した時の処理を定義しています。また、messageイベントを受信した場合には、受信したデータをコンソールに表示し、全てのクライアントに対してio.emit('message', data)を使用してメッセージを送信します。

これらのコード例を参考にしながら、Socket.io ESMを使用してブラウザとサーバー間のリアルタイム通信を実現する方法を学んでください。