twMVC #17– SignalR 實戰技巧

Dino Wang

http://mvc.tw

Dino Wang 王育民

2

禾盛數碼 hexdigits

Microsoft Azure MVP

Microsoft TechDays

2013, 2014 講師

twMVC

共同創辦人

核心講師

我的技能樹 Skilltree

專任講師

Yahoo!奇摩 x 華人健康網

年逾 2 億瀏覽量

日均 55 萬 Page Views

月 200 萬不重複瀏覽

ASP.NET MVC 5 開發美學

共同作者

天瓏中文圖書銷售第一

實體書已二刷

電子版發售中

大陸版權簽約中

http://mvc.tw

Real-Time Web (Wikipedia)

“The real-time web is a set of technologies and practices

which enable users to receive information as soon as it is

published by its authors, rather than requiring that they

or their software check a source periodically for updates.”

讓使用者盡快的得到資訊的技術與實踐

即時互動網站

3

即時技術應用 – Trello

4

即時技術應用 – Analytics

5

即時技術應用 – UBER 優步

6

即時技術應用 – 5284 我愛巴士

7

http://mvc.tw

基於 ASP.NET 框架的 Real-Time Web 技術。

一套介於 Web 與 Client 間的即時通訊機制。

自動選用最適當的通訊方式來實踐即時通訊。

提供抽象化的介面以及 API以進行程式設計，開發者可以不

必過於擔心伺服器和用戶端間的連線細節。

SignalR 與即時互動網站

8

http://mvc.tw

支援多種連線方式 Protocol Negotiation

連線管理 Connection Management

已具備多平台程式庫 Multiple Platform

可自我裝載 Self-Hosting 於 OWIN 架構 (不需 IIS)

SignalR 重點特色

9

http://mvc.tw

Comet transports

AJAX Long Polling

Forever Frame

HTML 5 transports

Server-Sent Events

Web Sockets

SignalR 支援的通訊方式

10

http://mvc.tw

即時互動 Games

訊息傳遞 Messaging、 Social Network

即時監視 Monitoring、IoT

數位儀表板 Digital Dashboard

即時互動技術常見場景

11

http://mvc.tw

以公開 API 實作即時公車資訊服務

主要功能

查詢公車行駛路線圖

揭露公車即時定位資訊

揭露其他使用者的即時定位資訊 （順便做的）

BusR

12

BusR

13

BusR

14

BusR

15

BusR

16

http://mvc.tw

BusR

即時互動網站 提供公車路線查詢、公車動態追蹤、線上其他使用者定位

BusR.Models

定義各專案所需要的 模型 暨 資料存取層

BusR.Import

透過公開 API 匯入公車路線、停靠站、行駛路線的 資料匯入程式

BusR.Console

公車動態代理查詢程式

BusR – Solution Structure

17

http://mvc.tw

ASP.NET MVC

整個網站應用程式的骨架

Entity Framework

採用 Code First 開發，快速的完成 ORM 資料存取層

ASP.NET Web API

製作供前端程式 網頁、手機 查詢使用的 API

以 Attribute Routing 設計 URL

ASP.NET SignalR

傳遞即時訊息的 開發方法

BusR – Skills

18

19

BusR 網站起步走

http://mvc.tw

Entity Framework Code First

寓 Database Schema 於程式，並自動的維護資料庫的快速開發方法

快速方便、一條龍（相對於 Database First）

Data Migration

啟用自動 Database Schema 升級

相關命令 (套件管理員視窗執行)

Enable-Migration

Add-Migration

Update-Database

BusR 資料存取層

20

21

為 BusR 加入資料存取層

22

為 BusR 加入資料匯入程式

http://mvc.tw

透過 Web API 完成網站應用程式的高互動性

Web API

支援各種「端」的資料格式需求，JSON、XML、BSON、…

Attribute Routing

相較於預設的 Convention-Based routing，Attribute Routing 有更強

大、彈性的設計方式

Cache

高效應用程式必備的 Web API 快取處理

使用者界面

23

24

為 BusR 加入 UI 互動元素

http://mvc.tw

在 ASP.NET 我們透過 SignalR 提供即時互動網站體驗

SignalR 提供的豐富特性

連線管理

透過 SignalR client library 自動地管理斷線後重新連線

自動選擇最佳連線方式

WebSocket、Server Sent Event、Forever Frame、AJAX Long Pooling

廣播與群組通訊

管理訊息通道，可區分不同受眾

製作即時互動的部分

25

http://mvc.tw

用戶訂閱其他使用者動態

BusR 中的 SignalR 訊息傳遞模型 1

26

http://mvc.tw

用戶訂閱公車動態

BusR 中的 SignalR 訊息傳遞模型 2

27

http://mvc.tw

SignalR 中開發者主要使用 Hub 來進行訊息傳送與接收

Hub 適合擔任的工作

收到來自使用者的訊息

傳遞給相關的使用者

不建議在 Hub 上有複雜的運算以及外部

資源取得，以拖垮 Hub 傳遞其他訊息的效能

訊息中樞 Hub

28

29

實作即時訊息部分

http://mvc.tw

Hub Proxy (Client/Server)

CLIENT (JavaScript)

var chatHub = $.connection.routeHub;

routeHub.server.keepAlive(…);

routeHub.client.notifyUser = function (…) {

// …

};

routeHub.client.notifyUserQuit = function (…) {

// …

};

route.server.register(…);

30

SERVER (Hub)

http://mvc.tw

取代動態產生的 Hub Proxy

<script src="~/signalr/hubs"></script>

NuGet SignalR Utility

Microsoft.AspNet.SignalR.Utils

套件管理員視窗

signalr ghp /path:<DLL path> /o:<Output>

Output: 指定檔名或目錄（自動命名 server.js）

優化，靜態 JavaScript Hub Proxy

31

http://mvc.tw

好活動需要支持

感謝 KKTIX 贊助 twMVC 活動報名平台

32

http://mvc.tw

好輸入法需要露出

33

http://skilltree.my/Sponsor/xin_zi_ran

http://mvc.tw

好課程需要支持

34

http://skilltree.my

謝謝各位

• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用姓名標示-非商業性-相同方式分享 3.0 台灣授權。閱讀本授權條款，請到

http://creativecommons.org/licenses/by-nc-sa/3.0/tw/，或寫信至Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.

h t t p : / / m v c . t w