[asp.net core]SignalR一个例子

摘要

在一个后台管理的页面想实时监控一些操作的数据，想到用signalR。

一个例子

asp.net core+signalR

使用Nuget安装包：Microsoft.AspNetCore.SignalR

在StartUp中启用signalR

  // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
          //services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddCors(options => options.AddPolicy("CorsPolicy",
             builder =>
             {
                 builder.AllowAnyMethod().AllowAnyHeader()
                        .WithOrigins("http://localhost:55830")
                        .AllowCredentials();
             }));

            services.AddSignalR();
        }

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

            app.UseCors("CorsPolicy");
            app.UseSignalR(routes =>
            {
                routes.MapHub<NotificationHub>("/notifyHub");
            });

            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller=Home}/{action=Index}/{id?}/{w?}");
            });
        }

 public class NotificationHub:Hub
    {
    }

在api中，通过构造函数注入

 //[Produces("application/json")]
    [Route("api/Mail")]
    public class MailController : Controller
    {

        private IHubContext<NotificationHub> _hubContext;
        public MailController(
             IHubContext<NotificationHub> hubContext)
        {
            _mSMailUtil = mSMailUtil;
            _requestHelper = requestHelper;
            _webLogUtil = webLogUtil;
            _accessor = accessor;
            _hubContext = hubContext;
        }

        [HttpGet("send")]
        public IActionResult Send()
        {
            _hubContext.Clients.All.SendAsync("Notify", $" {DateTime.Now}:->{new Random().Next(1, 10000)}");
            return this.Ok();
        }

    }

客户端

需要引入signalr.js

// The following sample code uses modern ECMAScript 6 features
// that aren't supported in Internet Explorer 11.
// To convert the sample for environments that do not support ECMAScript 6,
// such as Internet Explorer 11, use a transpiler such as
// Babel at http://babeljs.io/.
//
// See Es5-chat.js for a Babel transpiled version of the following code:

const connection = new signalR.HubConnectionBuilder()
    .withUrl("/notifyHub")
    .build();

connection.on("Notify", (message) => {
    console.log(message);
    const li = document.createElement("li");
    li.style.color = "white";
    const txt = "->" + message;
    li.textContent = txt;
    document.getElementById("ulList").appendChild(li);

});

connection.start().catch(err => console.error(err.toString()));
 

<div style="margin-top:20px;">
    <button id="btnAll" class="btn-danger">全部订阅</button>
</div>
<div style="background-color:black;width:100%;height:auto;margin-top:10px;">
    <ul id="ulList" style="list-style-type:none;">
        <li style="color:white;">

        </li>
    </ul>
</div>
<script src="~/lib/signalr/signalr.js"></script>
<script src="~/js/chat.js"></script>

测试

通过访问api/mail/send

在页面https://localhost:44362/Home/all可以看到通知结果