WebSocket + Node.jsでつくるチャットアプリ

WebSocket + Node.jsでつくるチャットアプリ - Presentation Transcript

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.0hixie-‐‑‒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 OS7hybi-‐‑‒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