【保存版】Node.js + Socket.IOチュートリアル！クライアントからサーバーへ接続する基本と応用
Node.js + Socket.IO: クライアントからサーバーへ接続する
このチュートリアルでは、Node.jsとSocket.IOを使って、クライアント側からSocket.IOサーバーへ接続する方法を解説します。
Socket.IOは、リアルタイムな双方向通信を可能にするJavaScriptライブラリです。Webサーバーとクライアント間でシームレスなデータ転送を実現し、チャットアプリやゲームなど、様々なリアルタイムアプリケーション開発に活用されます。
今回行うこと
- Node.jsとSocket.IOサーバーをセットアップ
- クライアント側でSocket.IOクライアントライブラリをインストール
- クライアント側からサーバーへ接続
- イベントを使ってサーバーとやり取り
準備
以下のものが必要です。
- Node.jsインストール済み環境
- テキストエディタ（例：Visual Studio Code、Sublime Text）
手順
まず、Socket.IOサーバーを作成します。以下のコマンドを実行して、新しいプロジェクトディレクトリを作成し、必要なライブラリをインストールします。
mkdir socket-io-example
cd socket-io-example
npm init -y
npm install express socket.io
次に、以下のコードをserver.jsという名前のファイルに保存します。これは、シンプルなチャットアプリケーションのサーバー側コードです。
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);
let connectedClients = 0;
io.on('connection', (socket) => {
connectedClients++;
console.log(`Client ${socket.id} connected.`);
socket.on('message', (message) => {
console.log(`Message from ${socket.id}: ${message}`);
io.emit('message', message);
});
socket.on('disconnect', () => {
connectedClients--;
console.log(`Client ${socket.id} disconnected.`);
});
});
server.listen(3000, () => {
console.log('Server listening on port 3000.');
});
上記のコードを実行するには、以下のコマンドを実行します。
node server.js
これで、Socket.IOサーバーが起動します。
mkdir client-app
cd client-app
npm init -y
npm install socket.io-client
次に、以下のコードをclient.jsという名前のファイルに保存します。これは、先ほど作成したサーバーへ接続し、メッセージを送受信するクライアント側コードです。
const io = require('socket.io-client');
const socket = io.connect('http://localhost:3000');
socket.on('connect', () => {
console.log('Connected to server.');
socket.on('message', (message) => {
console.log(`Message from server: ${message}`);
});
const sendMessage = (message) => {
socket.emit('message', message);
};
const form = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
sendMessage(message);
messageInput.value = '';
});
});
node client.js
これで、クライアント側アプリケーションが起動します。ブラウザでhttp://localhost:3000を開くと、メッセージ入力欄とメッセージが表示されます。メッセージを入力して送信すると、サーバーに送信され、他の接続しているクライアント全員にブロードキャストされます。
このチュートリアルでは、Node.jsとSocket.IOを使って、クライアント側からサーバーへ接続し、リアルタイムでデータを送受信する方法を説明しました。これは、チャットアプリやゲームなど、様々なリアルタイムアプリケーション開発の基礎となります。
**その他
const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require('socket.io')(server);
let connectedClients = 0;
io.on('connection', (socket) => {
connectedClients++;
console.log(`Client ${socket.id} connected.`);
socket.on('message', (message) => {
console.log(`Message from ${socket.id}: ${message}`);
io.emit('message', message);
});
socket.on('disconnect', () => {
connectedClients--;
console.log(`Client ${socket.id} disconnected.`);
});
});
server.listen(3000, () => {
console.log('Server listening on port 3000.');
});
クライアント側コード (client.js):
const io = require('socket.io-client');
const socket = io.connect('http://localhost:3000');
socket.on('connect', () => {
console.log('Connected to server.');
socket.on('message', (message) => {
console.log(`Message from server: ${message}`);
});
const sendMessage = (message) => {
socket.emit('message', message);
};
const form = document.getElementById('message-form');
const messageInput = document.getElementById('message-input');
form.addEventListener('submit', (event) => {
event.preventDefault();
const message = messageInput.value;
sendMessage(message);
messageInput.value = '';
});
});
このサンプルコードの説明:
サーバー側:
expressとsocket.ioライブラリをインポートします。- HTTPサーバーとSocket.IOインスタンスを作成します。
connectionイベントリスナーで、新しいクライアントが接続したときに呼び出される関数を定義します。- この関数は、接続されたクライアント数を増やし、コンソールにログを出力します。
messageイベントリスナーで、クライアントからメッセージを受信したときに呼び出される関数を定義します。- この関数は、メッセージをコンソールに記録し、すべての接続されたクライアントにブロードキャストします。
- サーバーをポート3000で起動します。
クライアント側:
socket.io-clientライブラリをインポートします。http://localhost:3000への接続を確立します。- この関数は、コンソールにログを出力します。
- この関数は、メッセージをコンソールに記録します。
sendMessage関数は、サーバーにメッセージを送信します。- この関数は、
sendMessage関数を使用してメッセージをサーバーに送信し、入力フィールドをクリアします。
このサンプルコードをどのように拡張できますか？
- 以下のように、ユーザー名やその他のデータをクライアントからサーバーに送信できるようにすることができます。
socket.emit('user joined', { username: 'myusername' });
- サーバー側で、接続されたすべてのクライアントのリストを保持し、それをクライアントに送信できるようにすることができます。
- クライアントが個別にメッセージを送信できるように、プライベートメッセージ機能を追加することができます。
これは、Node.jsとSocket.IOを使ってリアルタイムアプリケーションを構築するための基本的な例です。詳細については、Socket.IO公式ドキュメントを参照してください。
Node.js + Socket.IO: クライアントからサーバーへ接続するその他の方法
このチュートリアルでは、Node.jsとSocket.IOを使って、クライアント側からサーバーへ接続する方法について説明しました。基本的な方法は前述の通りですが、他にもいくつかの方法があります。
ネームスペースの使用
Socket.IOでは、ネームスペースを使用して、異なる種類の通信を整理することができます。これは、複数のチャットルームを持つチャットアプリケーションなど、複数のトピックにわたるリアルタイム通信を処理する場合に役立ちます。
ネームスペースを使用するには、以下のコードのようにio.ofを使用します。
const io = require('socket.io')(server);
const chatNamespace = io.of('/chat');
chatNamespace.on('connection', (socket) => {
// ... chat-related event listeners ...
});
クライアント側では、以下のコードのようにconnectメソッドにネームスペースを渡します。
const socket = io.connect('http://localhost:3000/chat');
// ... chat-related event listeners ...
カスタムイベントの使用
Socket.IOでは、デフォルトのイベント以外にもカスタムイベントを定義することができます。これは、アプリケーション固有の通信ニーズに対応する場合に役立ちます。
カスタムイベントを定義するには、以下のコードのようにemitとonメソッドを使用します。
// サーバー側
socket.emit('myCustomEvent', { data: 'This is my custom data.' });
// クライアント側
socket.on('myCustomEvent', (data) => {
console.log('Received custom event data:', data);
});
部屋の使用
Socket.IOでは、部屋を使用して、接続されたクライアントをグループ化することができます。これは、特定のグループのクライアントにのみメッセージを送信したい場合などに役立ちます。
socket.join('myRoom');
socket.leave('myRoom');
特定の部屋にいるクライアントにのみメッセージを送信するには、以下のコードのようにtoメソッドを使用します。
socket.to('myRoom').emit('message', 'This message is only for clients in myRoom.');
クライアント認証の使用
Socket.IOでは、クライアント認証を使用して、接続されたクライアントを認証することができます。これは、セキュリティを強化し、不正なアクセスを防止する場合に役立ちます。
クライアント認証を実装するには、以下のコードのようにhandshakeイベントリスナーを使用します。
io.on('connection', (socket) => {
socket.on('authentication', (data) => {
// ... authenticate the client using the provided data ...
if (isAuthenticated) {
socket.emit('authenticated');
} else {
socket.disconnect();
}
});
});
socket.emit('authentication', { username: 'myusername', password: 'mypassword' });
このチュートリアルでは、Node.jsとSocket.IOを使ってクライアント側からサーバーへ接続する際の基本的な方法に加え、いくつかの拡張方法を紹介しました。これらの方法は、より複雑なリアルタイムアプリケーションを構築する際に役立ちます。
node.js socket.io
