Mais conteúdo relacionado Semelhante a WebSocket + Node.jsでつくるチャットアプリ (20) Mais de Kohei Kadowaki (15) WebSocket + Node.jsでつくるチャットアプリ2. ⾃自⼰己紹介
! 名前:kadoppe
! Twitter twitter.com/kadoppe
! Blog www.kadoppe.net
! 職業:プログラマ(iOS, Web, etc.)
! HTML5-‐‑‒West.jp コアメンバー
! about.me/kadoppe
2
15. 従来の双⽅方向通信技術
! 代表的なもの
! XMLHttpRequestによるPolling
! Comet(Long Polling)
ざっくりまとめると
HTTPを使ってリアルタイムWeb
を実現する技術
15
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
28. 技術紹介
+
プチLive Coding
28
30. つかうもの
! ブラウザサイド
! Google Chrome 13
! jQuery 1.6.1
! サーバサイド
! Node.js v0.4.10
! Express – Webフレームワーク
30
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
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
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
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