2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。

1. WebSocket + Node.js
でつくるチャットアプリ
2011/8/28 第2回 プログラミング勉強会
kadoppe
1

2. ⾃自⼰己紹介
! 名前：kadoppe
! Twitter twitter.com/kadoppe
! Blog www.kadoppe.net
! 職業：プログラマ（iOS, Web, etc.）
! HTML5-‐‑‒West.jp コアメンバー
! about.me/kadoppe
2

3. 質問
あなたとWebSocketの関係
3

4. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
4

5. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
5

6. WebSocketとは？
! Webブラウザ・サーバ間で双⽅方向通信
を実現するためのプロトコル
! 元々はHTML5の仕様の⼀一部
! 後に切切り離離されて独⽴立立
6

7. 双⽅方向通信
! サーバ・クライアントの両⽅方からデー
タ送信可能
双⽅方向通信
7

8. プロトコル概要（さらっと）
! TCPの上で動作（not HTTP）
! ※⽣生のTCPパケットを送信できるわけではない
! 80 or 443番ポートを使⽤用
! UTF-‐‑‒8の⽂文字列列 or バイナリデータを送
信可能
! Webプロキシを通過可能
8

9. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
9

10. リアルタイムWebの実現
! 双⽅方向通信により実現
! リアルタイムWebの例例
! チャット
! ホワイトボード共有
! オンライン格闘ゲーム
! ネット電話
! テレビ会議
10

11. WebSocket = リアルタイムWeb
を実現するための技術
11

12. でも・・・
12

13. 昔からリアルタイムWebって
あったよね？
13

14. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
14

15. 従来の双⽅方向通信技術
! 代表的なもの
! XMLHttpRequestによるPolling
! Comet（Long Polling）
ざっくりまとめると
HTTPを使ってリアルタイムWeb
を実現する技術
15

16. HTTP vs. WebSocket
16

17. HTTPを使う⽅方式
! 複数のHTTPコネクションを使って通信
HTTPコネクション
17

18. HTTPを使う⽅方式の問題点
! 複数のHTTPコネクションを⽣生成
! サーバの負荷が⾼高くなる
! トラフィックが増える
サーバスペック、通信回線が貧弱な環境
では安定したサービスが提供しにくい
18

19. WebSocket
! 単⼀一のTCPコネクションで双⽅方向通信
TCPコネクション
19

20. WebSocketの特徴
! 単⼀一のコネクション上で通信
! サーバの負荷が低くなる
! トラフィックが減る
従来よりも効率率率的・安定した双⽅方向通信
を実現可能！
20

21. Demo
! WebSocket Comparison with http | Ericsson Labs
http://www.youtube.com/watch?v=Z897fkPn7Rw
21

22. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
22

23. WebSocketの標準化
! The WebSocket Protocol
! 通信プロトコルを定義
! IETFにより策定中（2011/7/11 Last Call）
! The WebSocket API
! ブラウザから利利⽤用するJavaScript APIを定義
! W3Cにより策定中
23

24. ブラウザ対応状況 (PC)
プロトコル IE Firefox Chrome Safari Opera
hixie-‐‑‒75 4 5.0.0
hixie-‐‑‒76,
4(無効) 6 5.0.1 11(無効)
hybi-‐‑‒00
6
hybi-‐‑‒07
(Prefix付き)
HTML5
hybi-‐‑‒09
Labs
hybi-‐‑‒10 7
14
(Last Call) (Prefix付き)
※プロトコルの各リビジョン間の互換性はない。
24

25. ブラウザ対応状況 (モバイル)
プロトコル iOS Android BrackBerry
デフォルト⾮非対応
hixie-‐‑‒76,
4.2 Firefox 7 OS7
hybi-‐‑‒00
Opera mobile
25

26. サーバ対応状況
! Node.js
! Socket.io
! Node Websocket Server (hybi-‐‑‒00)
! WebSocket-‐‑‒Node (hybi-‐‑‒07, hybi-‐‑‒09, hybi-‐‑‒10)
! Java
! Jetty (hixie-‐‑‒75, hybi-‐‑‒00, hybi-‐‑‒07)
! CometD
! PHP
! phpwebsocket
! Python
! pywebsocket (hixie-‐‑‒75, hybi-‐‑‒00, hybi-‐‑‒10)
! その他多数
26

27. ◆アジェンダ◆
! WebSocketとは
! WebSocketでできること
! WebSocketでかわること
! ブラウザ・サーバ対応状況
! WebSocket + Node.jsでつくるチャッ
トアプリ
27

28. 技術紹介
+
プチLive Coding
28

29. つくるもの
! シンプルなチャットアプリ
! ⽂文字⼊入⼒力力欄
! Sendボタン
! チャットログ
29

30. つかうもの
! ブラウザサイド
! Google Chrome 13
! jQuery 1.6.1
! サーバサイド
! Node.js v0.4.10
! Express – Webフレームワーク
30

31. Node.js
! サーバサイドJavaScript実装のひとつ
! GoogleのJavaScriptエンジン「V8」上
で動作
! 特徴
! シングルスレッド
! イベントループモデル
! ノンブロッキングI/O
31

32. 構成
! ブラウザサイド
! chat.html
! chat.js
! サーバサイド
! app.js
32

33. ３パターンつくります
! パターンA
! Node WebSocket Server を使⽤用
! 素のWebSocket APIを使ったコーディングが楽しめます
! パターンB
! Socket.IO を使⽤用
! クロスブラウザ対応のリアルタイムWebアプリがとっても簡
単に作れます
! パターンC
! Pusher を使⽤用
! WebSocketが動作するサーバが⽤用意できない⼈人でも
WebSocketを使ったWebアプリが公開できます
33

