Files
opsxapi/homepage/dist/docs/websocket/index.html
T
logan dbf15c3060 移除 /docs/quickstart 文档页(公测期安装口径与获取方式尚未定稿,暂不公开)
- 删除 02-quickstart.md 与 manifest 目录条目(21→20 页)
- 原指向该页的入口全部改指 /docs 文档首页(落地页 hero 次级按钮、三站页脚)
- intro 提示改指《界面导览》;重建后 /docs/quickstart 404、全站零死链引用
2026-10-16 13:30:33 +08:00

181 lines
8.1 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>WebSocket · OpsxAPI 文档</title>
<meta name="description" content="OpsxAPI 接口工作台用户文档 — HTTP、GraphQL、WebSocket、SSE、Socket.IO、MQTT 一站式调试,支持 OpenAPI/Postman/cURL 等格式导入导出。">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232563eb'/%3E%3Ctext x='16' y='22' font-size='18' font-weight='bold' fill='%23fff' text-anchor='middle' font-family='sans-serif'%3EO%3C/text%3E%3C/svg%3E">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%2264%22%20y2%3D%2264%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%232563EB%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%2306B6D4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%2214%22%20fill%3D%22url%28%23g%29%22%2F%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M17%2025h26%22%2F%3E%3Cpath%20d%3D%22M37%2019l6%206-6%206%22%2F%3E%3Cpath%20d%3D%22M47%2039H21%22%2F%3E%3Cpath%20d%3D%22M27%2033l-6%206%206%206%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E">
<link rel="stylesheet" href="/docs/assets/docs.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none" aria-hidden="true">
<symbol id="i-menu" viewBox="0 0 24 24"><path d="M4 5h16" /> <path d="M4 12h16" /> <path d="M4 19h16" /></symbol>
<symbol id="i-search" viewBox="0 0 24 24"><path d="m21 21-4.34-4.34" /> <circle cx="11" cy="11" r="8" /></symbol>
</svg>
<header class="topbar">
<div class="topbar-inner">
<button class="menu-btn" id="menu-btn" aria-label="打开导航"><svg class="i"><use href="#i-menu"/></svg></button>
<a class="brand" href="/docs">
<span class="brand-logo"><svg width="28" height="28" viewBox="0 0 64 64" aria-label="OpsxAPI"><defs><linearGradient id="lg-docs" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#2563EB"/><stop offset="1" stop-color="#06B6D4"/></linearGradient></defs><rect width="64" height="64" rx="14" fill="url(#lg-docs)"/><g stroke="#fff" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none"><path d="M17 25h26"/><path d="M37 19l6 6-6 6"/><path d="M47 39H21"/><path d="M27 33l-6 6 6 6"/></g></svg></span>
<span class="brand-name">OpsxAPI <em>文档</em></span>
</a>
<span class="ver-badge">v1.0</span>
<div class="search">
<input id="search-input" type="search" placeholder="搜索文档…" autocomplete="off" spellcheck="false">
<div class="search-panel" id="search-panel" hidden></div>
</div>
<nav class="top-links">
<a href="/home">官网</a>
</nav>
</div>
</header>
<div class="layout" id="layout">
<aside class="sidebar" id="sidebar">
<div class="nav-group">
<div class="nav-group-title">开始使用</div>
<a class="nav-link" href="/docs/intro">产品介绍</a>
<a class="nav-link" href="/docs/interface">界面导览</a>
</div>
<div class="nav-group">
<div class="nav-group-title">请求调试</div>
<a class="nav-link" href="/docs/http">发送 HTTP 请求</a>
<a class="nav-link" href="/docs/auth">接口鉴权</a>
<a class="nav-link" href="/docs/env">环境与变量</a>
<a class="nav-link" href="/docs/graphql">GraphQL</a>
<a class="nav-link active" href="/docs/websocket">WebSocket</a>
<a class="nav-link" href="/docs/sse">SSE 事件流</a>
<a class="nav-link" href="/docs/socketio">Socket.IO</a>
<a class="nav-link" href="/docs/mqtt">MQTT</a>
</div>
<div class="nav-group">
<div class="nav-group-title">数据管理</div>
<a class="nav-link" href="/docs/import">数据导入</a>
<a class="nav-link" href="/docs/export">导出与代码生成</a>
<a class="nav-link" href="/docs/mock">Mock 数据</a>
<a class="nav-link" href="/docs/manage">集合与历史</a>
</div>
<div class="nav-group">
<div class="nav-group-title">自动化测试与 AI</div>
<a class="nav-link" href="/docs/testing">自动化测试</a>
<a class="nav-link" href="/docs/ai">AI 助手</a>
</div>
<div class="nav-group">
<div class="nav-group-title">账号与团队</div>
<a class="nav-link" href="/docs/account">账号与团队</a>
</div>
<div class="nav-group">
<div class="nav-group-title">参考</div>
<a class="nav-link" href="/docs/license">授权与激活</a>
<a class="nav-link" href="/docs/server-api">服务端 API 参考</a>
<a class="nav-link" href="/docs/faq">常见问题</a>
</div>
<div class="sidebar-foot">© 2026 OpsxAPI · 本地优先的接口工作台</div>
</aside>
<main class="content">
<div class="breadcrumb">文档 <span>/</span> 请求调试 <span>/</span> WebSocket</div>
<h1 class="page-title">WebSocket</h1>
<div class="page-meta">更新于 2026-09-17</div>
<article class="md">
<h2 id="sec-1">连接</h2>
<ol>
<li>填写 <code>ws://</code> 或 <code>wss://</code> 地址。</li>
<li>点击 <strong>连接</strong>;状态点变绿(已连接)后即可收发消息。</li>
<li>再次点击按钮即断开。</li>
</ol>
<h2 id="sec-2">消息收发</h2>
<ul>
<li><strong>消息日志</strong>:接收(绿)/ 发送(蓝)/ 系统(灰)/ 错误(红)分色展示,顶部统计 ↑↓ 条数与连接时长。</li>
<li><strong>发送框</strong>:支持 JSON / 纯文本;<strong>⌘/Ctrl + Enter</strong> 快速发送;「格式化 JSON」一键美化。</li>
</ul>
<h2 id="sec-3">子协议</h2>
<p>「握手配置」标签中的<strong>子协议</strong>填逗号分隔列表,例如:</p>
<pre><code class="language-text">graphql-transport-ws, v1.json
</code></pre>
<h2 id="sec-4">自定义握手 Header(隧道模式)</h2>
<p>浏览器原生 WebSocket <strong>不能</strong>携带自定义 Header(如 <code>Authorization</code>、<code>X-API-Key</code>)。OpsxAPI 的处理方式:</p>
<ol>
<li>「握手配置」中填写 Header 后,工具自动改走<strong>本地隧道</strong>:
<ul>
<li>浏览器 → 本地代理 <code>/v1/proxy/ws/attach</code>(普通 WS)</li>
<li>代理 → 目标服务器(携带你填的全部 Header)</li>
</ul>
</li>
<li>不填 Header 时直连目标,零额外开销。</li>
</ol>
<blockquote>
<p><strong>说明</strong>:隧道由应用自带的本地服务提供 —— 桌面版随应用自动运行,无需任何手动配置。</p>
</blockquote>
<h2 id="sec-5">调试技巧</h2>
<ul>
<li>消息过多时点「清空」;日志上限 500 条,超出自动滚动淘汰。</li>
<li>把常用报文保存在「说明」里,或为不同报文建多个 WS 请求节点。</li>
</ul>
</article>
<div class="pn-nav">
<a class="pn prev" href="/docs/graphql"><span class="pn-label">← 上一页</span><span class="pn-title">GraphQL</span></a>
<a class="pn next" href="/docs/sse"><span class="pn-label">下一页 →</span><span class="pn-title">SSE 事件流</span></a>
</div>
</main>
<aside class="toc">
<div class="toc-title">本页目录</div>
<nav class="toc-nav">
<a class="toc-l2" href="#sec-1">连接</a>
<a class="toc-l2" href="#sec-2">消息收发</a>
<a class="toc-l2" href="#sec-3">子协议</a>
<a class="toc-l2" href="#sec-4">自定义握手 Header(隧道模式)</a>
<a class="toc-l2" href="#sec-5">调试技巧</a>
</nav>
</aside>
</div>
<script src="/docs/assets/docs.js" defer></script>
</body>
</html>