Delphi、C++Builder & .NET 实时画面

sgcUI Realtime UI 套件

跟随实时系统的画面所需的一切,都内置于您已在使用的 sgcUI 产品中:谁在线、弹出通知和带未读徽标的通知收件箱、带审核跟踪的活动源,以及实时日志查看器。服务器通过 WebSocket、MQTT 或服务器发送事件为它们供数,您的代码也可以直接驱动它们。

VCLFireMonkeyWinFormsWPFAvalonia
sgcUI Realtime 演示:带在线状态指示器的团队名册、活动源、位于通知偏好设置上方的通知收件箱、带未读数的铃铛、团队头像和实时日志网格

五个产品,一个实时画面

Realtime UI 套件不是单独的产品。每个部分都位于与之匹配的 sgcUI 产品中,使用您已在使用的单元、包和 NuGet 包,并遵循该产品的版本。每个部分只需要 sgcUICore 和包含它的产品,都不需要 sgcHTML。

在线状态和头像

谁在线、离开、忙碌或离线,配有头像、头像组和在线状态指示器。

产品:sgcUICore。

在线状态 →

通知

带弹出通知、收件箱、按类别和渠道设置的偏好以及工具栏未读徽标的通知模型。

产品:sgcNavigation 和 sgcToolbar。

通知 →

活动源和审核跟踪

谁对哪个对象做了什么,以动态、审计表和仪表板磁贴呈现。

产品:sgcDashboard。

活动 →

实时日志查看器

跟随最新日志行的网格,带暂停、筛选和导出。

产品:sgcGrid。

实时日志 →

实时数据源

sgcWebSockets 的 WebSocket、MQTT 和服务器发送事件连接,为每个模型供数。

产品:sgcUICore,sgcUICoreWS 桥接。

实时数据 →

Delphi 7 至 Delphi 13 的 VCL、Delphi XE6 起的 FireMonkey、C++Builder,以及 .NET WinForms、WPF 和 Avalonia。阅读 Realtime UI 套件帮助主题。

在线状态和头像

在每个 sgcUI 产品中显示谁在线。

TsgcUIPresenceModel 保存用户及其状态(在线、离开、忙碌或离线)和状态文本。头像控件跟随该模型,因此状态变化会同时重绘该用户的所有头像和指示器。

  • 在线状态模型的变化来自代码中的 AddOrUpdate 和 SetStatus,或来自每次变化一条的实时消息。
  • 头像、用“+N”标签表示放不下的用户的头像组,以及带状态圆点和状态文本的在线状态指示器。
  • sgcDashboard 的活动源读取同一个模型,因此每个参与者都显示其头像和状态。
产品
sgcUICore,由每个 sgcUI 产品共用
Delphi 和 C++Builder
TsgcVCLAvatar、TsgcVCLAvatarGroup、TsgcVCLPresenceIndicator 及其 TsgcFMX 对应控件
版本
所有版本,社区版也包含,实时在线状态消息同样如此

帮助:在线状态和头像和在线状态指示器。

弹出通知、收件箱、偏好设置和徽标

面向桌面应用程序的通知中心。

TsgcNotificationModel 保存通知及其标题、严重程度、类别和已读状态,并统计未读数。弹出通知管理器、收件箱、偏好设置和徽标链接都跟随它。

  • 弹出通知:每条新的未读通知对应一条弹出通知,鼠标指针悬停其上时暂停倒计时。
  • 通知收件箱:按天分组的通知,可显示全部或仅未读,并带有“全部标为已读”。
  • 通知偏好设置:每个类别一行、每个渠道一列,并带有对应的编辑器。关闭某个类别的弹出渠道后不再显示其弹出通知,收件箱仍会列出它们。
  • 未读徽标:sgcToolbar 的 TsgcToolbarBadgeLink 在工具栏或功能区条目上显示未读数,超过 99 时显示 99+。
产品
sgcNavigation(模型、弹出通知、收件箱和偏好设置)和 sgcToolbar(徽标链接)
Delphi 和 C++Builder
TsgcVCLToastManager、TsgcVCLNotificationInbox、TsgcVCLNotificationPrefsEditor 及其 TsgcFMX 对应控件
版本
所有版本,社区版也包含。实时通知消息以及以功能区作为徽标目标仅限注册版。