34. お知らせ・おことわり
! ひな形をベースに書いていきます。
! 必要なモジュールなどもインストール済
! 詳しい説明は公式ドキュメントにおまかせ！
! 完成版のソースコードはGitHubにおいてあり
ます。
https://github.com/kadoppe/html5nado-‐‑‒websocket
34

35. パターンA
! Node WebSocket Server
! WebSocket プロトコルのサーバサイ
ド実装のひとつ
! Node.jsのモジュールとして提供
http://static.brandedcode.com/nws-‐‑‒docs/
35

36. システム構成
WebSocket
ブラウザ
WebSocket Node
API WebSocket
Server
36

37. サーバサイド
! サーバインスタンスの⽣生成・起動
// モジュール読み込み!
var ws = require(“websocket-server”); !
!
var server = ws.createServer();!
server.listen(80); // 80番ポートで待機!
! イベントハンドラの登録・データ送信
server.addListener("connection", function(connection){ !
!connection.addListener("message", function(msg){ !
! !// 接続している全クライアントにデータ送信 ! !!
! !server.broadcast(msg);!
!}); !
});!
37

38. ブラウザサイド (WebSocket API)
! WebSocketインスタンスの⽣生成
var ws = new WebSocket(“ws://example.com/chat/”);!
! イベントハンドラの登録
ws.onopen = function() {};!
ws.onclose = function() {};!
ws.onmessage = function() {};!
ws.onerror = function() {};!
! データ送信・切切断
ws.send(message);!
ws.close();!
38

39. パターンA 開発スタート！
39

40. パターンA 開発完了了（？）
40

41. 気づいたこと
! 対応ブラウザが少ない
! IEでは使えない
! メッセージ受信時のイベントが onmessage
のみ (WebSocket API)
! メッセージの種類が増えたときにコードの
分岐が増えそう
41

42. パターンB
! Socket.IO
! クロスブラウザ環境で双⽅方向通信を実現
するためのNode.jsモジュール
! ブラウザにより通信⽅方式を⾃自動切切替
! IE5.5以降降のブラウザに対応
! カスタムイベントに対応
http://socket.io/
42

43. システム構成
WebSocket
ブラウザ
Socket.IO Socket.IO
クライアント
ライブラリ
43

44. サーバサイド
! サーバインスタンスの⽣生成・起動
var io = require(‘socket.io’).listen(80)!
!
!
! イベントハンドラの登録・データ送信
io.sockets.on('connection', function (socket) {
!socket.on(‘message’, function(message) {!
! !// 接続している全クライアントにデータ送信!
! !io.sockets.send(message);!
!});
});!
!
44

45. ブラウザサイド
! ライブラリの読み込み
<script src="/socket.io/socket.io.js"></script>!
!
! Socket.IOインスタンスの⽣生成
var socket = io.connect(‘ws://example.com’);!
! イベントハンドラの登録・データ送信
socket.on(’message', function (data) {!
!// ...
!socket.send(message);!
});
!
45

46. パターンB 開発スタート！
46

47. パターンB 開発完了了（？）
47

48. 気づいたこと
! 素晴らしい
! 対応ブラウザが多い
! でも・・・
! WebSocketが使えないサーバ環境も
存在
! 例例）Heroku
48

49. パターンC
! Pusher
! WebSocketサーバホスティングサービス
! 20コネクション、１⽇日10万メッセージまでなら
無料料
! WebSocketが利利⽤用できないブラウザでは
Flash Socketに⾃自動切切替
! サーバからのPUSH通信のみがWebSocket
http://pusher.com/
49

50. システム構成
WebSocket
ブラウザ Pusher
クライアント
ライブラリ
HTTP POST REST API
Node.js
サーバ
pusher
モジュール
（⾮非公式）
50

51. サーバサイド
! Pusherインスタンスの⽣生成・設定
var Pusher = require('pusher');!
var pusher = new Pusher({!
!appId: ‘YOUR_APP_ID’, // Pusherアカウントの各種情報!
!appKey: 'YOUR_APP_KEY',!
!secret: 'YOUR_APP_SECRET'!
});!
var channel = pusher.channel(‘chat’); // チャンネル設定!
!
! Pusherへのデータ送信
channel.trigger('message', data);!
!
※ https://github.com/fabrik42/pusher
で公開されているモジュールを使⽤用
51

52. ブラウザサイド
! クライアントライブラリの読み込み
<script src=“http://js.pusherapp.com/1.8/
pusher.min.js"></script>!
!
! Pusherインスタンスの⽣生成・設定
var pusher = new Pusher(YOUR_APP_KEY);!
var channel = pusher.subscribe('chat');!
! イベントハンドラの登録
channel.bind('message', function(data) {!
!//!
});!
52

53. パターンC 開発スタート！
53

54. パターンC 開発完了了（？）
54

55. 気づいたこと
! ホスティングできるのは魅⼒力力
! クライアントからのデータ送信に時間
がかかる
! アプリケーションが配備されている
サーバを⼀一旦を経由するため
55

56. まとめ
! WebSocket
! リアルタイムWebを実現するためのプ
ロトコル
! 従来の⽅方式よりも効率率率的な通信が⾏行行える
! Node.js + 各種サービス・モジュールを
使うことで簡単にリアルタイムWebアプ
リが開発可能
! Letʼ’s try!!
56

57. 参考資料料
! The WebSocket protocol
http://tools.ietf.org/html/draft-‐‑‒ietf-‐‑‒hybi-‐‑‒
thewebsocketprotocol-‐‑‒10
! The WebSocket API
http://dev.w3.org/html5/websockets/
57

58. ご清聴ありがとうございました。
58