簡単にオンライン通信を実装できるライブラリ「Socket.io」について調べてみた|Node.js

公開日: 2023/6/23

リアルタイムWebアプリケーションにおいて、双方向通信は必須です。

そのためには、WebSocketというプロトコルが使われますが、Socket.IOというライブラリを使うことで、より簡単にWebSocketを使った双方向通信を実現することができます。

この記事では、Socket.IOについて分かりやすく説明していきます。

1. Socket.IOとは?

Socket.IOは、Node.jsをベースにしたJavaScriptライブラリで、リアルタイムWebアプリケーションのためのものです。

WebSocketを使った双方向通信を簡単に実現できます。また、WebSocketが使えない環境でも、ポーリングなどの方法で通信を行うことができます。

2. Socket.IOの特徴

2-1. イベント駆動型のプログラミングモデル

Socket.IOは、イベント駆動型のプログラミングモデルを採用しています。

クライアント側でイベントをトリガーし、サーバー側でこれらのイベントに応答することで、双方向通信が実現されます。

例えば、チャットアプリケーションでは、クライアントがメッセージを送信するというイベントをトリガーし、サーバーはそのメッセージを受信して、他のクライアントに送信するという処理を行います。

2-2. WebSocket以外のトランスポートプロトコルのサポート

WebSocketが使えない環境でも、Socket.IOはポーリングやXHRなどのトランスポートプロトコルをサポートしています。

これにより、古いブラウザでもSocket.IOを使うことができます。

2-3. クライアント側のJavaScriptライブラリ

Socket.IOは、クライアント側のJavaScriptライブラリとして提供されており、サーバー側はNode.js上で実行されます。

Socket.IOは、npmパッケージとして提供されており、簡単にインストールすることができます。

Socket.IOを使用するには、サーバー側とクライアント側の両方にライブラリを読み込む必要があります。

3. Socket.IOの使い方


Socket.IOを使用するためには、以下の手順が必要です。

3-1. サーバー側

まずは、サーバー側でSocket.IOをインストールします。

npm install socket.io

npm install socSocket.IOを使うためには、以下のように記述します。

const server = require('http').create

Socket.IOサーバーを作成します。

const server = require('http').createServer();
const io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('connected');
  socket.on('message', (data) => {
    console.log(`message received: ${data}`);
    socket.broadcast.emit('message', data);
  });
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

このコードでは、socket.io モジュールをインポートし、サーバーオブジェクトを作成しています。

そして、io.on メソッドを使って connection イベントを監視し、クライアントが接続したときに実行する処理を記述しています。

socket オブジェクトを通じてクライアントとの通信が行われます。

このコードでは、 message イベントを監視し、受け取ったデータをブロードキャストしています。

3-2. クライアント側

次に、クライアント側でSocket.IOを読み込みます。

以下のように、HTMLファイルにスクリプトタグを追加します。

<script src="/socket.io/socket.io.js"></script>
<script>
  const socket = io();
  socket.on('connect', () => {
    console.log('connected to server');
  });

  socket.on('message', (data) => {
    console.log(`message received: ${data}`);
  });
</script>

このコードでは、 socket.io.js ファイルを読み込み、 io() メソッドでSocket.IOサーバーに接続します。

connect イベントを監視し、接続成功時にログを出力します。

また、 message イベントを監視し、受け取ったデータをログに出力します。

4. まとめ

Socket.IOを使うことで、チャットアプリケーションやリアルタイムゲームなどのリアルタイムWebアプリケーションの実装が大幅に簡素化されます。

WebSocketだけでなく、XHR Long PollingやJSONP Pollingなどの代替手段もサポートしているため、クライアントとサーバーの間で通信ができる環境があれば、Socket.IOを使ってリアルタイムWebアプリケーションを実現することができます。


ただし、Socket.IOを使った開発では、いくつかの注意点があります。

例えば、Socket.IOを使った通信は、HTTPとは別のポートで行われるため、クロスオリジン制約に違反する場合があります。

また、Socket.IOのAPIはWebSocketのAPIとは異なるため、WebSocketを使った開発に慣れている場合は、独自の学習コストがかかる場合があります。


また、Socket.IOはWebSocket以外の代替手段を提供しているため、パフォーマンスの観点からはWebSocketを使うことが推奨されます。

WebSocketをサポートしていない環境では、XHR Long PollingやJSONP Pollingなどの代替手段を使用することになりますが、これらの手段は通信の遅延が生じるため、Socket.IOを使った開発においてはWebSocketの使用が推奨されます。


最近では、WebSocketが広くサポートされていることから、Socket.IOよりもWebSocketのみを使った実装が主流になっています。

しかし、Socket.IOは代替手段を提供しているため、WebSocketが使えない環境でもリアルタイムWebアプリケーションを実現することができます。

また、Socket.IOのAPIはWebSocketのAPIよりも高レベルで、実装が簡単であるため、WebSocketを使った開発に慣れていない場合にも使いやすいライブラリと言えます。


以上が、Socket.IOの概要と基本的な使い方についての説明でした。

WebSocketを使った双方向通信を簡単に実現できるSocket.IOは、リアルタイムWebアプリケーションの実装に非常に有用なライブラリです。

WebSocketがサポートされている環境では、WebSocketを使った実装が推奨されますが、Socket.IOの代替手段を提供しているため、WebSocketが使えない環境でもリアルタイムWebアプリケーションを実現することができます。