Your SlideShare is downloading. ×
0
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

18,703

Published on

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

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

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

No Downloads
Views
Total Views
18,703
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
123
Comments
0
Likes
25
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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. 3パターンつくります!   パターン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コネクション、1⽇日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

×