在 javascript 中调用信号器方法答案

【问题标题】：calling signalr methods in javascript在 javascript 中调用信号器方法
【发布时间】：2020-06-11 22:16:26
【问题描述】：

我正在尝试在我的 .net core 3 Web 应用程序中实现一个分段，以实时显示在线用户的数量。因此，只要用户加入/离开应用程序，计数器就会自动更新而无需刷新页面。

以前，我设法使用 Cookie 获得了活跃用户的数量。但我试图避免为它刷新页面。我上网了解了“signalR”包。

我创建了一个可以获取在线用户数量的代码部分，但我不确定如何在 View/Html 页面上显示它。

这是我尝试过的 -

namespace Project.HubSignal
{
    public class ChatHub : Hub
    {
        public override Task OnConnectedAsync()
        {
            UserHandler.connectedIds.Add(Context.ConnectionId);
            return base.OnConnectedAsync();
        }

    }

    public static class UserHandler
    {
        public static HashSet<string> connectedIds = new HashSet<string>();

    }

}

我创建了一个单独的静态类来捕获用户/ClientId 的数量。

我在一些论坛上看到过，但是我对如何设置 .net core 3 的环境感到困惑。

任何帮助将不胜感激。

【问题讨论】：

标签： signalr signalr-hub asp.net-core-3.0 signalr.client asp.net-core-signalr

【解决方案1】：

根据您的描述，如果您想在客户端页面显示当前捕获的用户数/ClientIds。我建议你可以尝试调用 hub 的方法，在新用户连接时发送更新用户号，在用户断开连接时发送更新用户号。

更多细节，你可以参考下面的测试演示代码：

1.添加Signalr服务并添加端点映射：

    public void ConfigureServices(IServiceCollection services)
    {
        services.AddRazorPages();
        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("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseStaticFiles();

        app.UseRouting();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapRazorPages();
            endpoints.MapHub<UserActivityHub>("/active");


        });
    }

2.在OnConnectedAsync和方法中创建activehun并调用send usernum

public class UserActivityHub: Hub
{
    public static int UserNum;

    public void SendUserList(int userNum)
    {
      Clients.All.SendAsync("broadcastMessage", userNum.ToString());
    }

    public override Task OnConnectedAsync()
    {
        UserNum = UserNum + 1;
        // Send the current users
        SendUserList(UserNum);

        return base.OnConnectedAsync();
    }


    public override Task OnDisconnectedAsync(Exception exception)
    {
        UserNum = UserNum - 1;
        // Send the current users
        SendUserList(UserNum);
        return base.OnDisconnectedAsync(exception);
    }
}

3.在客户端视图或html中添加signlar引用和js代码。

<body>
    <div class="container">

        <span id="usernum"></span>
    </div>
    <!--Script references. -->
    <!--Reference the SignalR library. -->
    <script type="text/javascript" src="lib/signalr.min.js"></script>
    <!--Add script to update the page and send messages.-->
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {

            // Start the connection.
            var connection = new signalR.HubConnectionBuilder()
                .withUrl('/active')
                                .build();

            // Create a function that the hub can call to broadcast messages.
            connection.on('broadcastMessage', function (userNum) {

                document.getElementById('usernum').innerHTML = userNum ;
            });

            // Transport fallback functionality is now built into start.
            connection.start()
                .then(function () {
                    console.log('connection started');
            })
            .catch(error => {
                console.error(error.message);
            });
        });
    </script>
</body>

结果：

【讨论】：

感谢您的快速回复.. 我一定会尝试这个并发布我的回复..
伟大的解决方案人...更新计数器并将其作为异步发送真正的技巧...谢谢您帮助我...我将做更多的实验来弄清楚关于它的想法.. 我注意到一件事......即使在同一浏览器上打开另一个新标签页，它也会捕获......有没有办法限制它？我的意思是如果用户从浏览器连接，无论用户打开多少标签，它都应该被视为 1 ...
如果要让一个用户视为一个计数，则应在 OnConnectedAsync 方法中检查用户连接 id 或用户名。如果用户的用户名或连接ID存在，则添加UserNum。