asp.net core 中的SignalR與web前端進行實時通信

一、介紹

---

SignalR是.net 開源庫，用於構建需要實時進行用戶交互和數據更新的web應用，如在線聊天，游戲，天氣等實時應用程序，且簡化了構建實時應用的過程，包括服務端庫和js端庫，繼承了數種常見傳輸方式，如long polling，websocket等，並提供相應的api供開發人員選擇。項目的流程圖如下：

 

二、項目實操

---

1、新創建一個.net core 2.2 web application 項目

2、添加SignalR客戶端文件

在添加這個文件時按照官方給出的步驟操作，我的vs一直會卡主，因此我直接從其他項目復制過來，然后放在wwwroot文件夾下面的lib/signalr下，我復制了signalr.js和signalr.min.js文件即可。

文件請移步至我的github上下載案例。

 

3、創建SignalR中心
此中心用來客戶端與服務端的溝通橋梁。又叫做高級管道。
新建一個文件夾命名為SignalRChat，然后創建一個類，如ChatHub，此類繼承與Hub
Hub 類管理連接、組和消息。

using Microsoft.AspNetCore.SignalR;
using System.Threading.Tasks;

namespace SignalRChat.Hubs
{
    public class ChatHub : Hub
    {
        public async Task SendMessage(string user, string message)
        {
            await Clients.All.SendAsync("ReceiveMessage", user, message);
        }
    }
}

特別注意在服務中心中的這個"ReceiveMessage"，是可以傳參的，如修改成一下的方式：

 public async Task SendMessage(string method,string user, string message)
        {
            await Clients.All.SendAsync(method, user, message);
        }

 

4、在項目中的startup.cs 注入SignalR的配置。
在ConfigureServices 中注入signalr到container中。

public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                // This lambda determines whether user consent for non-essential cookies is needed for a given request.
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });


            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
            services.AddSignalR();
        }

在Configure 中注入中間件

 app.UseSignalR(a=> 
            {
                a.MapHub<ChatHub>("/chatHubs");
            }); 

5、服務端已經配置完成，接下來輪到 前端配置了。
前端頁面中需要添加 Signalr.js文件以及我們自定義的chat.js此腳本用來連接SignalR以及發送接收用的數據用的。
注：下圖中的兩處標紅的位置名稱要一致，否則會造成數據無法接收，這邊的名稱就是在SignalR中心中的自定義的方法標簽。

 

6、可以運行應用
我開了兩個頁面，一個發送，一個就可以接收了。

 

至此，SignalR簡單demo已OK

三、總結

---

 此案例之間簡單的進行通信，還沒有涉及到數據安全、身份驗證和授權等。后期將會繼續深入研究。

 

github-demo：https://github.com/LouieGuo/SignalRLouie

參考文檔：入門：https://docs.microsoft.com/zh-cn/aspnet/core/tutorials/signalr?tabs=visual-studio&view=aspnetcore-2.2

 

asp.net core 交流群：787464275 歡迎加群交流
如果您認為這篇文章還不錯或者有所收獲，您可以點擊右下角的【推薦】按鈕精神支持，因為這種支持是我繼續寫作，分享的最大動力！

作者：LouieGuo

聲明：原創博客請在轉載時保留原文鏈接或者在文章開頭加上本人博客地址，如發現錯誤，歡迎批評指正。凡是轉載於本人的文章，不能設置打賞功能，如有特殊需求請與本人聯系！

微信公眾號：歡迎關注                                                 QQ技術交流群： 歡迎加群