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ならメニュー [ツール] > [ウェブ開発] > [ウェブコンソール]で表示される。