みんなで同時プレイするクイズWebアプリで

CodeQuizに挑戦！― オープンソースライブラリで実現するリアルタイムWebアプリ ―

オープンソースカンファレンス 2013 Hokkaido

CLR/H プレゼンツ

At first...

• Twitter, facebook 等への SNS投稿歓迎

• ハッシュタグは #clrh84でよろしくおねがいします。

Let me introduce myself.自己紹介させていただきます

勉強会コミュニティ

CLR/H

WhyCodeQuiz?なぜコードクイズ?

勉強会コミュニティ & 宿泊イベント

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

SignalRhttps://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!ネットに公開してみよう!

AppHarborhttps://appharbor.com/

Git

Conclusionまとめ

SignalR is useful & wonderful!

• Webアプリで、Webサーバー側からブラウザへ呼び出しを発射できる

• Long Poling からWebsocket まで、通信技術を意識しないでできる

• サーバー側環境とか相手先デバイスとか関係なくできる

• 通信のための設定とか不要でできる

• すべてSignalRが実行時に環境に応じて最適にやってくれる

Learn, Practice, Share.

&

Fork, Commit, Pull request.

Thank you!