【保存版】Node.js、Socket.io、SSLでセキュリティ対策バッチリ！リアルタイムWebアプリケーションの作り方

2024-07-27

Node.js、Socket.io、およびSSLを使ったリアルタイムWebアプリケーションの構築

このチュートリアルでは、Node.js、Socket.io、およびSSLを使用して、安全なリアルタイムWebアプリケーションを構築する方法を説明します。

完成イメージ

このチュートリアルで作成するアプリケーションは、以下のような機能を備えています。

ユーザー同士がメッセージをやり取りできるチャット機能
ユーザーがリアルタイムでイベントに参加できる機能

動作原理

このアプリケーションは、クライアントとサーバー間のリアルタイム通信を可能にするSocket.ioライブラリを使用します。SSLは、通信を暗号化し、傍受や改ざんから保護するために使用されます。

必要なもの

Node.js
npm
テキストエディタ

手順

プロジェクトのセットアップ

npm init -y
npm install socket.io express https

サーバーの作成

const express = require('express');
const https = require('https');
const io = require('socket.io');

const app = express();
const server = https.createServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}, app);

io.listen(server);

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

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

クライアントの作成

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat</title>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.js"></script>
</head>
<body>
  <h1>Socket.io Chat</h1>
  <input type="text" id="message" placeholder="Enter message">
  <button id="send">Send</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('https://localhost:3000');

    socket.on('message', (message) => {
      const li = document.createElement('li');
      li.textContent = message;
      document.getElementById('messages').appendChild(li);
    });

    document.getElementById('send').addEventListener('click', () => {
      const message = document.getElementById('message').value;
      socket.emit('message', message);
      document.getElementById('message').value = '';
    });
  </script>
</body>
</html>

実行

node server.js

ブラウザで https://localhost:3000 にアクセス

これで、ユーザー同士がメッセージをやり取りできるチャットアプリケーションが完成しました。

この例では、自己署名証明書を使用しています。本番環境で使用するには、認証局から発行された証明書を使用する必要があります。

const express = require('express');
const https = require('https');
const io = require('socket.io');

const app = express();
const server = https.createServer({
  key: fs.readFileSync('server.key'),
  cert: fs.readFileSync('server.cert')
}, app);

io.listen(server);

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

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

クライアント側 (index.html)

<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat</title>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/socket.io-client/dist/socket.io.js"></script>
</head>
<body>
  <h1>Socket.io Chat</h1>
  <input type="text" id="message" placeholder="Enter message">
  <button id="send">Send</button>
  <ul id="messages"></ul>

  <script>
    const socket = io('https://localhost:3000');

    socket.on('message', (message) => {
      const li = document.createElement('li');
      li.textContent = message;
      document.getElementById('messages').appendChild(li);
    });

    document.getElementById('send').addEventListener('click', () => {
      const message = document.getElementById('message').value;
      socket.emit('message', message);
      document.getElementById('message').value = '';
    });
  </script>
</body>
</html>

説明

サーバー側

app は Express アプリケーションインスタンスです。
server は HTTPS サーバーインスタンスです。
io は Socket.io インスタンスです。
app.get('/', (req, res) => { ... }) は、/ ルートへの GET リクエストを処理するルートハンドラーです。このハンドラーは、index.html ファイルをクライアントに送信します。
server.listen(3000, () => { ... }) は、サーバーをポート 3000 で起動します。

クライアント側

const socket = io('https://localhost:3000'); は、Socket.io クライアントを作成し、サーバーに接続します。
socket.on('message', (message) => { ... }) は、message イベントをリスナーします。このイベントは、サーバーからメッセージを受信したときに発生します。
document.getElementById('send').addEventListener('click', () => { ... }) は、send ボタンをクリックしたときに発生するイベントリスナーを追加します。このリスナーは、メッセージをサーバーに送信します。

このコードを実行するには、次の手順を実行します。

サーバー側コードを server.js という名前のファイルに保存します。
クライアント側コードを index.html という名前のファイルに保存します。
以下のコマンドを実行して、サーバーを起動します。

node server.js

WebRTC を使用する: WebRTC は、ブラウザ間でピアツーピアのリアルタイム通信を可能にする Web API です。 Socket.io の代わりに、または Socket.io と組み合わせて WebRTC を使用して、より複雑なリアルタイムアプリケーションを構築できます。
クラウドサービスを使用する: Amazon Web Services (AWS) や Microsoft Azure などのクラウドプロバイダーは、リアルタイムWebアプリケーション開発を容易にするさまざまなサービスを提供しています。これらのサービスを使用すると、サーバーインフラストラクチャを管理する必要がなくなり、開発に集中できます。

最適な方法を選択

使用する方法は、アプリケーションの要件によって異なります。以下の要素を考慮する必要があります。

必要な機能: アプリケーションに必要な機能はどれですか？メッセージング、チャット、コラボレーションなど、さまざまな機能が用意されています。
スケーラビリティ: アプリケーションはどれほどスケーラブルである必要がありますか？将来的にユーザーが増えた場合、アプリケーションを簡単にスケーリングできる必要がありますか？
セキュリティ: アプリケーションのセキュリティ要件は何ですか？敏感なデータを処理する場合は、強力なセキュリティ機能を備えたソリューションが必要です。
コスト: アプリケーションの開発と運用にいくら費やせますか？無料のオープンソースライブラリや、サブスクリプションベースのクラウドサービスなど、さまざまな価格オプションが用意されています。

調査

決定を下す前に、利用可能なオプションを調査することが重要です。さまざまなライブラリやサービスを比較し、ニーズに合ったものを選択してください。

ssl node.js https