[ASP.NET Core MVC][SignalR][Socket] 網頁即時更新最新股價教學 #CH2

[ASP.NET Core MVC][SignalR][Socket] 網頁即時更新最新股價教學 #CH2

此範例會教學如何在 ASP.NET Core MVC 網頁上即時顯示股價,這讓網頁看起來很像看盤軟體,輸入商品代碼後,網頁會即時更新最新的報價。

上一章節我們建立了報價機,利用 Console 串接群益 API 讀取報價,然後再建立 Socket Server 提供其他程式串接報價。
這章節我們會建立網頁串接報價機的 Socket 接口,讀取報價後同步顯示到網頁上。

建立專案

開啟 Visual Studio 2022,建立新專案為「ASP.NET Core Web 應用程式 (Model-View-Controller)」。

ASP.NET Core Web 應用程式 (Model-View-Controller)

輸入專案名稱,我們這次的範例名稱是 “TeachQuoteWeb”、路徑,架構選擇「.NET 6.0」版本,按下「建立」就會建立此專案。

加入 Vue3 套件

Vue3 是前端控制欄位的框架類別庫,打開 \Views\Shared\_Layout.cshtml 檔案,在下方 JavaScript 引用增加 Vue3 類別庫語法,順序的要求要放在 jQuery 之後才行。

<script src="https://unpkg.com/vue@3"></script>

加入 Vue3 套件

當在 Layout 加上 Vue3 引用後,我們就可以在所有的頁面使用 Vue3 語法了,此引用語法來源可參考官方文件

停用 Json 回傳預設小寫設定

.NET Core 在 Controller 回傳 Json 時,會將變數修改為開頭預設小寫 (駝峰式命名),這設定容易造成前端取值大小寫問題,所以我會停用此設定,讓前端與後端維持相同大小寫設定。

在 Program.cs 加入以下語法:

停用 Json 回傳預設小寫設定

新增 SignalR 用戶端程式庫

SignalR 前端需要 JavaScript 的類別庫才能運作,而後端的 SignalR 已包含在 ASP.NET Core 共用架構中。
這裡要先下載最新版的 signalr.js 到我們的專案內。

在「方案總管」中,以滑鼠右鍵按一下專案,然後選取「加入 > 用戶端程式庫」。

新增 SignalR 用戶端程式庫

針對提供者選取「unpkg」
針對「程式庫」輸入「@microsoft/signalr@latest」
選取「選擇特定檔案」,展開「dist/browser」資料夾,然後選取「signalr.js」和「signalr.min.js」。
將「目標位置」設定為「wwwroot/js/signalr/」

新增 SignalR 用戶端程式庫

安裝之後,在你的專案目錄下就會找到這些檔案。

新增 SignalR 用戶端程式庫

建立 SignalR Hub 類別

SignalR 的 Hub 類別可以處理網頁上用戶端與伺服器端之間的溝通橋樑。

在專案的目錄中新增目錄,名稱為「Hubs」。
然後在「Hubs」目錄下新增新類別,名稱為「QuoteHub」。

建立 SignalR Hub 類別

然後在 QuoteHub 類別貼上以下程式碼:

報價操作類別 QuoteUtil

在程式碼中有用到新類別 QuoteUtil,我將所有與報價機連線要用到的方法都封裝寫在 QuoteUtil 裡面。
QuoteUtil 新類別同樣新增放在 /Hubs 目錄內。
在 QuoteUtil 類別內加入此語法:

Model 與 Socket 傳遞類別

我將 Socket 所傳遞的內容都宣告成不同的類別,在傳送時,先將物件轉換成 Json,再轉換成 Byte[] 後傳送。
當收到 Byte[] 時反向處理,將 Byte[] 轉 Json,再轉成物件。

我在 /Hubs 底下建了一個 “Models” 新目錄,將會用到類別都放在這裡,此部份跟第一章節用到的類別是一樣的。
在這個範例我會用到兩個報價類別,分別是 Tick 和 Best5 ,一個使用者類別 ClientInfo,一個報價需求類別 RequestQuotePacket,但是我針對傳送的類別宣告一個介面 (interface) 來規範必要欄位。

新增介面: IPacket

新增類別: TickPacket

新增類別: Best5Packet

新增使用者類別: ClientInfo

新增報價需求類別: RequestQuotePacket

新增使用者訂閱類別: UserRquest

接著就可以把 QuoteUtil 有用到的類別加入引用。

註冊 SignalR 服務

開啟 Program.cs 檔案,這裡要啟用 SignalR 服務,然後註冊 Hub 路由。
在 Program.cs 的 var app = builder.Build(); 語法之前,加入此語法:

//加入 SignalR
builder.Services.AddSignalR();

在 app.Run(); 語法之前,加入此語法:

//加入 Hub
app.MapHub<QuoteHub>("/quoteHub");

註冊 SignalR 服務

前端 View 頁面

接著我在 MVC 的主頁面 Home/Index 設計範例,因為 MVC 是分層架構,所以寫程式碼的位置也會跳來跳去的,我會依順序在不同頁面慢慢增加程式碼。

打開 \Views\Home\Index.cshtml,先清空原有程式碼,然後貼上此語法:

Controller 頁面

在 View 按下「訂閱報價」後,會呼叫「~/Home/RequestQuote」,所以打開 \Controllers\HomeController.cs,然後加入以下 Action:

Controller 引用 Hub

我們在 Controller 收到的報價需求會傳送到 QuoteUtil 此類別去執行,同時將 Hub 物件傳送到 QuoteUtil 裡面去,將收到報價後,在 QuoteUtil 就直接回傳到前端 SignalR 顯示畫面。

在 HomeController 的建構子要引用 QuoteHub 物件,再丟到 QuoteUtil 裡面。
修改後的 HomeController 建構子是:

Controller 引用 Hub

測試專案

寫到這裡,我們的網頁客戶端程式碼就完成了,要測試此程式,要搭配上一章的伺服器程式才行,先將上一個範例 “TeachQuoteServer” 程式執行,執行前記得修改群益的帳號密碼,可以正常登入。

執行後就會有此畫面。

測試專案

接著執行我們這次的範例,網頁打開後,輸入要查詢的商品代碼後,按「訂閱報價」,就會即時更新股價了。

測試專案

完成此範例,單純顯示股價,其實沒有大太實際的幫助,但這是往下一步開發之前,最重要的一步,可以在網頁即時更新股價後,就可以做很多的即時應用,也祝各位在程式交易都可以順利。

範例下載

連結 GitHub 下載範例

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG