Download to read offline
みんなで同時プレイする クイズWebアプリで CodeQuizに挑戦! ― オープンソースライブラリで実現するリアルタイムWebアプリ ― オープンソースカンファレンス 2013 Hokkaido CLR/H プレゼンツ
At first... • Twitter, facebook 等への SNS投稿歓迎 • ハッシュタグは #clrh84でよろしくおねがいします。
Let me introduce myself. 自己紹介させていただきます
勉強会コミュニティ CLR/H
Why CodeQuiz? なぜコードクイズ?
勉強会コミュニティ & 宿泊イベント Code 2013 in 定山渓
QUIZ WEBAPP Let’s Play! 早速プレイ!
http://goo.gl/Do4RLU
https://github.com/jsakamoto/quiz-webapp GNU GPL v2 License
How does it work? 仕組み
ASP.NET SignalR https://github.com/SignalR/SignalR Apache 2.0 License
SignalR Supported Transport •WebSoket •Server-Sent Events •Forever Frame •Long polling
Let’s build it! 作ってみよう!
Express 2012 for Web http://www.microsoft.com/visualstudio/jpn/ downloads#d-express-web
How to implementation? 実装
Browser Server
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
Browser Server public class Hub1 : Hub { public void Foo(bool newState) { } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } Browser Server $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); });
$(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
$(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
$(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
$(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); hub1.on('Bar', function (newState) { alert(newState); }); conn.start(); }); public class Hub1 : Hub { public void Foo(bool newState) { Clients.All.Bar(newState); } } $(function () { var conn = $.hubConnection(); var hub1 = conn.createHubProxy('Hub1'); conn.start(); var state = false; $('#button').click(function(){ state = !state; hub1.invoke('Foo', state); }); }); Browser Server
https://github.com/sample-by-jsakamoto/SampleOfSignalR GNU GPL v2 License
Let’s Publish It! ネットに公開してみよう!
AppHarbor https://appharbor.com/
Git
Conclusion まとめ
SignalR is useful & wonderful! • Webアプリで、Webサーバー側からブラウザへ呼び出しを発射できる • Long Poling から Websocket まで、通信技術を意識しないでできる • サーバー側環境とか相手先デバイスとか関係なくできる • 通信のための設定とか不要でできる • すべてSignalRが実行時に環境に応じて最適にやってくれる
Learn, Practice, Share. & Fork, Commit, Pull request. Thank you!