SlideShare une entreprise Scribd logo
1  sur  23
Websocket を知ろう
    @hogemaru7
もくじ
• Websocket とは
• 感想
• まとめ
つくったもののデモ
Websocket とは
• サーバとブラウザの間で双方向通信を
  行う技術
• RFC 6455
Websocket(ws) のレイヤ
         ー
ブラウザ対応状況
2010/2/4




2011/12
HTTP を用いた双方向通信
• Ajax (Polling)   • Comet(Long Polling)
Polling 型 (Ajax)




  サーバ側に更新がない場合に効率が悪い
Long Polling 型 (comet)




Polling より改善されているが、 http のヘッダ、
TCP のコネクションによるロスが残る
websocket
リソースの比較



               7 億倍




Websocket は些細な改善のように見えるが、ユーザが増えると・・・?
      http://ajax.sys-con.com/node/1315473
Websocket による通信の流
          れ

• HTTP でハンドシェイク
• Websocket でデータ転送
Websocket による通信の流
          れ
http によるハンドシェイク
Websocket による通信の流
          れ

• HTTP でハンドシェイク
• Websocket でデータ転送
データとフレーム
• Websocket はデータを転送する際、1つ
  またはそれ以上のフレームの連続として
  、データを転送する
 – フレームの順序や誤り訂正は TCP で保証され
   る
Websocket frame format
TCP Frame format




クイズ:ウェブソケットが挿入される場所はどこでしょう?
Websocket(ws) のレイヤ
         ー
データのマスク
• データは Masking-key を用いてマスク
  される
 – 主にセキュリティのため
 – Masking-key でペイロードが XOR 演算さ
   れる
より詳細な仕様が知りた
     い方
• Web や参考文献を読みましょう
個人的な感想
• ブラウザゲームは恩恵を受ける
 – windows の GUI アプリやゲームで使う意味はあ
   まりないかも (UDP/TCP のほうが良いはず )
• ユーザ数が多くなると性能差がはっきりする
 – 個人では検証が難しそう
• さまざまなデバイスをつなげたいときに便利
  そう
 – ブラウザで接続できる端末=利用可能なデバイス
 – 組織や家のプロキシを意識しなくてよい
まとめ
• Websocket について簡単に解説
 – これからは websocket って知ってる? 
   ときかれたときに知っている!と言えるは
   ず
• チャットアプリを作成して理解しまし
  た
 –   Node.js( サーバ ) + C#( クライアント )
 –   サーバ側: 50 行程度
 –   クライアント : 200 行程度
 –   作ってみると分かることもある
参考
• Html5 Tutorial:Web Sockets
  – http://marakana.com/bookshelf/html5_tutori
• Websocket をみてみよう
  – http://bit.ly/ws-kuruma

Contenu connexe

Tendances

WTM52 あなたの作ったWEBサイト、生きてますか?
WTM52 あなたの作ったWEBサイト、生きてますか?WTM52 あなたの作ったWEBサイト、生きてますか?
WTM52 あなたの作ったWEBサイト、生きてますか?
Masanori Oobayashi
 
HttpとTelnetをつなぐ何か
HttpとTelnetをつなぐ何かHttpとTelnetをつなぐ何か
HttpとTelnetをつなぐ何か
ShigekiYamada
 
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
Kazuhiro Kotsutsumi
 
Webアプリケーションの無停止稼働
Webアプリケーションの無停止稼働Webアプリケーションの無停止稼働
Webアプリケーションの無停止稼働
Kazuho Oku
 
Windows azure webサイトの紹介
Windows azure webサイトの紹介Windows azure webサイトの紹介
Windows azure webサイトの紹介
Daisuke Abe
 

Tendances (18)

2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
2012/6/10 Webのパフォーマンスを考える @ 【第三回】初心者向けホームページ勉強会
 
第2回Web技術勉強会 webパフォーマンス改善編
第2回Web技術勉強会 webパフォーマンス改善編第2回Web技術勉強会 webパフォーマンス改善編
第2回Web技術勉強会 webパフォーマンス改善編
 
AWSとmod_pagespeedで 楽々サクサク高速化!!
AWSとmod_pagespeedで楽々サクサク高速化!!AWSとmod_pagespeedで楽々サクサク高速化!!
AWSとmod_pagespeedで 楽々サクサク高速化!!
 
Study2study3 nslope
Study2study3 nslopeStudy2study3 nslope
Study2study3 nslope
 
WTM52 あなたの作ったWEBサイト、生きてますか?
WTM52 あなたの作ったWEBサイト、生きてますか?WTM52 あなたの作ったWEBサイト、生きてますか?
WTM52 あなたの作ったWEBサイト、生きてますか?
 
