Enviar búsqueda
Cargar
WebSocket + Node.jsでつくるチャットアプリ
•
25 recomendaciones
•
15,172 vistas
Kohei Kadowaki
Seguir
2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 58
Descargar ahora
Descargar para leer sin conexión
Recomendados
SDL2 Game Development VT Code Camp 2013
SDL2 Game Development VT Code Camp 2013
Eric Basile
Extreme ironing
Extreme ironing
osgazbil
Filtering Instagram hashtags through crowdtagging and the HITS algorithm
Filtering Instagram hashtags through crowdtagging and the HITS algorithm
Venkat Projects
4月からCAEをはじめる人におすすめする本
4月からCAEをはじめる人におすすめする本
mmer547
iV2014 - Narrative Visualization
iV2014 - Narrative Visualization
Ana Figueiras
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
Yahoo!デベロッパーネットワーク
スクラムによるOpsBear開発1-基本編
スクラムによるOpsBear開発1-基本編
光平 八代
원티드 발표자료 나수현 2018
원티드 발표자료 나수현 2018
Soohyun Na
Recomendados
SDL2 Game Development VT Code Camp 2013
SDL2 Game Development VT Code Camp 2013
Eric Basile
Extreme ironing
Extreme ironing
osgazbil
Filtering Instagram hashtags through crowdtagging and the HITS algorithm
Filtering Instagram hashtags through crowdtagging and the HITS algorithm
Venkat Projects
4月からCAEをはじめる人におすすめする本
4月からCAEをはじめる人におすすめする本
mmer547
iV2014 - Narrative Visualization
iV2014 - Narrative Visualization
Ana Figueiras
多様化するロケーションビジネスのこれから
多様化するロケーションビジネスのこれから
Yahoo!デベロッパーネットワーク
スクラムによるOpsBear開発1-基本編
スクラムによるOpsBear開発1-基本編
光平 八代
원티드 발표자료 나수현 2018
원티드 발표자료 나수현 2018
Soohyun Na
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
은옥 조
PayPal Risk Platform High Performance Practice
PayPal Risk Platform High Performance Practice
Brian Ling
UX Research no iFood
UX Research no iFood
Mergo
Novaon Comm Credential 2022
Novaon Comm Credential 2022
ThuanTran105
全面預算管理
全面預算管理
ppen
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
Ryusuke Kimura
EECS 441 Company Presentation Zenly
EECS 441 Company Presentation Zenly
HongyangWang5
User story mapping TACO
User story mapping TACO
AlvinTian2
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
株式会社オプト 仙台ラボラトリ
@Iuk comp mediatoolkit_jan20
@Iuk comp mediatoolkit_jan20
JulieErvine
MSBuild + Git + Jenkins
MSBuild + Git + Jenkins
선협 이
Exploring Service Design: User Experience Beyond the Screen
Exploring Service Design: User Experience Beyond the Screen
Ariel van Spronsen
『함수형 반응형 프로그래밍』 맛보기
『함수형 반응형 프로그래밍』 맛보기
복연 이
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
Emilie-Anne GUERCH
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
SlideTeam
Verizon Data Breach Digest 2016
Verizon Data Breach Digest 2016
Ryan Carleton
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
これから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
Daichi Isami
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
Más contenido relacionado
La actualidad más candente
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
은옥 조
PayPal Risk Platform High Performance Practice
PayPal Risk Platform High Performance Practice
Brian Ling
UX Research no iFood
UX Research no iFood
Mergo
Novaon Comm Credential 2022
Novaon Comm Credential 2022
ThuanTran105
全面預算管理
全面預算管理
ppen
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
Ryusuke Kimura
EECS 441 Company Presentation Zenly
EECS 441 Company Presentation Zenly
HongyangWang5
User story mapping TACO
User story mapping TACO
AlvinTian2
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
株式会社オプト 仙台ラボラトリ
@Iuk comp mediatoolkit_jan20
@Iuk comp mediatoolkit_jan20
JulieErvine
MSBuild + Git + Jenkins
MSBuild + Git + Jenkins
선협 이
Exploring Service Design: User Experience Beyond the Screen
Exploring Service Design: User Experience Beyond the Screen
Ariel van Spronsen
『함수형 반응형 프로그래밍』 맛보기
『함수형 반응형 프로그래밍』 맛보기
복연 이
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
Emilie-Anne GUERCH
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
SlideTeam
Verizon Data Breach Digest 2016
Verizon Data Breach Digest 2016
Ryan Carleton
La actualidad más candente
(16)
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
개발자와 기업을 잇는 Developer Relations(full.ver).pdf
PayPal Risk Platform High Performance Practice
PayPal Risk Platform High Performance Practice
UX Research no iFood
UX Research no iFood
Novaon Comm Credential 2022
Novaon Comm Credential 2022
全面預算管理
全面預算管理
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
甘酸っぱいGCPレガシーApp Engine python2からCloud Runへの移行の勘所
EECS 441 Company Presentation Zenly
EECS 441 Company Presentation Zenly
User story mapping TACO
User story mapping TACO
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
フレームワークも使っていないWebアプリをLaravel+PWAでモバイルアプリっぽくしてみちゃう
@Iuk comp mediatoolkit_jan20
@Iuk comp mediatoolkit_jan20
MSBuild + Git + Jenkins
MSBuild + Git + Jenkins
Exploring Service Design: User Experience Beyond the Screen
Exploring Service Design: User Experience Beyond the Screen
『함수형 반응형 프로그래밍』 맛보기
『함수형 반응형 프로그래밍』 맛보기
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
Agile Tour 2019 - REX AXA France - Event Storming - 3 amigos
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
One Page Blockchain Theme Proposal For Distributed Ledger Presentation Report...
Verizon Data Breach Digest 2016
Verizon Data Breach Digest 2016
Similar a WebSocket + Node.jsでつくるチャットアプリ
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
Kazuhiro Hara
これから利用拡大?WebSocket
これから利用拡大?WebSocket
AdvancedTechNight
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
Daichi Isami
120512 metro styleapp_javascript
120512 metro styleapp_javascript
Takayoshi Tanaka
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
Html5, Web Applications 2
Html5, Web Applications 2
totty jp
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
david9142
websocket-survery
websocket-survery
hogemaru_
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
HTML5-pronama-study
HTML5-pronama-study
Naoya Inada
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
mganeko
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
崇之 清水
Vitochaを用いた Jail+VIMAGE Webインターフェイス
Vitochaを用いた Jail+VIMAGE Webインターフェイス
shutingrz
Firefox OS and Web server
Firefox OS and Web server
Tomoaki Konno
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
Masaki Takeda
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Shumpei Shiraishi
Kilimanjaro Event
Kilimanjaro Event
dynamis
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Aya Tokura
Similar a WebSocket + Node.jsでつくるチャットアプリ
(20)
AndroidでWebSocket
AndroidでWebSocket
SocketStream入門
SocketStream入門
PlayFramework1.2.4におけるWebSocket
PlayFramework1.2.4におけるWebSocket
これから利用拡大?WebSocket
これから利用拡大?WebSocket
クラウドサービスを使って作る動画サイト?
クラウドサービスを使って作る動画サイト?
120512 metro styleapp_javascript
120512 metro styleapp_javascript
JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Html5, Web Applications 2
Html5, Web Applications 2
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
Netラボ2012年6月勉強会 マイクロソフトのオープンソース戦略を考える
websocket-survery
websocket-survery
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
HTML5-pronama-study
HTML5-pronama-study
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Node.jsとAWS入門(Elastic Beanstalk & AWS SDK for Node.js)
Vitochaを用いた Jail+VIMAGE Webインターフェイス
Vitochaを用いた Jail+VIMAGE Webインターフェイス
Firefox OS and Web server
Firefox OS and Web server
OSC 2010 Tokyo/Fall MSセッション
OSC 2010 Tokyo/Fall MSセッション
HTML5とWeb開発に関する最新動向
HTML5とWeb開発に関する最新動向
Kilimanjaro Event
Kilimanjaro Event
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
OSC 2012 Microsoft Session [マイクロソフトの魅せるセンサー×クラウド技術]
Más de Kohei Kadowaki
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Kohei Kadowaki
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Kohei Kadowaki
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Kohei Kadowaki
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
Kohei Kadowaki
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
Kohei Kadowaki
プログラマーのお仕事
プログラマーのお仕事
Kohei Kadowaki
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
Kohei Kadowaki
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
Kohei Kadowaki
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
Kohei Kadowaki
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
Kohei Kadowaki
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
Kohei Kadowaki
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
Kohei Kadowaki
WebSocketことはじめ
WebSocketことはじめ
Kohei Kadowaki
Más de Kohei Kadowaki
(15)
Pebble + JavaScriptでつくるスマートウォッチアプリ
Pebble + JavaScriptでつくるスマートウォッチアプリ
Firefox OSでSVGをつかってみた
Firefox OSでSVGをつかってみた
Inline SVG - トラブルとその対策
Inline SVG - トラブルとその対策
Webでもできるデータビジュアライゼーション
Webでもできるデータビジュアライゼーション
いまさら聞けない!?Backbone.js 超入門
いまさら聞けない!?Backbone.js 超入門
D3.js と SVG によるデータビジュアライゼーション
D3.js と SVG によるデータビジュアライゼーション
プログラマーのお仕事
プログラマーのお仕事
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
SVGでつくるインタラクティブWebアプリケーション
SVGでつくるインタラクティブWebアプリケーション
UnityでつくるはじめてのPONG
UnityでつくるはじめてのPONG
インラインSVGをつかって地図っぽいものをつくってみる
インラインSVGをつかって地図っぽいものをつくってみる
ShareWisをFirefoxで動かすためのSVG的とりくみ
ShareWisをFirefoxで動かすためのSVG的とりくみ
d3jsではじめるデータビジュアライゼーション入門
d3jsではじめるデータビジュアライゼーション入門
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
ゲーム開発初心者の僕がUnity + WebSocketで何か作ってみた
WebSocketことはじめ
WebSocketことはじめ
Último
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Último
(9)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
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.
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
Descargar ahora