Upload
twmvc
View
876
Download
2
Embed Size (px)
DESCRIPTION
講者:Dino 講者簡介:現任微軟最有價值專家、twMVC 核心講者 簡介: SignalR 是一整套設計精良的 Web 通訊架構,整合了多種達成 Server 與 EndPoint 的連結方式 (Long Pooling、Server Sent Event、WebSocket)。 本議程在 ASP.NET MVC 上運用 SignalR 重現台北市公車動態揭示板的實作過程,您可以從中學習該如何在應用程式中設計運用 SignalR 的通訊方式,達成同時多使用者上線卻依然穩定的系統,在完成系統後,更展示與 Azure 的完美結合使得系統得到更高的可用性。 課程時間:70分鐘
Citation preview
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
謝謝各位
• 本投影片所包含的商標與文字皆屬原著作者所有。• 本投影片使用的圖片皆從網路搜尋。• 本著作係採用姓名標示-非商業性-相同方式分享 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