Node.js と Socket.IO

Node.js と Socket.IO とは

  • Node.js : サーバーサイドをJavaScriptで書けるやつ
  • Socket.IO : Node.jsでWebSocketができるやつ

今回やること

  • WindowsのPCにNode.jsをインストールし、ローカルで実験。
  • Socket.IOを用いて、Node.jsとブラウザ間でWebSocket通信。

Node.jsのインストール

>node --version
v10.13.0
>npm --version
6.4.1

【注意】
うっかりBoxstarterのインストールを許可すると面倒なことになる。めっちゃ時間かかるし、確認もなしにかってにPCを再起動するし、再起動後もかってにバッチを走らせるし、かってにWindows Update自動起動を無効にするし、かってにPythonとかインストールしたりする。これを止めるには、バッチのウィンドウを閉じて、タスクマネージャの「スタートアップ」から boxstarter-post-restart.bat を「無効」にする。また、Windows Update自動起動の設定は、タスクマネージャの「サービス」の「サービス管理ツール」で Windows Update を「自動」にする。この面倒を避けるには、インストール途中の「Tools for Native Modules」の画面で、「Automatically install うんぬん」にチェックしないこと。

プロジェクトフォルダの作成とSocket.IOのインストール

てきとうなフォルダを作ってそこにSocket.IOをインストールする。DOS窓での作業となる。

cd てきとうなフォルダ
npm init -y
npm install socket.io

サーバのコード

app.jsという名前で同フォルダに作成する。
自分の環境ではポート80だとなんかエラーが出たので、替えてポート8080を使用した。

// HTTPサーバ
var app = require('http').createServer(handler)
// Socket.IO
var io = require('socket.io')(app);
// ファイルシステム
var fs = require('fs');

// HTTPサーバをポート8080で待ち受けさせる
app.listen(8080);

// HTTPリクエストのハンドラ
function handler (req, res) {
  // index.html を読み込む
  fs.readFile(__dirname + '/index.html',
  function (err, data) {
    // 読み込めなかったらエラー応答する (エラー500)
    if (err) {
      res.writeHead(500);
      return res.end('Error loading index.html');
    }
    // 読み込めたら 正常応答(index.htmlを送信)する
    res.writeHead(200);
    res.end(data);
  });
}

// Socket.IOの接続時のハンドラ
io.on('connection', function (socket) {
  // クライアントへ fugaイベントとデータ "FUGA" を送信
  socket.emit('fuga', 'FUGA');

  // hogeイベント時のハンドラ
  socket.on('hoge', function (data) {
    // クライアントから受け取ったデータをコンソールに出力する
    console.log(data);
    // クライアントへ piyoイベントとデータ "PIYO" を送信
    socket.emit('piyo', 'PIYO');
  });
})

クライアントのコード

index.htmlという名前で同フォルダに作成する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Client</title>
  <script src="/socket.io/socket.io.js"></script>
</head>
<body>
  <input type="button" id="hoge button" value="HOGE">
  <script>
    // 通信先のサーバを指定する
    var socket = io('http://localhost:8080'); // ポート指定注意

    // fugaイベントのハンドラ
    socket.on('fuga', function (data) {
      // サーバから受け取ったデータをコンソールに出力する
      console.log(data);
    });
    // piyoイベントのハンドラ
    socket.on('piyo', function (data) {
      // サーバから受け取ったデータをコンソールに出力する
      console.log(data);
    });
    // HOGEボタンのハンドラ
    window.addEventListener('DOMContentLoaded',function(e){
      // サーバーにhogeイベントとデータ "HOGE" を送信
      document.getElementById('hoge button').addEventListener('click',function(e){
        socket.emit('hoge', 'HOGE');
      });
    });
  </script>
</body>
</html>

動作確認

  • サーバを起動する。
node app.js
  • ブラウザで http://localhost:8080 を開くと、HOGEボタンが表示される。
  • このとき、ブラウザ側のコンソールに"FUGA"が出力される。
  • HOGEボタンを押すとサーバ側のコンソールに "HOGE"が出力される。
  • 応答としてブラウザ側のコンソールに"PIYO"が出力される。

ブラウザのコンソールは、Chromeならメニュー > [その他のツール] > [デベロッパーツール] で表示されるツールの [Console]タブ。Firefoxならメニュー [ツール] > [ウェブ開発] > [ウェブコンソール]で表示される。

f:id:licheng:20181122202804p:plain

参考ページ

webcake.stars.ne.jp