HttpとTelnetをつなぐ何か
HttpとTelnetをつなぐ何かHttpとTelnetをつなぐ何か
HttpとTelnetをつなぐ何か
 
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
第1回Webサーバ勉強会 - 212-223 ブラウザマッチ処理
 
Using SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JSUsing SockJS(Websocket) with Sencha Ext JS
Using SockJS(Websocket) with Sencha Ext JS
 
Webアプリケーションの無停止稼働
Webアプリケーションの無停止稼働Webアプリケーションの無停止稼働
Webアプリケーションの無停止稼働
 
WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)WebSocketでリアルタイム通信 (第13回学生LT資料)
WebSocketでリアルタイム通信 (第13回学生LT資料)
 
H2O - making HTTP better
H2O - making HTTP betterH2O - making HTTP better
H2O - making HTTP better
 
Web基礎
Web基礎Web基礎
Web基礎
 
TeamA
TeamATeamA
TeamA
 
lua_nginx_module JSON-RPC 2.0 Batch Request
lua_nginx_module JSON-RPC 2.0 Batch Requestlua_nginx_module JSON-RPC 2.0 Batch Request
lua_nginx_module JSON-RPC 2.0 Batch Request
 
Windows azure webサイトの紹介
Windows azure webサイトの紹介Windows azure webサイトの紹介
Windows azure webサイトの紹介
 
Varnish
VarnishVarnish
Varnish
 
PHPからJavaへ乗り換えた。そんな昔話をしよう
PHPからJavaへ乗り換えた。そんな昔話をしようPHPからJavaへ乗り換えた。そんな昔話をしよう
PHPからJavaへ乗り換えた。そんな昔話をしよう
 
Webタグについて
WebタグについてWebタグについて
Webタグについて
 

Similaire à websocket-survery

JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
Shumpei Shiraishi
 
Lesson01
Lesson01Lesson01
Lesson01
MRI
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
mganeko
 
【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来
Developers Summit
 

Similaire à websocket-survery (20)

JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要JavaプログラマのためのWebSocket概要
JavaプログラマのためのWebSocket概要
 
Lesson01
Lesson01Lesson01
Lesson01
 
WebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリWebSocket + Node.jsでつくるチャットアプリ
WebSocket + Node.jsでつくるチャットアプリ
 
10th jan 2013_miyazaki
10th jan 2013_miyazaki10th jan 2013_miyazaki
10th jan 2013_miyazaki
 
Chromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそうChromebook 「だけ」で WebRTCを動かそう
Chromebook 「だけ」で WebRTCを動かそう
 
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
ブラウザからWeb OSへ〜Web - TV連携事例からその可能性を探る〜
 
WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装WebRTCとPeer.jsを使った実装
WebRTCとPeer.jsを使った実装
 
Webrtc最新動向
Webrtc最新動向Webrtc最新動向
Webrtc最新動向
 
AndroidでWebSocket
AndroidでWebSocketAndroidでWebSocket
AndroidでWebSocket
 
WebRTCについて
WebRTCについてWebRTCについて
WebRTCについて
 
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Sensibleを試してみた@FxOSコードリーディングミートアップ#16Sensibleを試してみた@FxOSコードリーディングミートアップ#16
Sensibleを試してみた@FxOSコードリーディングミートアップ#16
 
SocketStream入門
SocketStream入門SocketStream入門
SocketStream入門
 
Magic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみたMagic Leap で WebRTC 触ってみた
Magic Leap で WebRTC 触ってみた
 
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
HTML5と WebSocket / WebRTC / Web Audio API / WebGL 技術解説
 
Interop Tokyo 2021 - ShowNet を陰で支えた Azure Virtual WAN
Interop Tokyo 2021 - ShowNet を陰で支えた Azure Virtual WANInterop Tokyo 2021 - ShowNet を陰で支えた Azure Virtual WAN
Interop Tokyo 2021 - ShowNet を陰で支えた Azure Virtual WAN
 
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
最新Web 通信系API総まくり!WebRTC, Streams, Push api etc.
 
【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来【17-A-5】ウェブアーキテクチャの歴史と未来
【17-A-5】ウェブアーキテクチャの歴史と未来
 
Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会Gmo media.inc 第9回西日本ossの普及を考える会
Gmo media.inc 第9回西日本ossの普及を考える会
 
20120525 mt websocket
20120525 mt websocket20120525 mt websocket
20120525 mt websocket
 
はじめてのWeb of Things
はじめてのWeb of ThingsはじめてのWeb of Things
はじめてのWeb of Things
 

Dernier

Dernier (7)

NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
 
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイスLoRaWANスマート距離検出センサー  DS20L  カタログ  LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
 
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
 
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
 
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアルLoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
 
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
 
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半        2024/04/26の勉強会で発表されたものです。新人研修 後半        2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
 

websocket-survery