SlideShare a Scribd company logo
1 of 44
Download to read offline
•
•

•
•

•
•
•
•
•
•

•
•
•
olojp.net

•
•
•
•
•
•
•
•
•
“
”
• サーバの変化

リアルタイム
•
•

※イメージと概念です。
(実際に、これから説明するような仕組みに準じているかは知りません:p)
•

bit.ly/olo26-3
•

shootr.signalr.net
•
•
•
•
Request
「データくださいな!」

Response
「はい、どうぞ!」
クライアント

サーバ
•

「データをどうぞ」

クライアント

サーバ
•
•
•

•
「変更ある?」
「ない」
「変更ある?」
「あったよ!」

クライアント

サーバ
•
•
•

•
•
•
•
•
•
•
•
•
タイムアウトを長くし、
応答を保留
「変更ある?」

「今んとこない」

「変更ある?」
クライアント

「キタコレ」

サーバ
変更があったら即、
応答
•
•

•
•

•
•
•
•
•
•
•
•
•
WebSocketの
コネクション作成

クライアント

お互い、
任意のタイミングで
サーバ
通信を投げる
•
•
var ws;

// 接続
ws = new WebSocket('ws://hoge.server.com/ServerApp/');
// 通信が来た時の処理
ws.onmessage = function(e) {
// サーバから通信が来た時の処理を書く
alert(e.data);
};

// データの送信(sentDataに送るデータが入ってるとして)
ws.send(sentData);
•
•
•
•
•
•

•

•
•
•
•

•
•
•
•
•
•

•
•
•
•
•
•

•
•
•

•
•

•
•

•
•
•
•
•
•
•

•
•
•
•
•
•
•
•
•
•
•
•

•
•
•
•
全部つなげてリアルタイム通信できるとか、楽しくない??
最近、リアルタイムWebが面白い

More Related Content

Viewers also liked

More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークJun-ichi Sakamoto
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartFilipe Falcão
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んでShumpei Shiraishi
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programmingmaruyama097
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像Akira Inoue
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門Shumpei Shiraishi
 
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Jun-ichi Sakamoto
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るShumpei Shiraishi
 
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Kazuhide Maruyama
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Akira Inoue
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカShumpei Shiraishi
 
One ASP.NET の今とこれから
One ASP.NET の今とこれからOne ASP.NET の今とこれから
One ASP.NET の今とこれからAkira Inoue
 
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。Toshio Ehara
 
AngularJS+TypeScript - AngularJS 1周年記念勉強会
AngularJS+TypeScript - AngularJS 1周年記念勉強会AngularJS+TypeScript - AngularJS 1周年記念勉強会
AngularJS+TypeScript - AngularJS 1周年記念勉強会Masahiro Wakame
 
TypeScriptで作る型安全FirefoxOSアプリ
TypeScriptで作る型安全FirefoxOSアプリTypeScriptで作る型安全FirefoxOSアプリ
TypeScriptで作る型安全FirefoxOSアプリprogre
 

Viewers also liked (20)

More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトークMore Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
More Azure Websites! - JAZUGさっぽろ "きたあず" 第5回勉強会ライトニングトーク
 
AngularJS 2.0 Jumpstart
AngularJS 2.0 JumpstartAngularJS 2.0 Jumpstart
AngularJS 2.0 Jumpstart
 
Gulp ことはじめ
Gulp ことはじめGulp ことはじめ
Gulp ことはじめ
 
20130921レジュメ2
20130921レジュメ220130921レジュメ2
20130921レジュメ2
 
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクトHTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
 
Reactive Programming
Reactive ProgrammingReactive Programming
Reactive Programming
 
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
ASP.NET vNext / Visual Studio "14" に見る .NET の未来像
 
TypeScript And ALM
TypeScript And ALMTypeScript And ALM
TypeScript And ALM
 
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
 
Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編Ohotech特盛#14 セッション4 予告編
Ohotech特盛#14 セッション4 予告編
 
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探るWebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
 
Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)Typescriptの中のこと(浅め)
Typescriptの中のこと(浅め)
 
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
Linux & Mac OS でも動く! ~ オープンソース & クロスプラットフォーム .NET の歩き方 ~
 
変身×フランツ・カフカ
変身×フランツ・カフカ変身×フランツ・カフカ
変身×フランツ・カフカ
 
One ASP.NET の今とこれから
One ASP.NET の今とこれからOne ASP.NET の今とこれから
One ASP.NET の今とこれから
 
AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。AngularJS+TypeScriptを試してみた。
AngularJS+TypeScriptを試してみた。
 
AngularJS+TypeScript - AngularJS 1周年記念勉強会
AngularJS+TypeScript - AngularJS 1周年記念勉強会AngularJS+TypeScript - AngularJS 1周年記念勉強会
AngularJS+TypeScript - AngularJS 1周年記念勉強会
 
TypeScriptで作る型安全FirefoxOSアプリ
TypeScriptで作る型安全FirefoxOSアプリTypeScriptで作る型安全FirefoxOSアプリ
TypeScriptで作る型安全FirefoxOSアプリ
 

More from Narami Kiyokura

SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話Narami Kiyokura
 
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後Narami Kiyokura
 
How do you like knockout?
How do you like knockout?How do you like knockout?
How do you like knockout?Narami Kiyokura
 
Windows ストアアプリを HTMLで作成する
Windows ストアアプリをHTMLで作成するWindows ストアアプリをHTMLで作成する
Windows ストアアプリを HTMLで作成するNarami Kiyokura
 
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"Narami Kiyokura
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発Narami Kiyokura
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Narami Kiyokura
 
軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancyNarami Kiyokura
 
脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1Narami Kiyokura
 
最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter最近のASP.NET事情2013Winter
最近のASP.NET事情2013WinterNarami Kiyokura
 
軽量フレームワークNancy
軽量フレームワークNancy軽量フレームワークNancy
軽量フレームワークNancyNarami Kiyokura
 
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみたADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみたNarami Kiyokura
 
よろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだよろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだNarami Kiyokura
 
WebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページWebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページNarami Kiyokura
 
使ってみよう、WebMatrix3
使ってみよう、WebMatrix3使ってみよう、WebMatrix3
使ってみよう、WebMatrix3Narami Kiyokura
 
NuGetの社内利用のススメ
NuGetの社内利用のススメNuGetの社内利用のススメ
NuGetの社内利用のススメNarami Kiyokura
 
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介Narami Kiyokura
 

More from Narami Kiyokura (18)

SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
SQL Server のプロジェクト指向オフライン データベース開発を採用してみた話
 
どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後どうなる?Visual Studioの クライアントサイド web開発の今後
どうなる?Visual Studioの クライアントサイド web開発の今後
 
How do you like knockout?
How do you like knockout?How do you like knockout?
How do you like knockout?
 
Windows ストアアプリを HTMLで作成する
Windows ストアアプリをHTMLで作成するWindows ストアアプリをHTMLで作成する
Windows ストアアプリを HTMLで作成する
 
ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"ASP.NET "NOW" and "NEXT"
ASP.NET "NOW" and "NEXT"
 
無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発無償版Visual StudioでいろいろWeb開発
無償版Visual StudioでいろいろWeb開発
 
Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門Visual Studioで始めるTypeScript開発入門
Visual Studioで始めるTypeScript開発入門
 
軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy軽量ASP.NETフレームワークNancy
軽量ASP.NETフレームワークNancy
 
脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1脱・Excelホーガンシのために、その1
脱・Excelホーガンシのために、その1
 
最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter最近のASP.NET事情2013Winter
最近のASP.NET事情2013Winter
 
軽量フレームワークNancy
軽量フレームワークNancy軽量フレームワークNancy
軽量フレームワークNancy
 
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみたADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
ADO.NETとORMとMicro-ORM -dapper dot netを使ってみた
 
よろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだよろしい、ならばMicro-ORMだ
よろしい、ならばMicro-ORMだ
 
WebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページWebMatrixで遊ぶ-ゆるふわGitHubページ
WebMatrixで遊ぶ-ゆるふわGitHubページ
 
TypeScript超入門
TypeScript超入門TypeScript超入門
TypeScript超入門
 
使ってみよう、WebMatrix3
使ってみよう、WebMatrix3使ってみよう、WebMatrix3
使ってみよう、WebMatrix3
 
NuGetの社内利用のススメ
NuGetの社内利用のススメNuGetの社内利用のススメ
NuGetの社内利用のススメ
 
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
IMESupport for Sublime Text 2 / ConvertToUTF8の紹介
 

Recently uploaded

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介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.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 

Recently uploaded (9)

Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介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.pdfTSAL 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論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介: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...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 

最近、リアルタイムWebが面白い