帮助:通知、弹出通知、通知收件箱、通知偏好设置、通知实时消息和 TsgcToolbarBadgeLink。

活动源和审核跟踪

谁做了什么,以及什么发生了变化。

TsgcDashboardActivityModel 把每条活动记录为参与者、动词和对象,并带有变化的字段。活动源和审核跟踪是同一个模型的两种视图。

  • 活动源:最新活动在前,带相对时间,以及来自在线状态模型的每个参与者的头像。
  • 审核跟踪:行可展开显示变化字段的表格。
  • 两者既是独立控件,也是可用于仪表板的活动磁贴和审计磁贴。
产品
sgcDashboard
Delphi 和 C++Builder
TsgcVCLActivityFeed、TsgcVCLAuditTrail、TsgcVCLDashboardActivityTile、TsgcVCLDashboardAuditTile 及其 TsgcFMX 对应控件
版本
所有版本,社区版也包含。实时活动消息仅限注册版。

帮助:活动源、实时活动消息、活动磁贴和审计磁贴。

sgcGrid 上的实时日志查看器

跟随成千上万行日志而不会卡住画面。

TsgcGridLogModel 保存带时间、从 trace 到 fatal 的级别、来源和消息的日志行,TsgcGridLogLink 以虚拟模式在 sgcGrid 中显示它们。日志模型是线程安全的,因此工作线程可以直接追加日志行。

  • 跟随末尾:向上滚动会停止跟随,滚回末尾则恢复跟随,用户阅读时可用“暂停”停住视图。
  • 按级别着色的行、按级别、来源和文本筛选、高亮规则以及导出。
  • 来自套接字线程的一批日志行只需访问一次主线程。
产品
sgcGrid
Delphi 和 C++Builder
TsgcGridLogModel 和 TsgcGridLogLink,配合 TsgcVCLGrid 或 TsgcFMXGrid
版本
所有版本,社区版也包含。实时日志消息仅限注册版。

帮助:日志查看器、TsgcGridLogModel 和 TsgcGridLogLink。

通过 WebSocket、MQTT 和 SSE 的实时数据源

sgcUICoreWS 桥接的实时数据源接收服务器通过 sgcWebSockets 连接发送的 JSON 消息,并交给各个模型。控件随即更新,无需您编写任何代码。

数据源sgcWebSockets 客户端读取的事件筛选消息的依据
TsgcUILiveSource_WebSocketTsgcWebSocketClientOnMessage,每条文本消息消息某个成员上的筛选条件
TsgcUILiveSource_MQTTTsgcWSPClient_MQTTOnMQTTPublish,每次发布MQTT 主题筛选器
TsgcUILiveSource_SSETsgcHTTP1ClientOnSSEMessage,事件流SSE 事件类型
  • 数据源从不连接、订阅或发送。URL、凭据、TLS 和重新连接都属于客户端,并且 WatchDog 重新连接后挂接依然有效。
  • 一个数据源通过其绑定为多个模型供数,因此一个连接即可驱动整个画面。绑定可以解开应用程序的信封,您自己的客户端事件处理程序仍会触发。
  • 模型始终在主线程中被调用。在套接字线程中到达的消息会排入队列,按到达顺序在一次主线程访问中应用。
  • 桥接只负责入站。用户阅读或关闭通知时,应用程序通过同一个客户端发送自己的帧。

四种消息形态

这里没有新协议。每个模型读取其数据流的实时消息:每次变化一个 JSON 对象,带有指明数据流的 type 成员和一个 op 成员。

