GraphQL Subscription 构建器

可视化定义 GraphQL Subscription 操作、参数和返回字段，生成订阅查询语句及 WebSocket 连接示例代码，不在浏览器中实际建立连接。

免费在线工具

Loading…

使用说明

在“连接信息”填写 GraphQL HTTP Endpoint 和 WebSocket Endpoint（留空时会根据 HTTP Endpoint 自动推导 wss:// 地址）。
在“Subscription 定义”填写操作名称（如 onMessage）和参数（JSON 格式，如 {"channelId":"general"}）。
在“返回字段选择”点击“+ 添加字段”逐个添加要订阅返回的字段名和类型；点击“+ 添加嵌套字段”可快速添加一个 sender.name 这样的嵌套字段示例，字段名用“父字段.子字段”的点号写法表示嵌套。
点击“生成查询”，下方会输出格式化的 GraphQL Subscription 查询语句，以及两种 JavaScript WebSocket 连接示例代码（graphql-ws 库方式和原生 WebSocket + subscriptions-transport-ws 协议方式）。
用“复制”按钮分别复制查询语句或连接代码。也可以点击“聊天消息示例”/“订单状态示例”/“通知订阅示例”三个预设按钮快速加载不同场景的示例。

可视化构建 GraphQL Subscription 查询：操作名称、JSON 格式参数、任意数量的返回字段（支持用点号表示法表达嵌套字段，如 sender.name）。
自动将扁平的点号字段列表还原为带缩进的嵌套 GraphQL 字段树。
根据 HTTP Endpoint 自动推导对应的 wss:// WebSocket Endpoint（也可手动指定）。
生成两套 WebSocket 连接示例代码：基于 graphql-ws 库（现代 graphql-transport-ws 协议）和基于原生 WebSocket 手写 subscriptions-transport-ws 协议消息（connection_init / start）。
内置 3 个预设场景：聊天消息订阅、订单状态变更订阅、通知订阅，一键填充完整示例。
页面明确提示：此工具仅生成查询语句和连接代码文本，不会在浏览器中实际建立 WebSocket 连接，也不会真的向填写的 Endpoint 发起请求。

快速写出符合语法的 Subscription 查询

记不清 GraphQL Subscription 的参数和嵌套字段语法细节，通过表单逐项填写字段，避免手写时漏括号或字段缩进出错。

给前端团队提供 WebSocket 接入代码模板

后端刚定义好一个新的 Subscription 接口，用本工具按接口的字段结构生成一份 graphql-ws 连接代码，直接分享给前端同事做起点。

对比新旧 WebSocket 协议的连接写法

项目里的 GraphQL 网关同时要兼容新的 graphql-transport-ws 和旧的 subscriptions-transport-ws 协议，用本工具一次性生成两种协议的连接代码用于对照实现。

评审 Subscription 返回字段设计

设计一个新订阅接口时，先把计划暴露的字段（含嵌套对象）填进工具里生成查询文本，检查字段结构是否符合预期，再据此和后端对齐 Schema。

这个工具会真的连接我的 GraphQL 服务器测试 Subscription 吗？

不会。它只根据你填写的信息在浏览器本地拼接文本生成查询语句和 JS 代码，不会发起任何真实的 WebSocket 连接或网络请求，页面上也有明确提示。

嵌套字段要怎么填？

在字段名里用点号分隔父子层级，例如填 sender.name 和 sender.avatar，生成时会自动合并成嵌套的 sender { name avatar } 结构。

生成的两种 WebSocket 代码有什么区别，该用哪个？

一种基于 graphql-ws 库，实现的是较新的 graphql-transport-ws 协议，是目前的推荐做法；另一种是不依赖第三方库的原生 WebSocket 写法，实现的是较旧的 subscriptions-transport-ws 协议，仅在你的服务端还只支持旧协议时使用。

参数 JSON 格式写错了会怎样？

生成时会尝试解析你填写的参数 JSON，如果解析失败会静默按空对象处理，不会报错弹窗，建议生成后检查输出的查询语句里参数部分是否符合预期。