【Node.js】Socket.IO サンプルコード(1)～簡易チャットアプリ～

Socket.IO サンプルコード(1)～簡易チャットアプリ～
Socket.IOを使用する場合には、HTTPサーバーを立ててSocket.IOを統合する必要がある。
このときhttpでもhttpsのどっちでも動く。httpとhttpsの2種類のコードを次に示す。
(1)サーバー側で、httpサーバーとSocket.IOの初期化を行うコード
(2)サーバー側で、httpsサーバーとSocket.IOの初期化を行うコード

(1)サーバー側で、httpサーバーとSocket.IOの初期化を行うコード
client.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Socket.IO サンプルコード(1)～簡易チャットアプリ～</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO サンプルコード(1)～簡易チャットアプリ～</h1>

  <input type="text" id="messageInput">
  <button onclick="sendMessage()">送信</button>

  <ul id="messageList"></ul>

  <script>
    //この処理でサーバーと通信をしているな。
    const socket = io('http://192.168.2.100:3000');
    
    // サーバーからのメッセージを受信
    socket.on('message', (data) => {
      // HTML内のID=messageList」を持つ要素を取得する。
      const messageList = document.getElementById('messageList');
      // 新しいli要素を作成する。li要素はメッセージをリストアイテムとして表示するために使用される。
      const li = document.createElement('li');
      // li要素のテキストコンテンツを受信したメッセージ(data)に設定する。
      li.textContent = data;
      // li要素をmessageList要素に追加する。これにより、受信したメッセージがリスト内に表示される。
      messageList.appendChild(li);
    });

    // メッセージを送信
    function sendMessage() {
      // HTML内のID=messageInput」を持つ要素を取得する。
      const messageInput = document.getElementById('messageInput');
      // テキスト入力欄の値を変数messageに代入する。
      const message = messageInput.value;
      // テキスト入力欄の値を空文字にする。
      messageInput.value = '';

      // サーバーに対して message という名前のイベントを送信する。
      // ここで message は任意の名前で、サーバー側で受け取る際にイベント名として使用される。
      socket.emit('message', message);
    }

  </script>
</body>
</html>

server_http.js



const hostname = '192.168.2.100';
const port = 3000;

// httpモジュールをrequireを使ってインポートして変数httpに格納する。
const http = require('http');

// httpオブジェクトからcreateServerメソッドを実行する。
// http.createServer()の戻り値は、http.Serverのインスタンスである。
// つまり変数serverには、http.Serverのインスタンスが格納される。
const server = http.createServer();

// Socket.IOの初期化
// http://192.168.2.100:3000/socket.io/socket.io.jsにアクセス可能になる。
const io = require('socket.io')(server,{
  // CORS(Cross-Origin Resouce Sharing)の設定
  cors: {
    // コメントアウトしても正常に動く。
    // コメントアウトしたら、origin: '*'と同じ設定になる。
    origin: ['http://localhost', 'http://127.0.0.1','https://localhost', 'https://127.0.0.1','http://192.168.2.100','https://192.168.2.100'],
    //全てのURLを指定するときは*を使う。
    //origin: '*',
  },
});

