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

19,650
-1

Published on

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

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
19,650
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
128
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

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

  1. 1. WebSocket  +  Node.jsでつくるチャットアプリ 2011/8/28  第2回  プログラミング勉強会 kadoppe 1
  2. 2. ⾃自⼰己紹介!  名前:kadoppe !  Twitter  twitter.com/kadoppe !  Blog  www.kadoppe.net!  職業:プログラマ(iOS,  Web,  etc.)!  HTML5-‐‑‒West.jp  コアメンバー! about.me/kadoppe 2
  3. 3. 質問あなたとWebSocketの関係 3
  4. 4. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 4
  5. 5. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 5
  6. 6. WebSocketとは?!  Webブラウザ・サーバ間で双⽅方向通信 を実現するためのプロトコル!  元々はHTML5の仕様の⼀一部 !  後に切切り離離されて独⽴立立 6
  7. 7. 双⽅方向通信!  サーバ・クライアントの両⽅方からデー タ送信可能 双⽅方向通信 7
  8. 8. プロトコル概要(さらっと)!  TCPの上で動作(not  HTTP) !   ※⽣生のTCPパケットを送信できるわけではない!  80  or  443番ポートを使⽤用!  UTF-‐‑‒8の⽂文字列列  or  バイナリデータを送 信可能!  Webプロキシを通過可能 8
  9. 9. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 9
  10. 10. リアルタイムWebの実現!  双⽅方向通信により実現!  リアルタイムWebの例例 !  チャット !  ホワイトボード共有 !  オンライン格闘ゲーム !  ネット電話 !  テレビ会議 10
  11. 11. WebSocket  =  リアルタイムWeb を実現するための技術 11
  12. 12. でも・・・ 12
  13. 13. 昔からリアルタイムWebって あったよね? 13
  14. 14. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 14
  15. 15. 従来の双⽅方向通信技術!  代表的なもの ! XMLHttpRequestによるPolling !  Comet(Long  Polling) ざっくりまとめると HTTPを使ってリアルタイムWeb を実現する技術 15
  16. 16. HTTP  vs.  WebSocket 16
  17. 17. HTTPを使う⽅方式!  複数のHTTPコネクションを使って通信 HTTPコネクション 17
  18. 18. HTTPを使う⽅方式の問題点!  複数のHTTPコネクションを⽣生成 !  サーバの負荷が⾼高くなる !  トラフィックが増える サーバスペック、通信回線が貧弱な環境 では安定したサービスが提供しにくい 18
  19. 19. WebSocket!  単⼀一のTCPコネクションで双⽅方向通信 TCPコネクション 19
  20. 20. WebSocketの特徴!  単⼀一のコネクション上で通信 !  サーバの負荷が低くなる !  トラフィックが減る 従来よりも効率率率的・安定した双⽅方向通信 を実現可能! 20
  21. 21. Demo! WebSocket  Comparison  with  http  |  Ericsson  Labs   http://www.youtube.com/watch?v=Z897fkPn7Rw 21
  22. 22. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 22
  23. 23. WebSocketの標準化!   The  WebSocket  Protocol !   通信プロトコルを定義 !   IETFにより策定中(2011/7/11  Last  Call)!   The  WebSocket  API !   ブラウザから利利⽤用するJavaScript  APIを定義 !   W3Cにより策定中 23
  24. 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. 25. ブラウザ対応状況  (モバイル)プロトコル iOS Android BrackBerry デフォルト⾮非対応hixie-‐‑‒76,   4.2 Firefox  7 OS7hybi-‐‑‒00 Opera  mobile   25
  26. 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. 27. ◆アジェンダ◆! WebSocketとは! WebSocketでできること! WebSocketでかわること!  ブラウザ・サーバ対応状況! WebSocket  +  Node.jsでつくるチャッ トアプリ 27
  28. 28. 技術紹介   +  プチLive  Coding 28
  29. 29. つくるもの!  シンプルなチャットアプリ!  ⽂文字⼊入⼒力力欄!  Sendボタン!  チャットログ 29
  30. 30. つかうもの!  ブラウザサイド !  Google  Chrome  13 ! jQuery  1.6.1!  サーバサイド ! Node.js  v0.4.10 !   Express  –  Webフレームワーク 30
  31. 31. Node.js!  サーバサイドJavaScript実装のひとつ!  GoogleのJavaScriptエンジン「V8」上 で動作!  特徴 !  シングルスレッド !  イベントループモデル !  ノンブロッキングI/O 31
  32. 32. 構成!  ブラウザサイド ! chat.html ! chat.js!  サーバサイド ! app.js 32
  33. 33. 3パターンつくります!   パターンA !   Node  WebSocket  Server  を使⽤用 !   素のWebSocket  APIを使ったコーディングが楽しめます!   パターンB ! Socket.IO  を使⽤用 !   クロスブラウザ対応のリアルタイムWebアプリがとっても簡 単に作れます!   パターンC !   Pusher  を使⽤用 ! WebSocketが動作するサーバが⽤用意できない⼈人でも WebSocketを使ったWebアプリが公開できます 33
  34. 34. お知らせ・おことわり!   ひな形をベースに書いていきます。 !   必要なモジュールなどもインストール済!   詳しい説明は公式ドキュメントにおまかせ!!   完成版のソースコードはGitHubにおいてあり ます。 https://github.com/kadoppe/html5nado-‐‑‒websocket 34
  35. 35. パターンA!  Node  WebSocket  Server ! WebSocket  プロトコルのサーバサイ ド実装のひとつ ! Node.jsのモジュールとして提供 http://static.brandedcode.com/nws-‐‑‒docs/ 35
  36. 36. システム構成 WebSocketブラウザ WebSocket   Node   API WebSocket Server 36
  37. 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. 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. 39. パターンA  開発スタート! 39
  40. 40. パターンA  開発完了了(?) 40
  41. 41. 気づいたこと!   対応ブラウザが少ない !   IEでは使えない!   メッセージ受信時のイベントが  onmessage   のみ  (WebSocket  API) !   メッセージの種類が増えたときにコードの 分岐が増えそう 41
  42. 42. パターンB! Socket.IO !  クロスブラウザ環境で双⽅方向通信を実現 するためのNode.jsモジュール !  ブラウザにより通信⽅方式を⾃自動切切替 !   IE5.5以降降のブラウザに対応 !  カスタムイベントに対応 http://socket.io/ 42
  43. 43. システム構成 WebSocketブラウザ Socket.IO Socket.IO クライアント ライブラリ 43
  44. 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. 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. 46. パターンB  開発スタート! 46
  47. 47. パターンB  開発完了了(?) 47
  48. 48. 気づいたこと!  素晴らしい !  対応ブラウザが多い!  でも・・・ ! WebSocketが使えないサーバ環境も 存在 !   例例)Heroku 48
  49. 49. パターンC!   Pusher ! WebSocketサーバホスティングサービス !   20コネクション、1⽇日10万メッセージまでなら 無料料 ! WebSocketが利利⽤用できないブラウザでは Flash  Socketに⾃自動切切替 !   サーバからのPUSH通信のみがWebSocket   http://pusher.com/ 49
  50. 50. システム構成 WebSocket ブラウザ Pusher クライアント ライブラリHTTP  POST REST  API Node.js サーバ pusher モジュール (⾮非公式) 50
  51. 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. 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. 53. パターンC  開発スタート! 53
  54. 54. パターンC  開発完了了(?) 54
  55. 55. 気づいたこと!  ホスティングできるのは魅⼒力力!  クライアントからのデータ送信に時間 がかかる !  アプリケーションが配備されている サーバを⼀一旦を経由するため 55
  56. 56. まとめ! WebSocket !  リアルタイムWebを実現するためのプ ロトコル !  従来の⽅方式よりも効率率率的な通信が⾏行行える! Node.js  +  各種サービス・モジュールを 使うことで簡単にリアルタイムWebアプ リが開発可能 !  Letʼ’s  try!! 56
  57. 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. ご清聴ありがとうございました。 58

×