Skip to content

doc(Online): update sample code #8042

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ArgoZhang merged 2 commits into from
May 22, 2026
Merged

doc(Online): update sample code #8042

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8a5c0fb
doc: 更新示例
ArgoZhang May 22, 2026
9f745c0
doc: 更新示例
ArgoZhang May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 84 additions & 2 deletions src/BootstrapBlazor.Server/Components/Pages/Online.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,91 @@
@page "/online"
@page "/online"
@layout MainLayout
@inject IStringLocalizer<Online> Localizer

<h4>@Localizer["SubTitle"]：@ConnectionService.Connections.Count</h4>

<section class="mt-3">
<Table TItem="DynamicObject" DynamicContext="DataTableDynamicContext" IsBordered="true" IsStriped="true" SetRowClassFormatter="SetRowClassFormatter"></Table>
<Table Items="@_items" IsBordered="true" IsStriped="true">
<TableColumns>
<TableTemplateColumn FieldName="ConnectionTime" Text="@Localizer["ConnectionTime"]" Width="118">
<Template Context="v">
<span>@v.Row.ConnectionTime.ToString("yyyy/MM/dd HH:mm:ss")</span>
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="LastBeatTime" Text="@Localizer["LastBeatTime"]" Width="118">
<Template Context="v">
<span>@v.Row.LastBeatTime.ToString("yyyy/MM/dd HH:mm:ss")</span>
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Dur" Text="@Localizer["Dur"]" Width="54">
<Template Context="v">
<span>@GetDurString(v.Row)</span>
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Ip" Text="@Localizer["Ip"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.Ip))
{
@v.Row.ClientInfo.Ip.MaskIpString()
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="City" Text="@Localizer["City"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.City))
{
@v.Row.ClientInfo.City
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="OS" Text="@Localizer["OS"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.OS))
{
@v.Row.ClientInfo.OS
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Device" Text="@Localizer["Device"]">
<Template Context="v">
@if (v.Row.ClientInfo != null)
{
@v.Row.ClientInfo.Device.ToString()
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Browser" Text="@Localizer["Browser"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.Browser))
{
@v.Row.ClientInfo.Browser
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Language" Text="@Localizer["Language"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.Language))
{
@v.Row.ClientInfo.Language
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="Engine" Text="@Localizer["Engine"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.Engine))
{
@v.Row.ClientInfo.Engine
}
</Template>
</TableTemplateColumn>
<TableTemplateColumn FieldName="RequestUrl" Text="@Localizer["RequestUrl"]">
<Template Context="v">
@if (!string.IsNullOrEmpty(v.Row.ClientInfo?.RequestUrl))
{
<a href="@v.Row.ClientInfo.RequestUrl" target="_blank">@v.Row.ClientInfo.RequestUrl</a>
}
</Template>
</TableTemplateColumn>
</TableColumns>
</Table>
</section>
150 changes: 24 additions & 126 deletions src/BootstrapBlazor.Server/Components/Pages/Online.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@
// See the LICENSE file in the project root for more information.
// Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone

using System.Data;

namespace BootstrapBlazor.Server.Components.Pages;

/// <summary>
Expand All @@ -16,17 +14,10 @@ public partial class Online : IDisposable
[NotNull]
private IConnectionService? ConnectionService { get; set; }

[Inject]
[NotNull]
private WebClientService? WebClientService { get; set; }

private DynamicObjectContext? DataTableDynamicContext { get; set; }

private readonly DataTable _table = new();

private readonly List<ConnectionItem> _items = [];
private static readonly Comparison<ConnectionItem> ConnectionComparer = static (x, y) => x.ConnectionTime.CompareTo(y.ConnectionTime);
private CancellationTokenSource? _cancellationTokenSource;

private string? _clientId;
private Task? _refreshTask;

/// <summary>
/// <inheritdoc/>
Expand All @@ -35,144 +26,50 @@ protected override void OnInitialized()
{
base.OnInitialized();

CreateTable();

BuildContext();
}

/// <summary>
/// <inheritdoc/>
/// </summary>
/// <param name="firstRender"></param>
protected override void OnAfterRender(bool firstRender)
protected override async Task OnAfterRenderAsync(bool firstRender)
{
base.OnAfterRender(firstRender);
await base.OnAfterRenderAsync(firstRender);

if (firstRender)
if (firstRender && _refreshTask == null)
{
Task.Run(async () =>
{
var client = await WebClientService.GetClientInfo();
_clientId = client.Id;
_cancellationTokenSource ??= new CancellationTokenSource();
while (_cancellationTokenSource is { IsCancellationRequested: false })
{
try
{
BuildContext();
await InvokeAsync(StateHasChanged);
await Task.Delay(10000, _cancellationTokenSource.Token);
}
catch
{
// ignored
}
}
});
_cancellationTokenSource ??= new CancellationTokenSource();
_refreshTask = RefreshAsync(_cancellationTokenSource.Token);
}
}

private void CreateTable()
{
_table.Columns.Add("Id", typeof(string));
_table.Columns.Add("ConnectionTime", typeof(DateTimeOffset));
_table.Columns.Add("LastBeatTime", typeof(DateTimeOffset));
_table.Columns.Add("Dur", typeof(TimeSpan));
_table.Columns.Add("Ip", typeof(string));
_table.Columns.Add("City", typeof(string));
_table.Columns.Add("OS", typeof(string));
_table.Columns.Add("Device", typeof(string));
_table.Columns.Add("Browser", typeof(string));
_table.Columns.Add("Language", typeof(string));
_table.Columns.Add("Engine", typeof(string));
_table.Columns.Add("RequestUrl", typeof(string));
}

private void BuildContext()
private async Task RefreshAsync(CancellationToken cancellationToken)
{
_table.Rows.Clear();
var rows = ConnectionService.Connections.Sort(["ConnectionTime"]);
foreach (var item in rows)
{
_table.Rows.Add(
item.Id,
item.ConnectionTime,
item.LastBeatTime,
item.LastBeatTime - item.ConnectionTime,
item.ClientInfo?.Ip ?? "",
item.ClientInfo?.City ?? "",
item.ClientInfo?.OS ?? "",
item.ClientInfo?.Device.ToString() ?? "",
item.ClientInfo?.Browser ?? "",
item.ClientInfo?.Language ?? "",
item.ClientInfo?.Engine ?? "",
item.ClientInfo?.RequestUrl ?? ""
);
}
_table.AcceptChanges();
using var timer = new PeriodicTimer(TimeSpan.FromSeconds(10));

//table
DataTableDynamicContext = new DataTableDynamicContext(_table, (context, col) =>
try
{
col.Text = Localizer[col.GetFieldName()];
if (col.GetFieldName() == "Id")
while (await timer.WaitForNextTickAsync(cancellationToken))
{
col.Ignore = true;
BuildContext();
await InvokeAsync(StateHasChanged);
}
else if (col.GetFieldName() == "ConnectionTime")
{
col.FormatString = "yyyy/MM/dd HH:mm:ss";
col.Width = 118;
}
else if (col.GetFieldName() == "LastBeatTime")
{
col.FormatString = "yyyy/MM/dd HH:mm:ss";
col.Width = 118;
}
else if (col.GetFieldName() == "Dur")
{
col.FormatString = @"dd\.hh\:mm\:ss";
col.Width = 54;
}
else if (col.GetFieldName() == "Ip")
{
col.Template = v => builder => builder.AddContent(0, FormatIp(v));
}
else if (col.GetFieldName() == "RequestUrl")
{
col.Template = v => builder =>
{
if (v is IDynamicObject val)
{
var url = val.GetValue("RequestUrl")?.ToString();
if (!string.IsNullOrEmpty(url))
{
builder.AddContent(0, new MarkupString($"<a href=\"{url}\" target=\"_blank\">{url}</a>"));
}
}
};
}
});
}
catch (OperationCanceledException) { }
}
Comment on lines +47 to 60

private static string FormatIp(object v)
private void BuildContext()
{
var ret = "";
if (v is IDynamicObject val)
{
var ip = val.GetValue("Ip")?.ToString();
if (!string.IsNullOrEmpty(ip))
{
ret = ip.MaskIpString();
}
}
return ret;
_items.Clear();
_items.AddRange(ConnectionService.Connections);
_items.Sort(ConnectionComparer);
}

private string? SetRowClassFormatter(DynamicObject context)
private static string GetDurString(ConnectionItem item)
{
var id = context.GetValue("id")?.ToString();
return _clientId == id ? "active" : null;
var dur = item.LastBeatTime - item.ConnectionTime;
return dur.ToString("dd\\.hh\\:mm\\:ss");
}

private void Dispose(bool disposing)
Expand All @@ -185,6 +82,7 @@ private void Dispose(bool disposing)
_cancellationTokenSource.Dispose();
_cancellationTokenSource = null;
}
_refreshTask = null;
}
}

Expand Down
Loading