// サーバーは指定したポートとホストで接続を待ち受け、クライアントからのリクエストを聞いて受け付ける状態になる。
// ここでの「listen」は文字通り「接続の待ち受け」や「受信を聴く」という意味で使われている。
server.listen(port, hostname,() => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

// クライアント側で socket.emit('message', message); 
// を実行すると、サーバーの io.on('message', ...) で定義された
// コールバック関数が呼び出され、クライアントからのメッセージが受信される。
io.on('connection', (socket) => {
  console.log('クライアントが接続しました');

  // クライアントからのメッセージを受信
  // クライアント側で socket.emit('message', message); を実行すると、
  // サーバー側で定義された socket.on('message', ...) のコールバック関数
  // が実行されるという流れになります。
  socket.on('message', (data) => {
    console.log('クライアントからのメッセージ:', data);
    // 受信したメッセージを全クライアントに送信
    // クライアント側でsocket.emit('message', message);を実行した人も含めて送る。
    io.emit('message', data);
  });

  // クライアントとの接続が切断されたときの処理
  socket.on('disconnect', () => {
    console.log('クライアントが切断しました');
  });
});

(2)サーバー側で、httpsサーバーとSocket.IOの初期化を行うコード
client.html


<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Socket.IO サンプルコード(1)～簡易チャットアプリ～</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.1/socket.io.js"></script>
</head>
<body>
  <h1>Socket.IO サンプルコード(1)～簡易チャットアプリ～</h1>

  <input type="text" id="messageInput">
  <button onclick="sendMessage()">送信</button>

  <ul id="messageList"></ul>

  <script>
    //この処理でサーバーと通信をしているな。
    const socket = io('https://192.168.2.100:3000');
    
    // サーバーからのメッセージを受信
    socket.on('message', (data) => {
      // HTML内のID=messageList」を持つ要素を取得する。
      const messageList = document.getElementById('messageList');
      // 新しいli要素を作成する。li要素はメッセージをリストアイテムとして表示するために使用される。
      const li = document.createElement('li');
      // li要素のテキストコンテンツを受信したメッセージ(data)に設定する。
      li.textContent = data;
      // li要素をmessageList要素に追加する。これにより、受信したメッセージがリスト内に表示される。
      messageList.appendChild(li);
    });

    // メッセージを送信
    function sendMessage() {
      // HTML内のID=messageInput」を持つ要素を取得する。
      const messageInput = document.getElementById('messageInput');
      // テキスト入力欄の値を変数messageに代入する。
      const message = messageInput.value;
      // テキスト入力欄の値を空文字にする。
      messageInput.value = '';

      // サーバーに対して message という名前のイベントを送信する。
      // ここで message は任意の名前で、サーバー側で受け取る際にイベント名として使用される。
      socket.emit('message', message);
    }

  </script>
</body>
</html>

server_https.js
秘密鍵と自己署名証明書(オレオレ証明書)の説明は省略する。


const hostname = '192.168.2.100';
const port = 3000;

// 秘密鍵を指定する。
const sslServerKey = '0322/server-key.pem';
// 自己署名証明書(オレオレ証明書)を指定する。
const sslServerCrt = '0322/server-crt.pem';

// fsモジュールをrequireを使ってインポートして変数fsに格納する。
const fs = require('fs');

// 変数optionsにオブジェクトを格納する。
const options = {
  // 指定されたファイルパスからファイル(秘密鍵)を同期的に読み込む。
  key: fs.readFileSync(sslServerKey),
  // 指定されたファイルパスからファイル(自己署名証明書(オレオレ証明書))を同期的に読み込む。
  cert: fs.readFileSync(sslServerCrt)
};

// httpsモジュールをrequireを使ってインポートして、変数httpに格納する。
const https = require('https');

// httpsオブジェクトからcreateServerメソッドを実行する。
// https.createServer()の戻り値は、https.Serverのインスタンスである。
// つまり変数serverには、https.Serverのインスタンスが格納される。
const server = https.createServer(options);

// Socket.IOの初期化
// http://192.168.2.100:3000/socket.io/socket.io.jsにアクセス可能になる。
const io = require('socket.io')(server,{
  // CORS(Cross-Origin Resouce Sharing)の設定
  cors: {
    // コメントアウトしても正常に動く。
    // コメントアウトしたら、origin: '*'と同じ設定になる。
    origin: ['http://localhost', 'http://127.0.0.1','https://localhost', 'https://127.0.0.1','http://192.168.2.100','https://192.168.2.100'],
    //全てのURLを指定するときは*を使う。
    //origin: '*',
  },
});

// サーバーは指定したポートとホストで接続を待ち受け、クライアントからのリクエストを聞いて受け付ける状態になる。
// ここでの「listen」は文字通り「接続の待ち受け」や「受信を聴く」という意味で使われている。
server.listen(port, hostname,() => {
  console.log(`Server running at https://${hostname}:${port}/`);
});

// クライアント側で socket.emit('message', message); 
// を実行すると、サーバーの io.on('message', ...) で定義された
// コールバック関数が呼び出され、クライアントからのメッセージが受信される。
io.on('connection', (socket) => {
  console.log('クライアントが接続しました');

  // クライアントからのメッセージを受信
  // クライアント側で socket.emit('message', message); を実行すると、
  // サーバー側で定義された socket.on('message', ...) のコールバック関数
  // が実行されるという流れになります。
  socket.on('message', (data) => {
    console.log('クライアントからのメッセージ:', data);
    // 受信したメッセージを全クライアントに送信
    // クライアント側でsocket.emit('message', message);を実行した人も含めて送る。
    io.emit('message', data);
  });

  // クライアントとの接続が切断されたときの処理
  socket.on('disconnect', () => {
    console.log('クライアントが切断しました');
  });
});

【Node.js】Socket.IO サンプルコード(1)～簡易チャットアプリ～

関連

コメントを残すコメントをキャンセル

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報