WebSocket + Node.jsでつくるチャットアプリ
25 likes15,223 views
2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。
WebSocket + Node.jsでつくるチャットアプリ
- 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