<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>React on yanbo92.site</title>
        <link>https://yanbo92.site/tags/react/</link>
        <description>Recent content in React on yanbo92.site</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>zh-cn</language>
        <lastBuildDate>Wed, 28 Oct 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://yanbo92.site/tags/react/index.xml" rel="self" type="application/rss+xml" /><item>
        <title>TopicConsole：一个轻量的 Apache Pulsar 桌面客户端</title>
        <link>https://yanbo92.site/topicconsole/</link>
        <pubDate>Wed, 28 Oct 2026 00:00:00 +0000</pubDate>
        
        <guid>https://yanbo92.site/topicconsole/</guid>
        <description>&lt;h2 id=&#34;背景&#34;&gt;背景&lt;/h2&gt;
&lt;p&gt;平时查 Pulsar 消息，最常见的路子都不太轻：要么拉一个带服务端的 Web 管理台，要么装几百 MB、还要配 JVM 或 Docker 的重型客户端。只是想看一眼某个 topic 里跑了什么消息，却要先起一整套环境，实在没必要。&lt;/p&gt;
&lt;p&gt;TopicConsole 就是为这个场景做的：一个跨平台桌面客户端，&lt;strong&gt;单个可执行文件约 15 MB&lt;/strong&gt;，直接连 Pulsar broker，不用 Docker、不用 JVM、不用云账号。打开就能看。&lt;/p&gt;
&lt;p&gt;项目地址：官网 &lt;a class=&#34;link&#34; href=&#34;https://topicconsole.vercel.app/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;topicconsole.vercel.app&lt;/a&gt;（有中文版，&lt;a class=&#34;link&#34; href=&#34;https://topicconsole.vercel.app/zh-cn/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;topicconsole.vercel.app/zh-cn/&lt;/a&gt;），源码在 &lt;a class=&#34;link&#34; href=&#34;https://github.com/yanbo92/topicconsole&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;yanbo92/topicconsole&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;它能做什么&#34;&gt;它能做什么&lt;/h2&gt;
&lt;h3 id=&#34;实时看消息两种模式&#34;&gt;实时看消息，两种模式&lt;/h3&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Observer 模式&lt;/strong&gt;：用 Pulsar Reader 读消息，不创建持久订阅。只想看、不想留副作用的时候用这个，查完就走，不会在 broker 上留下游标。&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;订阅模式&lt;/strong&gt;：走正常订阅消费，自己控制什么时候 ack，适合需要确认消费进度的场景。&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;消息流跑起来之后，可以边跑边用正则按 key / value 过滤；多个 topic 可以开多个标签页并排看；消息缓冲能导出成 JSON 或 CSV。列表做了虚拟化，5 万条以上消息也不会卡。&lt;/p&gt;
&lt;h3 id=&#34;管理操作&#34;&gt;管理操作&lt;/h3&gt;
&lt;p&gt;在主界面可以直接浏览租户和命名空间，管理 topic：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;创建非分区或分区持久化 topic，删除非分区持久化 topic&lt;/li&gt;
&lt;li&gt;看命名空间级别的 topic、生产者、消费者、订阅和积压数量&lt;/li&gt;
&lt;li&gt;从 Pulsar Admin 列出 topic 的订阅&lt;/li&gt;
&lt;li&gt;生产消息：填 key、value、headers 就能发；如果本地有 Avro schema，JSON 值会自动按 schema 编码&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;主题组织&#34;&gt;主题组织&lt;/h3&gt;
&lt;p&gt;topic 一多就乱，项目里做了三样东西对付这个：&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;置顶 topic&lt;/strong&gt;：常用的 star 一下，永远排在最前面&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Topic 分组&lt;/strong&gt;：按名字归到文件夹里&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;高级搜索&lt;/strong&gt;：从头扫描，限定匹配数量，支持正则；按官网的说法，还能按消息 key、载荷文本、JSONPath / JMESPath 和发布时间过滤&lt;/li&gt;
&lt;/ul&gt;
&lt;h3 id=&#34;broker-连接&#34;&gt;Broker 连接&lt;/h3&gt;
&lt;p&gt;多个 broker 放在一个列表里管理，顶部栏或 ⌘K / Ctrl+K 就能瞬间切换，正在跑的会话不受影响。每个 broker 可以存多套凭证，切换在 dashboard 里点一下就行；配置（包括分组和置顶）可以导出成 JSON 备份，也能再导回来。&lt;/p&gt;
&lt;h2 id=&#34;技术栈&#34;&gt;技术栈&lt;/h2&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;层&lt;/th&gt;
&lt;th&gt;技术&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;原生窗口与 RPC 桥&lt;/td&gt;
&lt;td&gt;Wails v2&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Pulsar 客户端&lt;/td&gt;
&lt;td&gt;pulsar-client-go&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;UI 组件&lt;/td&gt;
&lt;td&gt;shadcn/ui + Tailwind CSS&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;状态管理&lt;/td&gt;
&lt;td&gt;Zustand&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;前端构建&lt;/td&gt;
&lt;td&gt;Vite + React 18 + TypeScript&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;列表虚拟化&lt;/td&gt;
&lt;td&gt;@tanstack/react-virtual&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;整体结构也简单：&lt;code&gt;main.go&lt;/code&gt; 启动 Wails 并绑定一个 &lt;code&gt;App&lt;/code&gt;，&lt;code&gt;app.go&lt;/code&gt; 是前后端 RPC 的边界，&lt;code&gt;internal/&lt;/code&gt; 放后端领域逻辑，&lt;code&gt;frontend/src/&lt;/code&gt; 是 React 界面。想改功能的话，先看仓库里的 &lt;code&gt;ARCHITECTURE.md&lt;/code&gt;，包结构和事件流都写在里面了。&lt;/p&gt;
&lt;h2 id=&#34;上手&#34;&gt;上手&lt;/h2&gt;
&lt;p&gt;去 &lt;a class=&#34;link&#34; href=&#34;https://github.com/yanbo92/topicconsole/releases&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Releases&lt;/a&gt; 页下载对应平台的包：&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;平台&lt;/th&gt;
&lt;th&gt;文件&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;macOS（Apple Silicon）&lt;/td&gt;
&lt;td&gt;&lt;code&gt;topicconsole-darwin-arm64.zip&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;macOS（Intel）&lt;/td&gt;
&lt;td&gt;&lt;code&gt;topicconsole-darwin-amd64.zip&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Windows&lt;/td&gt;
&lt;td&gt;&lt;code&gt;topicconsole-amd64-installer.exe&lt;/code&gt;（需要 WebView2，Win11 自带）&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Linux&lt;/td&gt;
&lt;td&gt;&lt;code&gt;topicconsole-linux-amd64.tar.gz&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;p&gt;macOS 第一次打开如果被 Gatekeeper 拦住，右键点「打开」即可；如果提示「已损坏」，清掉隔离属性：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;xattr -cr /path/to/TopicConsole.app
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;打开之后按 ⌘,（macOS）或 Ctrl+, 打开设置，点 Add Broker 填 Pulsar 的 service URL 和 admin URL，Test Connection 通过后保存；左侧选租户和命名空间，点一个 topic，选 Observe 或 Consume 就能开始看消息了。&lt;/p&gt;
&lt;p&gt;从源码构建也不麻烦，需要 Go 1.25+、Node.js 18+ 和 Wails CLI：&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre tabindex=&#34;0&#34; class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;git clone https://github.com/yanbo92/topicconsole.git
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;&lt;span class=&#34;nb&#34;&gt;cd&lt;/span&gt; topicconsole
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;make dev        &lt;span class=&#34;c1&#34;&gt;# 开发模式，热重载&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;line&#34;&gt;&lt;span class=&#34;cl&#34;&gt;make build      &lt;span class=&#34;c1&#34;&gt;# 编译当前平台&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;本地起一个 Pulsar standalone 做测试可以用 &lt;code&gt;make pulsar-up&lt;/code&gt;（走 Docker）。&lt;/p&gt;
&lt;h2 id=&#34;两点提醒&#34;&gt;两点提醒&lt;/h2&gt;
&lt;p&gt;一是项目目前还是 &lt;code&gt;v0.1.x&lt;/code&gt;，早期版本，API 和界面在 1.0 之前都可能变，遇到问题欢迎去仓库提 issue。&lt;/p&gt;
&lt;p&gt;二是配置里的 Pulsar token 是&lt;strong&gt;明文&lt;/strong&gt;存在 &lt;code&gt;.topicconsole.json&lt;/code&gt; 里的（在当前工作目录有这个文件就用它，否则放 &lt;code&gt;$HOME/.topicconsole.json&lt;/code&gt;）。备份和查看都方便，但也要清楚：能读到这个文件的人就能读到你的 token，别把它随手发给别人。&lt;/p&gt;
&lt;h2 id=&#34;最后&#34;&gt;最后&lt;/h2&gt;
&lt;p&gt;这个项目是从 &lt;a class=&#34;link&#34; href=&#34;https://github.com/sneiko/kafkalet&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;kafkalet&lt;/a&gt;（一个 Kafka 的轻量客户端）衍生来的，思路一样：看消息这件事，本来就该轻一点。如果你也在用 Pulsar，又受够了重型客户端，可以下来试试；觉得哪里不好用，直接去仓库提 issue 或者 PR 就行。&lt;/p&gt;
&lt;p&gt;项目用 AGPLv3 开源。&lt;/p&gt;
</description>
        </item>
        
    </channel>
</rss>
