ASP.NET MVC 一教就上手建置Windows Azure雲端聊天室

Sky Chang

天空的垃圾場

AGENDA

ASP.NET MVC 基本架構 Real Time 架構 SignalR

使用 Knockout.js 架構 JavaScript 的 MVVM

將程式雲端上，使用微軟的 Windows Azure

ASP.NET MVC 基本架構

偉大的 ASP.NET 程式

使用者介面

商業邏輯 介面邏輯

SQL

我是一隻ASP.Net 包山

包地也包海

ASP.NET CODEBEHIND

這樣就夠了嗎 !?

ASP.NET 的缺點

因為有 ViewState 所以傳輸上過於笨重 渲染出來的 HTML 過於複雜 測試性不佳 ( 可以用 MVP 架構改進 )

什麼是 MVC

他是 UI 層 ( 展示層 ) 的 Design Patten( 設計樣式 ) 。 他是由 Model 、 View 、 Controller 所組成。 分離原本複雜的關係。

MODEL

MODEL 通常為資料模型，也可以是一個 DTO 通常裡面會放許多的商業邏輯。

View 頁面， HTML 、 CSS 、 JavaScript 皆屬於此區塊 於此頁面撰寫顯示邏輯是合理的

Controller 決定運作的流程 負責決定顯示哪一個 View 負責控制 Model 的傳遞

MVC 優點是什麼

三者有點黏，又不會太黏 Model 、 Controller 、 View ，三者之間可以某種程度的獨立開發 支援標準的 HTML 語法 不在使用 PostBack ( 沒有 ViewState) ，所以傳輸很輕量 容易測試的架構

那 ASP.NET MVC 是什麼 ?

MVC 是一個設計樣式的名詞，而 ASP.NET MVC 是擁有實作此設計樣式的Framework 的產品。

ASP.NET MVC 流程

• 使用者請求• 決定導向

Controller

Request

• Controller流程

• 決定 View

Controller • 取得傳遞進

來之資料• 顯示資料

View

網址的不同

ASP.NET

ASP.NET MVC

ASP.NET MVC 網址對應關係

優點

擁有更佳的 SEO

安全性提高 更加清晰的網址關係

實戰 ASP.NET MVC

建立一個 About 介紹頁 建立一個 Index 主頁 主頁要建立一個 Textbox

主頁要建立一個 Button

主頁要放置一個 ul 標籤

ASP.NET SIGNALRReal Time Web

時代的進步

HTTP 底下的模擬 POLLING

ASP.NET SIGNALR

封裝所有複雜的處理邏輯 快速的實現 Real Time Web

HOW WORK

Server Sent Events

Forever Frame

WebSocket

Long Polling

LONG POLLING

Cleint 進行連線後就不中斷 當 Server 返回時，會在建立新的連線

FOREVER FRAME

在 DOM 產生一個隱藏的 iframe

利用此 iframe 和 Server 進行連線 使用 HTTP1.1 的 chunked encoding 機制進行傳送

SERVER SENT EVENTS

HTML5

定義了 API 來打開一個 HTTP 連接 通過該連接能夠獲得 Server Push

新的 HTML 元素 EventSource

新的 MIME 類型 text/event-stream

WEBSOCKET

HTML5

不是建立在 HTTP 之上 將已經存在的 HTTP 連接轉換為 WebSocket 連接 直接在 TCP 之上定義了協議 WebSocket 定義了 API 和相應的協議 WebSocket API 規範中包含一個新的 HTML 元素： WebSocket

SIGNALR 兩種模式 – PERSISTENT CONNECTION & HUB

persistent connection 持久連線 進行廣播

HUB 類似 RPC Client 可以呼叫 Server 的 Function Server 可以呼叫 Client 的 Function

實戰 !! SIGNALR HUB

Install-Package Microsoft.AspNet.SignalR -pre

KNOCKOUT.JSJavaScript 的 MVVM 架構

KNOCKOUT.JS

實作了 JavaScript 的 MVVM 架構 利用了 Binding 的機制，自動更新 建構於 jQuery 之下

MVVM 架構

View 就是 html 區塊

ViewModel View 和 Model 的黏合劑，負責處理 View 的一切顯示邏輯 也負責將拿到的 Model ，顯示到 View

Model 資料模型

View 知道 ViewModel ， ViewModel 不知道 View

ViewModel 知道 Model ， Model 不知道 ViewModel

HTML 和 JS 的關係

實戰 !! 使用 KNOCKOUT.JS

將原本的程式碼改成 MVVM 架構

WINDOWS AZUREWeb Site

WINDOWS AZURE WEB SITE

雲端的 Web Server 服務 支援 .NET 4.5 、 NODE.JS 、 PHP 等眾多程式語言 可以利用 VS2012 、 FTP 等工具佈署 !!SignalR 要加上 long polling!!

實戰 !! 佈署到 WINDOWS AZURE WEB SITE

將現有程式碼佈署到 Windows Azure Web Site

恭喜大家

遺珠之憾

ASP.NET MVC 的 Model 沒有實作 SignalR只用到 Web

KO.js只使用到最簡單的應用 Windows Azure還有 VM 、 Cloud Service 更強大的應用

Q&A天空的垃圾場 blog.sanc.idv.tw