Node.jsでSocket.IO入門
2024-10-15
サーバー側 (Node.js)
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = process.env.PORT || 3000;
server.listen(port, () => {
con sole.log(`サーバーが起動しました ポート: ${port}`);
});
io.on('connection', (socket) => {
console.log('クライアントが接続しました');
// クライアントから 'message' イベントを受信したら、
// そのメッセージをすべての接続しているクライアントにブロードキャスト
socket.on('message', (data) => {
console.log(`受信メッセージ: ${data}`);
io.emit('message', data); // 全クライアントにブロードキャスト
});
// クライアントが切断したらログ出力
socket.on('disconnect', () => {
console.log('クライアントが切断しました');
});
});
説明
- 最初に必要なライブラリを読み込みます。
express: ウェブフレームワークhttp: HTTP サーバー作成socket.io: Socket.IO ライブラリ
- ポート番号を取得します (環境変数
PORTがあればそちらを使用) - サーバーを起動し、ポート番号をログ出力
io.on('connection', (socket) => { ... })で、クライアントが接続してきたときに実行される関数を定義します。socket.on('message', (data) => { ... })で、クライアントからmessageイベントを受信したときの処理を定義します。- 受信したメッセージをログ出力
io.emit('message', data)で、受信したメッセージをすべての接続しているクライアントにブロードキャストします。
socket.on('disconnect', () => { ... })で、クライアントが切断したときの処理を定義します。- 切断したことをログ出力
クライアント側 (HTML)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Socket.IO Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
</head>
<body>
<h1>チャット</h1>
<input type="text" id="message">
<button id="send-btn">送信</button>
<script>
const socket = io();
const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send- btn');
sendButton.addEventListener('click', () => {
const message = messageInput.v alue;
socket.emit('message', message); // サーバーに message イベントを送信
messageInput.value = '';
});
// サーバーから message イベントを受信したら、メッセージを表示
socket.on('message', (data) => {
console.log(`受信メッセージ: ${data}`);
// (※ この例では表示機能は実装していません)
});
</script>
</body>
</html>
- HTML ファイルで、Socket.IO クライアント ライブラリを読み込みます。
- メッセージを入力するテキストボックス (
message) と送信ボタン (send-btn) を用意します。 - JavaScript で、
socket.ioを使ってサーバーに接続します。 - 送信ボタンがクリックされたら、テキストボックスに入力されたメッセージを
socket.emit('message', message)でサーバーに送信します。 - サーバーから
messageイベントを受信したら、メッセージをログ出力します (※ この例では表示機能は実装していません)。
この例では、クライアントがメッセージを送信すると、サーバーがそれを受け取ってすべての接続しているクライアントにブロードキャストします。
- セキュリティ対策なども実装が必要です。
- この例は非常に基本的なものであり、実用的なアプリケーションを作るためにはさらに機能を追加する必要があります。
Node.js で Socket.IO の超入門: コード解説
const app = require('express')();
const server = require('http').Server(app);
const io = require('socket.io')(server);
const port = process.env.PORT || 3000;
server.listen(port, () => {
con sole.log(`サーバーが起動しました ポート: ${port}`);
});
io.on('connection', (socket) => {
console.log('クライアントが接続しました');
// クライアントから 'message' イベントを受信したら、
// そのメッセージをすべての接続しているクライアントにブロードキャスト
socket.on('message', (data) => {
console.log(`受信メッセージ: ${data}`);
io.emit('message', data); // 全クライアントにブロードキャスト
});
// クライアントが切断したらログ出力
socket.on('disconnect', () => {
console.log('クライアントが切断しました');
});
});
- サーバーの起動: サーバーを起動し、ポート番号をログ出力
- クライアント接続時の処理 (
io.on('connection', ... )): クライアントが接続してきたときに実行される関数を定義します。socketオブジェクトは、接続してきた個別のクライアントを表します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Socket.IO Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script>
</head>
<body>
<h1>チャット</h1>
<input type="text" id="message">
<button id="send-btn">送信</button>
<script>
const socket = io();
const messageInput = document.getElementById('message');
const sendButton = document.getElementById('send- btn');
sendButton.addEventListener('click', () => {
const message = messageInput.v alue;
socket.emit('message', message); // サーバーに message イベントを送信
messageInput.value = '';
});
// サーバーから message イベントを受信したら、メッセージを表示
socket.on('message', (data) => {
console.log(`受信メッセージ: ${data}`);
// (※ この例では表示機能は実装していません)
});
</script>
</body>
</html>
- クライアント ライブラリの読み込み: HTML ファイルで、Socket.IO クライアント ライブラリを読み込みます。
- JavaScript での接続 (
socket.io): JavaScript で、socket.ioを使ってサーバーに接続します。 - メッセージ受信処理 (
socket.on('message', ... )): サーバーからmessageイベントを受信したら、メッセージをログ出力します (※ この例では表示機能は実装していません)。
- セキュリティ
Node.js でのリアルタイム通信: Socket.IO 以外の選択肢
Node.js でリアルタイム通信を実現する方法は、Socket.IO だけではありません。いくつかの代替手段を紹介します。
WebSockets (ウェブソケット)
- ライブラリ:
ws,engine.ioなど - Socket.IO の基盤となる通信プロトコル。低レベルで柔軟ですが、開発工数がやや多いです。
推送サービス (Pusher, Ably など)
- セットアップが簡単でスケーラビリティにも優れますが、利用料がかかる場合もあります。
- サーバー間の通信やクライアントへのプッシュ通知を簡略化してくれるサービス。
フレームワーク固有のソリューション (Rails ActionCable など)
- フレームワークとの親和性が高く、学習コストが抑えられるメリットがありますが、使用できる言語やフレームワークに限定されます。
- Rails など特定のフレームワークでは、フレームワークに統合されたリアルタイム通信機能が用意されていることも。
Socket.IO との比較
| 機能 | Socket.IO | WebSockets | 推送サービス | Rails ActionCable |
|---|---|---|---|---|
| 難易度 | 中 | 高 | 低 | 低 |
| カスタマイズ性 | 高 | 高 | 低 | フレームワーク依存 |
| スケーラビリティ | サーバー負荷次第 | サーバー負荷次第 | 高 | フレームワークによる |
| コスト | 無料 (ライブラリ使用) | 無料 (ライブラリ使用) | サービス利用料あり (場合により) | フレームワークの一部 |
| 適合するケース | 柔軟な制御が必要な場合、既存の Socket.IO アプリケーションの拡張 | 低レベルな制御が必要な場合 | 高速・大規模なリアルタイム通信が必要な場合 | Rails アプリケーションでリアルタイム通信が必要な場合 |
上記のように、それぞれの選択肢には長所と短所があります。プロジェクトの要件や開発者のスキルセットに合わせて適切な方法を選ぶことが重要です。
- より具体的な検討のためには、各技術のドキュメントやチュートリアルを参照してください。
- この説明は、あくまで選択肢を紹介するものであり、それぞれの技術の詳細な解説は含まれません。
node.js socket.io
