This document discusses building a real-time quiz web application using the SignalR open source library. It begins with an introduction to SignalR and how it allows sending calls from a web server to browsers. It then demonstrates how to implement a simple real-time application with SignalR that updates a button state across all connected clients. The document concludes by encouraging learning, practicing, and sharing open source code.

1. みんなで同時プレイする
クイズWebアプリで
CodeQuizに挑戦！
― オープンソースライブラリで実現するリアルタイムWebアプリ ―
オープンソースカンファレンス 2013 Hokkaido
CLR/H プレゼンツ

2. At first...
• Twitter, facebook 等への SNS投稿歓迎
• ハッシュタグは #clrh84でよろしくおねがいします。

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

4. 勉強会コミュニティ
CLR/H

5. Why
CodeQuiz?
なぜコードクイズ?

6. 勉強会コミュニティ & 宿泊イベント
Code 2013 in 定山渓

7. QUIZ WEBAPP
Let’s Play!
早速プレイ!

8. http://goo.gl/Do4RLU

9. https://github.com/jsakamoto/quiz-webapp
GNU GPL v2 License

10. How does it
work?
仕組み

11. ASP.NET
SignalR
https://github.com/SignalR/SignalR
Apache 2.0 License

12. SignalR
Supported Transport
•WebSoket
•Server-Sent Events
•Forever Frame
•Long polling

13. Let’s build it!
作ってみよう!

14. Express 2012 for Web
http://www.microsoft.com/visualstudio/jpn/
downloads#d-express-web

15. How to
implementation?
実装

16. Browser Server

17. public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server

18. public class Hub1 : Hub
{
public void Foo(bool newState)
{
Clients.All.Bar(newState);
}
}
Browser Server

19. 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);
});
});

20. 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);
});
});

21. 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);
});
});

22. 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);
});
});

23. 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);
});
});

24. 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);
});
});

25. $(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

26. $(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

27. $(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

28. $(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

29. https://github.com/sample-by-jsakamoto/SampleOfSignalR
GNU GPL v2 License

30. Let’s Publish It!
ネットに公開してみよう!

31. AppHarbor
https://appharbor.com/

32. Git

33. Conclusion
まとめ

34. SignalR is useful & wonderful!
• Webアプリで、Webサーバー側からブラウザへ呼び出しを発射できる
• Long Poling から Websocket まで、通信技術を意識しないでできる
• サーバー側環境とか相手先デバイスとか関係なくできる
• 通信のための設定とか不要でできる
• すべてSignalRが実行時に環境に応じて最適にやってくれる

35. Learn, Practice, Share.
&
Fork, Commit, Pull request.
Thank you!