asp.net core 3.0 使用SignalR

廢話不多說，直接上操作清單：

1、建立Asp.net core 3.0項目。步驟省略

2、添加引用Microsoft.AspNetCore.SignalR 直接使用Nuget添加

3、添加類文件ChatHub繼承Hub（中心）。代碼如下：

using Microsoft.AspNetCore.SignalR;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SignalRDemo.Models
{
    /// <summary>
    /// 中心類
    /// </summary>
    public class ChatHub: Hub
    {
       /// <summary>
       /// 客戶端調用方法
       /// </summary>
       /// <param name="data"></param>
       /// <returns></returns>
        public Task SendMessage(ChatMessageInfo data)
        {
            //服務端返回是調用方法
            return Clients.All.SendAsync("ReceiveMessage", data);
        }
        
        public Task SendMessageToCaller(string message)
        {
            return Clients.Caller.SendAsync("ReceiveMessage", message);
        }

        public Task SendMessageToGroup(string message)
        {
            return Clients.Group("SignalR Users").SendAsync("ReceiveMessage", message);
        }

       
    }
}

ChatMessageInfo 類：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;

namespace SignalRDemo.Models
{
    public class ChatMessageInfo
    {
        public string UserName { get; set; }
        public string Message { get; set; }
    }
}

4、修改配置Startup，紅色字體是新增項

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using SignalRDemo.Models;

namespace SignalRDemo
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.Configure<CookiePolicyOptions>(options =>
            {
                options.CheckConsentNeeded = context => true;
                options.MinimumSameSitePolicy = SameSiteMode.None;
            });
            services.AddControllersWithViews();
            //運行跨域配置
            services.AddCors(options => options.AddPolicy("CorsPolicy",
            builder =>
            {
                builder.AllowAnyMethod().AllowAnyHeader()
                       .WithOrigins("http://localhost:54916") .AllowCredentials(); })); services.AddSignalR();

        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
            }
            app.UseStaticFiles();

            app.UseRouting();

            app.UseAuthorization();
            app.UseCors("CorsPolicy");
           
            app.UseEndpoints(endpoints =>
            {
               endpoints.MapHub<ChatHub>("/ChatHub");
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}

 

5、添加SignalR.js.  Vs右鍵項目/添加/客戶端庫

步驟2：

最終目錄生產文件：

6、編寫html頁面、我就網上Copy一個測試

@{
    ViewData["Title"] = "測試SignalR";
}

    <div class="text-center">
        <ul class="form-group" id="messagesListUl" style="margin-bottom:20px"></ul>

        <form>
            <div class="form-group">
                <label for="username">key:</label>
                <input type="text" class="form-control" id="username" name="username">
            </div>
            <div class="form-group">
                <label for="msgcontent">Value:</label>
                <textarea rows="5" cols="20" id="msgcontent" name="msgcontent" class="form-control"></textarea>
            </div>
            <input type="button" onclick="btnSendMsg()" value="發送">
        </form>

  
    </div>
<script type="text/javascript" src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script>
        const connection = new signalR.HubConnectionBuilder()
        .withUrl("/ChatHub")
        .configureLogging(signalR.LogLevel.Information)
        .build();

         connection.start().then(function(){
                            console.log("連接成功");
                        }).catch(function(ex){
                            console.log("連接失敗"+ex);
                            //SignalR JavaScript 客戶端不會自動重新連接，必須編寫代碼將手動重新連接你的客戶端
                            setTimeout(() => start(), 5000);
                        });
    

    async function start() {
        try {
            await connection.start();
            console.log("connected");
        } catch (err) {
            console.log(err);
            setTimeout(() => start(), 5000);
        }
    };

     connection.onclose(async () => {
        start();
    });
 
    
    //綁定事件("ReceiveMessage"和服務器端的SendMessage方法中的第一個參數一致)
    //服務器端調用客戶端
    connection.on("ReceiveMessage", function (data) {
        alert("返回");
        const li = document.createElement("li");
        li.innerText = data.userName + " : " + data.message;
        document.getElementById("messagesListUl").appendChild(li);
    });
    //調用服務器端
    function btnSendMsg() {
        alert(11);
        var UserName = $.trim($("#username").val());
        var Message = $.trim($("#msgcontent").val());
        
        connection.invoke("SendMessage", {UserName,Message}).catch(err => console.error("發送失敗："+err.toString()));
    }







    

</script>

最終一切順利。希望能幫助到大家