Soumettre la recherche
Mettre en ligne
WebSocket + Node.jsでつくるチャットアプリ
•
25 j'aime
•
15,173 vues
Kohei Kadowaki
Suivre
2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 58
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
クラウドオーケストレーション「OpenStack Heat」に迫る!
クラウドオーケストレーション「OpenStack Heat」に迫る!
Etsuji Nakai
swift-log について
swift-log について
Shinya Mochida
Advanced Terraform
Advanced Terraform
Samsung Electronics
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
Yuji Hato
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
Toru Makabe
Laravel echo + vue.js + axiosで簡単チャットアプリ開発
Laravel echo + vue.js + axiosで簡単チャットアプリ開発
宜浩 香月
Java8から17へ
Java8から17へ
onozaty
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
KwangSeob Jeong
Recommandé
クラウドオーケストレーション「OpenStack Heat」に迫る!
クラウドオーケストレーション「OpenStack Heat」に迫る!
Etsuji Nakai
swift-log について
swift-log について
Shinya Mochida
Advanced Terraform
Advanced Terraform
Samsung Electronics
iOSDC 2018 動画をなめらかに動かす技術
iOSDC 2018 動画をなめらかに動かす技術
Yuji Hato
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
OpenStack超入門シリーズ いまさら聞けないSwiftの使い方
Toru Makabe
Laravel echo + vue.js + axiosで簡単チャットアプリ開発
Laravel echo + vue.js + axiosで簡単チャットアプリ開発
宜浩 香月
Java8から17へ
Java8から17へ
onozaty
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
KwangSeob Jeong
FD.io VPP事始め
FD.io VPP事始め
tetsusat
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
NAVER D2
JAMstackは眠らない
JAMstackは眠らない
Kuniyoshi Tone
Docker Networking Deep Dive
Docker Networking Deep Dive
Docker, Inc.
すごく分かるwarden
すごく分かるwarden
i_yudai
PHP, Under The Hood - DPC
PHP, Under The Hood - DPC
Anthony Ferrara
perfを使ったPostgreSQLの解析(前編)
perfを使ったPostgreSQLの解析(前編)
NTT DATA OSS Professional Services
Linuxのsemaphoreとmutexを見る
Linuxのsemaphoreとmutexを見る
wata2ki
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
Performance tests with Gatling
Performance tests with Gatling
Andrzej Ludwikowski
Web hdfs and httpfs
Web hdfs and httpfs
wchevreuil
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Edureka!
Windows Server 2019 で Container を使ってみる
Windows Server 2019 で Container を使ってみる
Kazuki Takai
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
【さくらのクラウド】DNSアプライアンス導入ガイド
【さくらのクラウド】DNSアプライアンス導入ガイド
さくらインターネット株式会社
Guide to alfresco monitoring
Guide to alfresco monitoring
Miguel Rodriguez
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
VirtualTech Japan Inc.
Kernel Recipes 2017: Using Linux perf at Netflix
Kernel Recipes 2017: Using Linux perf at Netflix
Brendan Gregg
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
ClojureではじめるSTM入門
ClojureではじめるSTM入門
sohta
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
Contenu connexe
Tendances
FD.io VPP事始め
FD.io VPP事始め
tetsusat
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
NAVER D2
JAMstackは眠らない
JAMstackは眠らない
Kuniyoshi Tone
Docker Networking Deep Dive
Docker Networking Deep Dive
Docker, Inc.
すごく分かるwarden
すごく分かるwarden
i_yudai
PHP, Under The Hood - DPC
PHP, Under The Hood - DPC
Anthony Ferrara
perfを使ったPostgreSQLの解析(前編)
perfを使ったPostgreSQLの解析(前編)
NTT DATA OSS Professional Services
Linuxのsemaphoreとmutexを見る
Linuxのsemaphoreとmutexを見る
wata2ki
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
gree_tech
Performance tests with Gatling
Performance tests with Gatling
Andrzej Ludwikowski
Web hdfs and httpfs
Web hdfs and httpfs
wchevreuil
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Edureka!
Windows Server 2019 で Container を使ってみる
Windows Server 2019 で Container を使ってみる
Kazuki Takai
OVF, OVA, ovftool
OVF, OVA, ovftool
tshiroyama
【さくらのクラウド】DNSアプライアンス導入ガイド
【さくらのクラウド】DNSアプライアンス導入ガイド
さくらインターネット株式会社
Guide to alfresco monitoring
Guide to alfresco monitoring
Miguel Rodriguez
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
VirtualTech Japan Inc.
Kernel Recipes 2017: Using Linux perf at Netflix
Kernel Recipes 2017: Using Linux perf at Netflix
Brendan Gregg
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
日本マイクロソフト株式会社
ClojureではじめるSTM入門
ClojureではじめるSTM入門
sohta
Tendances
(20)
FD.io VPP事始め
FD.io VPP事始め
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
[2A1]Line은 어떻게 글로벌 메신저 플랫폼이 되었는가
JAMstackは眠らない
JAMstackは眠らない
Docker Networking Deep Dive
Docker Networking Deep Dive
すごく分かるwarden
すごく分かるwarden
PHP, Under The Hood - DPC
PHP, Under The Hood - DPC
perfを使ったPostgreSQLの解析(前編)
perfを使ったPostgreSQLの解析(前編)
Linuxのsemaphoreとmutexを見る
Linuxのsemaphoreとmutexを見る
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
コードの自動修正によって実現する、機能開発を止めないフレームワーク移行
Performance tests with Gatling
Performance tests with Gatling
Web hdfs and httpfs
Web hdfs and httpfs
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Docker Swarm For High Availability | Docker Tutorial | DevOps Tutorial | Edureka
Windows Server 2019 で Container を使ってみる
Windows Server 2019 で Container を使ってみる
OVF, OVA, ovftool
OVF, OVA, ovftool
【さくらのクラウド】DNSアプライアンス導入ガイド
【さくらのクラウド】DNSアプライアンス導入ガイド
Guide to alfresco monitoring
Guide to alfresco monitoring
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
OpenStackを使用したGPU仮想化IaaS環境 事例紹介
Kernel Recipes 2017: Using Linux perf at Netflix
Kernel Recipes 2017: Using Linux perf at Netflix
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
【BS11】毎年訪れる .NET のメジャーバージョンアップに備えるために取り組めること
ClojureではじめるSTM入門
ClojureではじめるSTM入門
Similaire à 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
Similaire à 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 [マイクロソフトの魅せるセンサー×クラウド技術]
Plus 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
Plus 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ことはじめ
Dernier
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Dernier
(12)
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
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
Télécharger maintenant