zoukankan      html  css  js  c++  java
  • [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;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可以看到通知结果

  • 相关阅读:
    CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
    三大WEB服务器对比分析(apache ,lighttpd,nginx)
    linux sudo 命令
    linux 添加用户、权限
    LeetCode——Find Largest Value in Each Tree Row
    LeetCode——Single Element in a Sorted Array
    LeetCode——Find All Duplicates in an Array
    LeetCode—— Partition Equal Subset Sum
    LeetCode——Unique Binary Search Trees II
    LeetCode——Is Subsequence
  • 原文地址:https://www.cnblogs.com/wolf-sun/p/9213080.html
Copyright © 2011-2022 走看看