.NET C# Blazor 实现一个在线人数的功能

最新推荐文章于 2024-06-20 07:28:11 发布

xxxxxue

最新推荐文章于 2024-06-20 07:28:11 发布

阅读量518

点赞数

分类专栏： Blazor 文章标签： c# .net blazor 在线人数

本文链接：https://blog.csdn.net/qq_37214567/article/details/123227782

版权

Blazor 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

最终效果

在这里插入图片描述

画页面

OnlineUserCount.razor

<p style="margin-bottom:0"
   @onclick="()=>{
    IsShowOnlineUserList = !IsShowOnlineUserList;
}">
    <span style="color:red;">@OnlineCount</span>人正在浏览这篇文章
</p>
@{
    if (IsShowOnlineUserList)
    {
        <p style="margin-top: 1rem;">IP列表:</p>

        @foreach (var item in GetOnlineUserList())
        {
            <p style="margin-left: 2rem;">@item</p>
        }

    }
}

OnlineUserCount.razor.cs

using BootstrapBlazorApp.Shared.Common;

using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Http;

namespace BootstrapBlazorApp.Shared.Shared;

public partial class OnlineUserCount : ComponentBase, IAsyncDisposable
{	
    [Parameter]
    public string Uuid { get; set; }

    public bool IsShowOnlineUserList { get; set; } = false;

    /// <summary>
    /// 在线人数
    /// </summary>
    public int OnlineCount { get; set; }

    private string _ip { get; set; }

    private System.Threading.Timer _timer { get; set; }

    [Inject]
    private CacheCommon _cacheCommon { get; set; }

    [Inject]
    private IHttpContextAccessor _httpContextAccessor { get; set; }

	// 获取缓存中的数据
    public List<string> GetOnlineUserList()
    {
    	// 在缓存中存key value,
    	// 这里通过 key 拿到数据
        var list = _cacheCommon.GetOnlineUserListByUuid(Uuid);
        return list;
    }
	
	// 创建时 加入ip, 销毁时移除ip
    protected override void OnInitialized()
    {
    	// 这部分实现比较简单了. 真实环境, 还是建议去做的复杂一些,比如 ip不能重复 等等
        _ip = _httpContextAccessor?.HttpContext?.Connection?.RemoteIpAddress?.ToString() ?? "";

        var list = GetOnlineUserList();

        list.Add(_ip);

        // 保存IP地址
        OnlineCount = list.Count;

        // 持续更新数据 (3秒)
        _timer = new System.Threading.Timer(_ =>
        {
            // 获取Redis中当前阅读人数
            var count = GetOnlineUserList().Count;
            if (count != OnlineCount)
            {
                OnlineCount = count;
                // 通知组件已经更改, 让组件重新渲染
                InvokeAsync(StateHasChanged);
            }
        }, null, 0, 3000);
    }

	// 组件销毁时的操作
    ValueTask IAsyncDisposable.DisposeAsync()
    {
        var list = GetOnlineUserList();
		// 移除ip
        list.Remove(_ip);

        OnlineCount = list.Count;

        return _timer?.DisposeAsync() ?? ValueTask.CompletedTask;
    }
}

使用组件 ( Content.razor )

@*当前在线数量*@
@{
	// 判断是否是 Blazor服务端模式,(wasm模式就不让他渲染了.)
	// https://blog.csdn.net/qq_37214567/article/details/123228022
    if (_myUitls.IsServerMode)
    {
        <Alert ShowBar="true" Color="Color.Success">
        	// 传入文章的uuid
            <OnlineUserCount Uuid="@Uuid"></OnlineUserCount>
        </Alert>
    }
}