[ASP.NET Core SignalR] 即時對話聊天室教學 #CH1

SignalR 是 ASP.NET 實現網頁雙向溝通的一種方式,傳統的網頁是單向溝通,只能由客戶端主動發送訊息至伺服器端,而雙向溝通就可以由伺服器端主動發送訊息至客戶端,可以解決網頁即時同步的問題。

SignalR 應用的場景非常多,舉凡需要即時同步的場合都適用,例如遊戲、股價、聊天室、投票、拍賣、監控等等,如果學會此技能,就可在網頁上做出更豐富的變化。

SignalR 提供網頁雙向傳輸協定 WebSocket 的簡化方式,讓開發者可以快速完成雙向溝通網頁。

這篇文章將會教學基礎 SignalR 使用方式,範例環境是 ASP.NET Core 6.0 ,在網頁上製作聊天對話的功能。

建立專案

開啟 Visual Studio,在新增專案範本時,要選擇「ASP.NET Core Web 應用程式」或是「ASP.NET Core Web 應用程式 (Model-View-Controller)」都是可以的,而我通常是選擇有 MVC 的專案範本

建立專案

輸入專案名稱、路徑。
架構選擇「.NET 6.0」版本,按下「建立」就會建立此專案。

架構選擇「.NET 6.0」版本,按下「建立」就會建立此專案

新增 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」目錄下新增新類別,名稱為「ChatHub」。

建立 SignalR Hub 類別

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

方法 OnConnectedAsync() 是每一個用戶連線後,都會觸發的事件,在這事件裡面可以更新用戶列表。
而方法 OnDisconnectedAsync() 則是每一個用戶離線會觸發的事件。

設定 SignalR

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

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

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

//加入 Hub
app.MapHub<ChatHub>("/chatHub");

設定 SignalR

SignalR 用戶端程式碼

接著就要編寫前端的程式碼,我們範例就直接寫在首頁上教學。
開啟 \Views\Home\Index.cshtml 檔案,可以清除原有全部程式碼,然後貼上以下語法:

這裡簡單製作了聊天室的畫面,每一位連線到 SignalR 的用戶,都會得到一組 ID,我們範例就將此 ID 做為用戶名稱,在實務專案時,可以將此 ID 隱藏在背後傳遞。

測試專案

做到這裡就可以按 F5 測試一下專案,初次進入聊天室,我們將用戶 ID 顯示在畫面上。

初次進入聊天室,我們將用戶 ID 顯示在畫面上

當有第二個用戶進入時,會同步更新連線 ID 列表。

當有第二個用戶進入時,會同步更新連線 ID 列表

在傳送訊息時,未輸入指定 ID 時為所有人都收到,當輸入指定 ID 時,則為私人訊息。

在傳送訊息時,未輸入指定 ID 時為所有人都收到,當輸入指定 ID 時,則為私人訊息

你也可以試試看,學會 SignalR 就可以讓網頁互動性更豐富,這是一個簡單基本的 SignalR 即時聊天室教學,分享給你。

範例下載

付費後可下載此篇文章教學程式碼

下一篇教學文章

相關學習文章

如果你在學習上有不懂的地方,可以參考專業諮詢或線上家教服務,我想辨法解決你的問題
如果文章內容有錯誤的地方,幫我在下方留言通知我一下,謝謝
喜歡我的文章,請幫我在上方綠色拍手圖示按 5 下,也歡迎按月贊助,鼓勵我繼續創作,謝謝

加入社團一起討論

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

1 × four =