数据流typeop模型
在线状态presence,可选upsert、remove、snapshot、clearTsgcUIPresenceModel
通知notification,必需add、update、remove、read、unread、snapshotTsgcNotificationModel
活动activity,必需add、update、remove、snapshotTsgcDashboardActivityModel
日志log,可选append、batch、clearTsgcGridLogModel
messages.json
{"type":"presence","op":"upsert","user":{"id":"u7","presence":"away","statusText":"Lunch"}}
{"type":"notification","op":"add","notification":{"id":"n2","title":"Build 812 passed","severity":"success"}}
{"type":"activity","op":"add","item":{"id":"a20","actorId":"u7","verb":"updated","objectName":"Invoice INV-17"}}
{"type":"log","op":"append","entry":{"level":"warning","source":"api","message":"Slow query"}}
Delphi,每种消息一个 MQTT 主题
oSource := TsgcUILiveSource_MQTT.Create(Self);
oSource.Client := MQTT;
// 每个模型一个绑定,按其主题选择
oBinding := oSource.Bindings.Add;
oBinding.Target := PresenceModel;
oBinding.Topic := 'ops/presence';
oBinding := oSource.Bindings.Add;
oBinding.Target := NotificationModel;
oBinding.Topic := 'ops/notifications';
oBinding := oSource.Bindings.Add;
oBinding.Target := ActivityModel;
oBinding.Topic := 'ops/activity';
oBinding := oSource.Bindings.Add;
oBinding.Target := LogModel;
oBinding.Topic := 'ops/log/+';
// 数据源从不订阅:请在客户端的 OnMQTTConnect 中订阅
MQTT.Subscribe('ops/#');

实时数据源仅限注册版,并且需要 sgcWebSockets,与 sgcUI 的每个 sgcWebSockets 桥接相同。没有服务器时,或在社区版构建中,应用程序改为调用各模型的 API:在线状态模型的 AddOrUpdate 和 SetStatus,通知模型的 Add 或 Post,活动模型的 Add 以及日志模型的 Append。

阅读实时数据源帮助主题

Realtime 演示

由模拟器驱动、面向十二人团队的运营控制台

Delphi VCL 深色主题下的 Realtime 演示:团队名册、活动源、通知收件箱和偏好设置、铃铛徽标、头像组和实时日志网格

Suite 演示 Realtime 用该套件构建了一个运营控制台。工具栏上有一个以未读数为徽标的铃铛、当前用户的头像和团队的头像组。名册列出每位成员及其在线状态指示器,一个选项卡放活动源,另一个放审核跟踪,通知收件箱位于偏好设置编辑器上方,日志网格跟随最新的日志行,弹出通知出现在右下角。

  • 运行时可切换浅色、深色和高对比度,或将窗口镜像为从右到左
  • 确定性模拟器把每次变化构建为对应模型的实时消息,因此演示既不需要服务器,也不需要 sgcWebSockets
  • 使用 --test result.txt 运行即可执行其自检,每项检查输出一行带编号的 PASS 或 FAIL
平台
Delphi VCL(Delphi 7 至 13)和 FireMonkey(Delphi 13)、C++Builder、.NET WinForms、WPF 和 Avalonia
所需版本
sgcUI Professional、Enterprise、All-Access 或试用版,即包含 sgcDashboard 的版本。注册版构建把每次变化作为实时消息应用,社区版构建则通过模型 API 应用。
源代码
Demos\Suite\Delphi\Realtime(sgcUIRealtime.dpr)、Demos\Suite\Delphi\RealtimeFMX(sgcUIRealtimeFMX.dpr)、Demos\Suite\CBuilder\Realtime,以及 .NET 文件夹中的 demos\Suite\Realtime

包含的 sgcUI 产品

另请参阅其他 sgcUI Suite 演示。

Delphi FireMonkey 浅色主题下的 Realtime 演示
FireMonkey,浅色主题
Delphi FireMonkey 深色主题下的 Realtime 演示
FireMonkey,深色主题

WinForms、WPF 和 Avalonia 中的同一套件

