Node.jsでSocket.IOを利用してみます。
本記事では下記公式ページを参照し、ExpressフレームワークとSocket.IOを利用した簡単なチャットアプリを作成してみます。
公式ページ
まずはプロジェクト（ファイル）を作成します。
|
1 2 |
mkdir socket-project cd socket-project |
npmによる初期化をおこないます。
|
1 |
npm init |
上記コマンドを実行すると、descriptionやkeywordsなどのいくつかの項目が聞かれますが適当に入力していきます。
次にexpressとSocket.ioモジュールをインストールします。
|
1 |
npm install --save express socket.io |
package.jsonのdependencies項目では下記のように確認できます。
|
1 2 3 4 |
"dependencies": { "express": "^4.16.4", "socket.io": "^2.2.0" } |
index.jsとindex.htmlを新規作成します。下記のような構成になります。
index.jsとindex.htmlは下記のように記述します。
index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const app = require('express')(); const http = require('http').Server(app); const io = require('socket.io')(http); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); io.on('connection', function (socket) { socket.on('sending message', function (msg) { io.emit('new message', msg); }); }); http.listen(3000, function () { console.log('start'); }); |
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!doctype html> <html> <body> <form> <input type="text" id="word" /> <button>送信</button> </form> <ul id="messages"></ul> <script src="/socket.io/socket.io.js"></script> <script src="https://code.jquery.com/jquery-1.11.1.js"></script> <script> $(function () { const socket = io(); $('form').submit(function () { socket.emit('sending message', $('#word').val()); $('#word').val(''); return false; }); socket.on('new message', function (msg) { $('#messages').append($('<li>').text(msg)); }); }); </script> </body> </html> |
21行目
$(‘#word’).val()でフォームに入力した値を取得し、その値を「sending message」という名のイベント名で発火しサーバー側（index.js）へブロードキャストしています。サーバー側ではこのsending messageというイベント名（index.jsの10行目）で検知して値を受け取っています。
|
1 |
socket.emit(イベント, 値) |
26〜28行目
「new message」という名のイベント名でサーバー側からの応答に待機しています。サーバー側で同イベントが発火されるとクライアント側へ値がブロードキャスト（index.jsの11行目）されます。値はコールバック関数（function (msg){〜}）で受け取りHTMLで追加表示（append）しています。
|
1 |
socket.on(イベント, コールバック関数) |
関連ページ
