Suche senden
Hochladen
WebSocket + Node.jsでつくるチャットアプリ
•
25 gefällt mir
•
15,174 views
Kohei Kadowaki
Folgen
2011.8.28 京都の町家スタジオで開催された「第2回 プログラミング勉強会」で発表したときに使用したプレゼン資料です。
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 58
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
Your hash is.
Your hash is.
abend_cve_9999_0001
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Kazumi IWANAGA
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
真乙 九龍
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
VirtualTech Japan Inc.
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
NewRelic x Terraform Cloud で Observability as Code
NewRelic x Terraform Cloud で Observability as Code
Shogo Katsurada
超絶技巧 Ruby プログラミング - Esoteric, Obfuscated Ruby Programming
超絶技巧 Ruby プログラミング - Esoteric, Obfuscated Ruby Programming
mametter
Caching ガイダンスの話
Caching ガイダンスの話
Sunao Tomita
Empfohlen
Your hash is.
Your hash is.
abend_cve_9999_0001
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Azure Cosmos DB Emulator on Docker を GitHub Codespaces で動かす!
Kazumi IWANAGA
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
自宅ラック勉強会 2.2 夏のZabbix特別教室 ~構築編~
真乙 九龍
ゼロからはじめるKVM超入門
ゼロからはじめるKVM超入門
VirtualTech Japan Inc.
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
[Observability conference 2022/3/11] NewsPicks のプロダクト開発エンジニアが実践するスキルとしての SRE
Iida Yukako
NewRelic x Terraform Cloud で Observability as Code
NewRelic x Terraform Cloud で Observability as Code
Shogo Katsurada
超絶技巧 Ruby プログラミング - Esoteric, Obfuscated Ruby Programming
超絶技巧 Ruby プログラミング - Esoteric, Obfuscated Ruby Programming
mametter
Caching ガイダンスの話
Caching ガイダンスの話
Sunao Tomita
Az 104 session 6 azure networking part2
Az 104 session 6 azure networking part2
AzureEzy1
Arista: DevOps for Network Engineers
Arista: DevOps for Network Engineers
Philip DiLeo
OpenStack networking juno l3 h-a, dvr
OpenStack networking juno l3 h-a, dvr
Sim Janghoon
Developing with Docker for the Arm Architecture
Developing with Docker for the Arm Architecture
Docker, Inc.
AS45679 on FreeBSD
AS45679 on FreeBSD
Tomocha Potter
Nutanix Community Edition 技術解説
Nutanix Community Edition 技術解説
Satoshi Shimazaki
MySQL 5.7にやられないためにおぼえておいてほしいこと
MySQL 5.7にやられないためにおぼえておいてほしいこと
yoku0825
TCAMのしくみ
TCAMのしくみ
ogatay
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
Kohei Tokunaga
[DockerCon 2019] Hardening Docker daemon with Rootless mode
[DockerCon 2019] Hardening Docker daemon with Rootless mode
Akihiro Suda
Azure Messaging Services #1
Azure Messaging Services #1
Azure Riyadh User Group
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
NFV Management and Orchestration 분석
NFV Management and Orchestration 분석
rootfs32
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
株式会社クライム
Configuring the Device as a PPPoE Client on Huawei AR1200
Configuring the Device as a PPPoE Client on Huawei AR1200
Huanetwork
#ljstudy KVM勉強会
#ljstudy KVM勉強会
Etsuji Nakai
about Tcpreplay
about Tcpreplay
@ otsuka752
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
真乙 九龍
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
Yahoo!デベロッパーネットワーク
Seguridad perimetral - Mikrotik Firewall
Seguridad perimetral - Mikrotik Firewall
Vanesa Rodríguez Percy
AndroidでWebSocket
AndroidでWebSocket
Kohei Kadowaki
SocketStream入門
SocketStream入門
Kohei Kadowaki
Weitere ähnliche Inhalte
Was ist angesagt?
Az 104 session 6 azure networking part2
Az 104 session 6 azure networking part2
AzureEzy1
Arista: DevOps for Network Engineers
Arista: DevOps for Network Engineers
Philip DiLeo
OpenStack networking juno l3 h-a, dvr
OpenStack networking juno l3 h-a, dvr
Sim Janghoon
Developing with Docker for the Arm Architecture
Developing with Docker for the Arm Architecture
Docker, Inc.
AS45679 on FreeBSD
AS45679 on FreeBSD
Tomocha Potter
Nutanix Community Edition 技術解説
Nutanix Community Edition 技術解説
Satoshi Shimazaki
MySQL 5.7にやられないためにおぼえておいてほしいこと
MySQL 5.7にやられないためにおぼえておいてほしいこと
yoku0825
TCAMのしくみ
TCAMのしくみ
ogatay
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
Kohei Tokunaga
[DockerCon 2019] Hardening Docker daemon with Rootless mode
[DockerCon 2019] Hardening Docker daemon with Rootless mode
Akihiro Suda
Azure Messaging Services #1
Azure Messaging Services #1
Azure Riyadh User Group
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
gree_tech
NFV Management and Orchestration 분석
NFV Management and Orchestration 분석
rootfs32
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
株式会社クライム
Configuring the Device as a PPPoE Client on Huawei AR1200
Configuring the Device as a PPPoE Client on Huawei AR1200
Huanetwork
#ljstudy KVM勉強会
#ljstudy KVM勉強会
Etsuji Nakai
about Tcpreplay
about Tcpreplay
@ otsuka752
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
真乙 九龍
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
Yahoo!デベロッパーネットワーク
Seguridad perimetral - Mikrotik Firewall
Seguridad perimetral - Mikrotik Firewall
Vanesa Rodríguez Percy
Was ist angesagt?
(20)
Az 104 session 6 azure networking part2
Az 104 session 6 azure networking part2
Arista: DevOps for Network Engineers
Arista: DevOps for Network Engineers
OpenStack networking juno l3 h-a, dvr
OpenStack networking juno l3 h-a, dvr
Developing with Docker for the Arm Architecture
Developing with Docker for the Arm Architecture
AS45679 on FreeBSD
AS45679 on FreeBSD
Nutanix Community Edition 技術解説
Nutanix Community Edition 技術解説
MySQL 5.7にやられないためにおぼえておいてほしいこと
MySQL 5.7にやられないためにおぼえておいてほしいこと
TCAMのしくみ
TCAMのしくみ
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
[DockerCon 2019] Hardening Docker daemon with Rootless mode
[DockerCon 2019] Hardening Docker daemon with Rootless mode
Azure Messaging Services #1
Azure Messaging Services #1
Amazon EKS によるスマホゲームのバックエンド運用事例
Amazon EKS によるスマホゲームのバックエンド運用事例
NFV Management and Orchestration 분석
NFV Management and Orchestration 분석
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
Veeam v12新機能セミナー!クラウドへの直接バックアップ、多要素認証など便利機能をまるっと解説
Configuring the Device as a PPPoE Client on Huawei AR1200
Configuring the Device as a PPPoE Client on Huawei AR1200
#ljstudy KVM勉強会
#ljstudy KVM勉強会
about Tcpreplay
about Tcpreplay
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
Zabbixによるオートスケーリングクラスタ監視とオペレーション自動化
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
リペア時間短縮にむけた取り組み@Yahoo! JAPAN #casstudy
Seguridad perimetral - Mikrotik Firewall
Seguridad perimetral - Mikrotik Firewall
Ähnlich wie 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
Ähnlich wie 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 [マイクロソフトの魅せるセンサー×クラウド技術]
Mehr von 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
Mehr von 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ことはじめ
Kürzlich hochgeladen
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
sn679259
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
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.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
WSO2
Kürzlich hochgeladen
(12)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
知識ゼロの営業マンでもできた!超速で初心者を脱する、悪魔的学習ステップ3選.pptx
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Utilizing Ballerina for Cloud Native Integrations
Utilizing Ballerina for Cloud Native Integrations
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
Jetzt herunterladen