模型、控件和实时数据源在 .NET 中名称相同,读取相同的 JSON 消息,位于各产品的 NuGet 包中。

  • 模型:TsgcUIPresenceModel(命名空间 esegece.sgcUICore)、TsgcNotificationModel 和 TsgcNotificationPreferences(esegece.sgcNavigation)、TsgcToolbarBadgeLink(esegece.sgcToolbar)、TsgcDashboardActivityModel(esegece.sgcDashboard),以及 TsgcGridLogModel 和 TsgcGridLogLink(esegece.sgcGrid)。
  • 控件:TsgcWinFormsAvatar、TsgcWinFormsToastManager、TsgcWinFormsNotificationInbox、TsgcWinFormsActivityFeed、TsgcWinFormsAuditTrail 以及其他控件,每个都有对应的 TsgcWpf 和 TsgcAvalonia 版本。
  • 实时数据源:包 esegece.sgcUICore.sgcWebSockets 中的 TsgcUILiveSource_WebSocket、TsgcUILiveSource_MQTT 和 TsgcUILiveSource_SSE,仅限注册版。
  • NuGet 上免费的社区版包,例如 esegece.sgcNavigation.Community 和 esegece.sgcGrid.Community,省略的部分与 Delphi 社区版构建相同。
  • .NET 演示提供 WinForms、WPF 和 Avalonia 宿主,共用一个包含模型、模拟器和自检的项目。

帮助:.NET 包和 Realtime UI 套件。

社区版和注册版

每个部分都遵循其产品的版本。.NET 社区版包省略的部分与 Delphi 社区版构建相同。

部分产品社区版注册版
在线状态模型及其实时消息、头像、头像组和在线状态指示器sgcUICore
通知模型、弹出通知、收件箱和偏好设置sgcNavigation
实时通知消息sgcNavigation—
与工具栏配合的徽标链接sgcToolbar
与功能区配合的徽标链接sgcToolbar—
活动模型、活动源、审核跟踪和两种磁贴sgcDashboard
实时活动消息sgcDashboard—
日志模型和日志链接sgcGrid
实时日志消息sgcGrid—
通过 WebSocket、MQTT 和 SSE 的实时数据源(sgcUICoreWS 桥接,需要 sgcWebSockets)sgcUICore—

在 sgcUI 套件中,sgcNavigation、sgcToolbar 和 sgcGrid 包含在每个版本中,sgcDashboard 从 Professional 起提供。sgcUICore 随每个产品一同提供,每个产品也可单独购买,提供 Delphi 版和 .NET 版。请参阅功能矩阵、版本帮助主题和价格。

常见问题解答

不是。每个部分都位于与之匹配的 sgcUI 产品中:在线状态和头像在 sgcUICore,通知在 sgcNavigation,未读徽标在 sgcToolbar,活动源和审核跟踪在 sgcDashboard,日志查看器在 sgcGrid。您随这些产品一并获得它们,使用相同的单元、包和 NuGet 包。

只有 sgcUICoreWS 桥接的实时数据源才需要。模型和控件只需要 sgcUICore 及其所属产品,没有服务器的应用程序可以通过代码驱动它们。这些部分都不需要 sgcHTML。

任何通过 WebSocket、MQTT 代理或服务器发送事件,每次变化发送一个 JSON 对象的服务器。四种消息形态都有文档,数据源不定义自己的协议。绑定还可以解开现有应用程序协议的信封。

桥接只负责入站。用户阅读或关闭通知时,应用程序通过同一个 sgcWebSockets 客户端发送自己的帧。实时数据源帮助主题中有一个示例。

不会。在套接字线程中到达的消息会排入队列,并在一次主线程访问中应用,因此 1,000 行日志的一批只需一次访问。日志模型也是线程安全的,因此工作线程可以直接向其追加。在 Delphi 7 至 2009 上,请保留客户端默认的通知方式,即在主线程中通知。

每个部分的模型和控件,以及实时在线状态消息。通知、活动和日志模型的实时消息、以功能区作为徽标目标,以及实时数据源仅限注册版。

产品页面:sgcNavigation、sgcToolbar、sgcDashboard、sgcGrid、sgcWebSockets以及 sgcUI 套件。

超值之选:All-AccesseSeGeCe 全部产品,含高级支持,每年 €1,059 起。
查看 All-Access 价格

用 sgcUI 构建您的实时画面

All-Access 试用版包含所有 sgcUI 产品,因此您可以试用套件的每个部分。