Node.js

1 /33
Javascript で WEB socket！
Ｓｏｃｋｅｔ．ｉｏ 入門
同志社大学 電気情報研究会
2016/9/10
概要
環境構築
2 /33
がんばって♪
チャットアプリの実装
※随時説明が入ります
同志社大学 電気情報研究会
2016/9/10
環境構築
3 /33
エディタのインストール
お好きなエディタで構いません
特にない方は「Brackets」を使ってみましょう
• ダウンロード ⇒ http://brackets.io/
Node.jsのインストール
Node.js 公式からダウンロードしてインストール
• 「vX.X.X Current」を選択
同志社大学 電気情報研究会
2016/9/10
4 /33
環境構築
Node.jsとは？？
Javascript実行環境
• Node.jsをインストールすると，そのマシン（パソコン・サーバー）上で（ブラ
ウザがなくても）Javascriptを実行することができる
Javascript
Javascript
ブラウザ
Node.js
マシン
マシン
• サーバー側でよく使われる
同志社大学 電気情報研究会
2016/9/10
環境構築
5 /33
Javscriptの実行
1. 〇〇.jsファイルを作成
2. “コマンドライン”からファイルを実行する
• 「node 〇〇.js」と打つ
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
6 /33
今回の目標
チャットアプリを完成させる
• 公式のサンプル
• https://github.com/socketio/socket.io/tree/master/examples/chat
• この未完成版を配布
• メッセージの通信部分を書いて完成させる
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
7 /33
ひとまず，未完成版を実行してみましょう
1. 配布した，「chat」フォルダ内で何もないところでShiftキーを押しながら
右クリック ⇒ コマンドウィンドウをここで開く
同志社大学 電気情報研究会
2016/9/10
8 /33
チャットアプリの実装
2. 「npm install」
実行準備完了
• npmとは
• node package manager
• Node.jsをインストールすると同時にインストールされ，「npm」コマンドが利用
•
できるようになっている
package.json内に起動するプログラム中で利用しているモジュール（ライブラリ）
を記述したり，その情報からモジュールを集めてきてくれたりする
• 「npm install」でpackage.jsonの情報からモジュールを集めてくれる
同志社大学 電気情報研究会
2016/9/10
9 /33
チャットアプリの実装
3. 「node index.js」（.jsは省略可能）
サーバー起動
同志社大学 電気情報研究会
2016/9/10
10 /33
チャットアプリの実装
4. ブラウザで「http://localhost:3000/」に接続
メッセージが
相手に届かない
どうやって
実装する？
同志社大学 電気情報研究会
2016/9/10
11 /33
チャットアプリの実装
Ajaxを使ってやる？
Ajaxはhttpプロトコルを使った通信
httpプロトコルの基本的な流れ
① req
1. クライアントがサーバーに通信する(リクエスト)
2. サーバーがクライアントに対してメッセージを返す(レスポンス)
※つまり，クライアントから通信がスタート
② res
通信が来ていないクライアントに対してサーバーから自発的にデータを送ること
（プッシュ通信）はできない
アッチャーー
同志社大学 電気情報研究会
2016/9/10
12 /33
チャットアプリの実装
Ajaxを使ってやる？
もしやるならば…
ポーリング
• サーバーに対して一定間隔でリソースに変更がないか確認を行う
①
新しいメッセージ
来てる？
一
定
時
間
後
うるさい
来てない
新しいメッセージ
来てる？
来てない
来てない
新しいメッセージ
来てる？↑↑
③
新しいメッセージ
来てる？
「こん～ 何処住み？」
「こん～ 何処住み？」
「こん～ 何処住み？」
新しいメッセージ
来てる？
「こん～ 何処住み？」
新しいメッセージ
来てる？
新しいメッセージ
来てる？↑↑
新しいメッセージ
来てる？
②
↑無駄な通信
メッセージ：
「こん～ 何処住み？」
（ＯＫ
受け取りました）
↖タイムラグ
ﾋｪｰｰ
同志社大学 電気情報研究会
2016/9/10
13 /33
チャットアプリの実装
そこで，WEB Socket！
WEB Socketとは
リアルタイムな双方向通信のための規格
一度通信が確立すれば，クライアント起点のサーバーへの通信はもちろん，
サーバー起点でクラアイアントへの通信（プッシュ通信）もできる
○
○
○
同志社大学 電気情報研究会
優勝！
2016/9/10
チャットアプリの実装
14 /33
Socket.ioとは
Socket.IO
Node.jsのWEB Socketを簡単に利用するためのライブラリ
これを利用して通信部分を完成させます
同志社大学 電気情報研究会
2016/9/10
15 /33
チャットアプリの実装
Socket.ioの設置（設置済み）
Socket.IO — Get started
サーバーサイド
• 「npm install socket.io --save」
• app.js
クライアントサイド
• .html
※特に何も設置などはしなくてよい
ここで読み込むファイルはサーバー側で
自動的に配信される
• .js
※Expressのひな型への導入を
前提としています
同志社大学 電気情報研究会
2016/9/10
16 /33
チャットアプリの実装
Socket.ioの使い方
基本
• 通信名（イベント名）と値（変数など）をセットで送る
• emitで送る，onで受け取る
• emit(イベント名, 値);
• on(イベント名, 関数）;
• ※「関数」はその通信が発生したときに実行される関数で第一引数で送られてきたデータを
受け取れる
例）
• サーバーサイド（app.js）
同志社大学 電気情報研究会
• クライアントサイド（.js）
2016/9/10
17 /33
チャットアプリの実装
Socket.ioの使い方
クライアントサイド
← ’otakebi’ というイベント名で
’うおおおお’ というデータを送る
（もちろんサーバーに送る）
※文字列以外も送れる
↑socket.on(第一引数，第二引数)となっている
function(引数){ 一連の処理 } は（無名）関数
つまり，関数を引数として渡している
関数の第一引数には送られてきたデータが格納される（今回はdataという名前にしている）
’sori’ というイベント名で（サーバーから）データが送られてきたら
そのデータを引数とする第二引数の関数を実行する
同志社大学 電気情報研究会
2016/9/10
18 /33
チャットアプリの実装
Socket.ioの使い方
サーバーサイド
←あるクライアントと接続したとき
この関数が実行される
引数のsocketというオブジェクトに
あるクライアントとの接続に関係する
いろいろなものが入っている
↑socket.emit()はあるクライアントに送信
socket.on()あるクライアントからデータを受け取ったときに
そのデータを使って何かをする
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
19 /33
Socket.ioの使い方
サーバーサイド
• 他にもいろいろなことができる
• http://socket.io/docs/
• 送信者以外の全員に送る（今回のチャットアプリで書いてもらう）
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
20 /33
実際に実装していきましょう
編集するのは chat/index.js と chat/public/main.js の2つの下のほう
（--未完成-- というところ）
index.js がサーバーサイド
main.js がクライアントサイド（ブラウザ）
上記二つのファイルをエディタで開きましょう
Bracketsの場合，chat フォルダを右クリック ⇒ 「open as Brackets project」
が便利です （bracketsの左側にフォルダごと読み込まれる）
同志社大学 電気情報研究会
2016/9/10
21 /33
チャットアプリの実装
サーバーサイド（index.js）
やってみましょう！
1. １つ目の --未完成-あるクライアントから’new message’という名前でメッセージが届いたときに
そのメッセージをmassageというプロパティに持ち，そのユーザー名を
usernameというプロパティに持つオブジェクトを生成してブロードキャスト
（送信者以外の全員に送信）する
‘new message’はクライアント側ですでにフォーム内でEnterを押すと送信される
ように実装されています
オブジェクトは {プロパティ名：値，プロパティ名：値 … } で生成できます
ユーザー名は socket.username に格納されていて，利用できます
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
22 /33
サーバーサイド（index.js）
1. 答え！！
同志社大学 電気情報研究会
2016/9/10
23 /33
チャットアプリの実装
クライアントサイド（main.js）
1. １つ目の --未完成-サーバーから’new message’という名前でデータが届いたときに
画面にメッセージを追加する部分を実装します
画面にメッセージを追加する処理自体はすでに，addChatMessage()関数として
用意されています
送られてきたデータをそのままaddChatMessage()関数に渡せばOK
やってみましょう！
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
24 /33
クライアントサイド（main.js）
1. 答え！！
同志社大学 電気情報研究会
2016/9/10
25 /33
チャットアプリの実装
サーバーサイド（index.js）
やってみましょう！
2. ２つ目の --未完成-あるクライアントから’typing’という名前で通信がきたときに
ユーザー名をusernameというプロパティに持つオブジェクトを生成して
ブロードキャスト（送信者以外の全員に送信）する
‘typing’はクライアント側ですでにタイピングをすると送信されるように
実装されています
（オブジェクトは {プロパティ名：値，プロパティ名：値 … } で生成できます）
（ユーザー名は socket.username に格納されていて，利用できます）
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
26 /33
サーバーサイド（index.js）
2. 答え！！
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
27 /33
クライアントサイド（main.js）
2. ２つ目の --未完成-サーバーから’typing’という名前で通信が来た時に
画面にメッセージを追加する部分を実装します
画面にメッセージを追加する処理自体はすでに，addChatTyping()関数として
用意されています
送られてきたデータをそのままaddChatTyping()関数に渡せばOK
やってみましょう！
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
28 /33
クライアントサイド（main.js）
2. 答え！！
同志社大学 電気情報研究会
2016/9/10
29 /33
チャットアプリの実装
サーバーサイド（index.js）
やってみましょう！
3. ３つ目の --未完成-あるクライアントから’stop typing’という名前で通信がきたときに
ユーザー名をusernameというプロパティに持つオブジェクトを生成して
ブロードキャスト（送信者以外の全員に送信）する
‘stop typing’はクライアント側ですでにタイピングをやめると送信されるように
実装されています
（オブジェクトは {プロパティ名：値，プロパティ名：値 … } で生成できます）
（ユーザー名は socket.username に格納されていて，利用できます）
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
30 /33
サーバーサイド（index.js）
3. 答え！！
同志社大学 電気情報研究会
2016/9/10
31 /33
チャットアプリの実装
クライアントサイド（main.js）
3. ２つ目の --未完成-サーバーから’stop typing’という名前で通信が来た時に
画面にメッセージを追加する部分を実装します
画面からメッセージを消す処理自体はすでに，removeChatTyping ()関数として
用意されています
送られてきたデータをそのままremoveChatTyping ()関数に渡せばOK
やってみましょう！
同志社大学 電気情報研究会
2016/9/10
チャットアプリの実装
32 /33
クライアントサイド（main.js）
3. 答え！！
同志社大学 電気情報研究会
2016/9/10
33 /33
終わり
完成！
Socket.ioで簡単にリアルタイム通信が実装できることが
分かってもらえたでしょうか？
お疲れさまでした！
同志社大学 電気情報研究会
2016/9/10