OpenClaw WebChat网页聊天功能配置

前言

在 OpenClaw 支持的众多聊天频道中，WebChat 是一个独特的存在。它不依赖任何第三方平台，而是直接内置于 OpenClaw 的网页控制面板（Dashboard）中，通过 WebSocket 协议实现浏览器与 AI 助手之间的实时通信。如果你希望在自己的网站上提供 AI 对话入口，或者只是想在浏览器里快速测试 AI 模型，WebChat 都是最直接的选择。

WebChat 的技术架构

WebChat 基于 WebSocket 协议构建，是 OpenClaw Gateway 接口的一部分。与传统的 HTTP 请求-响应模式不同，WebSocket 建立的是一条持久化的双向通信连接，消息可以在服务端和客户端之间即时传递，无需反复建立连接。

浏览器客户端                    OpenClaw Gateway
    │                              │
    │──── WebSocket 握手 ──────────▶│
    │◀─── 101 Switching Protocol ──│
    │                              │
    │──── 用户消息 ────────────────▶│
    │                              │──▶ AI 模型处理
    │◀─── AI 流式回复 ─────────────│◀──
    │◀─── AI 流式回复 ─────────────│
    │◀─── 回复完成信号 ────────────│
    │                              │

这种架构带来两个显著优势：一是消息延迟极低，用户发送后几乎立即开始接收 AI 回复；二是支持流式输出（Streaming），AI 的回答可以逐字逐句地显示在页面上，而不是等待全部生成完毕才一次性呈现。

启用 WebChat

WebChat 属于 OpenClaw 的原生集成（Native Integration），默认随 Dashboard 一起启用。只要你的 OpenClaw Gateway 服务正在运行，WebChat 就已经可以使用了。

确认 Gateway 服务已启动：

openclaw up -d

然后在浏览器中访问 Dashboard：

http://localhost:18789/dashboard

在 Dashboard 的侧边栏中，你可以找到 WebChat 入口。点击即可进入网页聊天界面。

如果你想在配置文件中显式管理 WebChat 的启用状态，可以编辑 ~/.config/openclaw/openclaw.json5：

{
  channels: {
    webchat: {
      enabled: true,
      // WebSocket 连接路径（默认即可）
      wsPath: "/ws/chat",
      // 允许的来源域名（CORS 控制）
      allowedOrigins: ["*"],
      // 单个连接最大空闲时间（秒）
      idleTimeout: 300,
      // 最大并发 WebSocket 连接数
      maxConnections: 50
    }
  }
}

WebChat 的独立配置

与其他频道一样，WebChat 也支持独立的模型、人设和技能配置。你可以为 WebChat 指定一套与 Telegram 或 Discord 完全不同的 AI 行为：

{
  channels: {
    webchat: {
      enabled: true,
      model: {
        provider: "claude",
        name: "claude-sonnet-4-20250514",
        apiKey: "sk-ant-xxxxx"
      },
      persona: {
        name: "网页助手",
        systemPrompt: "你是一个专业的在线客服助手，回答用户关于产品和服务的问题。语气友好但专业。"
      },
      skills: ["faq", "product-docs", "weather"],
      temperature: 0.7,
      maxTokens: 2048
    }
  }
}

与其他频道并行运行

WebChat 最大的便利之一在于它可以与其他所有频道同时运行，互不干扰。你完全可以在同一个 OpenClaw 实例上同时启用 Telegram、WhatsApp、Discord 和 WebChat，每个频道独立处理各自的消息流和对话上下文。

{
  channels: {
    telegram: { enabled: true, botToken: "your-token" },
    whatsapp: { enabled: true, phoneNumber: "+8613800138000" },
    webchat:  { enabled: true }
  }
}

某个频道出现异常（例如 Telegram 掉线）不会影响 WebChat 的正常运行，反之亦然。OpenClaw 的频道隔离架构确保了各通道的独立性。

安全配置

由于 WebChat 直接暴露在浏览器端，安全配置尤为重要。建议采取以下措施：

限制访问来源：通过 allowedOrigins 设置允许的域名，防止未授权网站调用你的 WebChat 接口。

{
  channels: {
    webchat: {
      enabled: true,
      allowedOrigins: ["https://yourdomain.com", "https://app.yourdomain.com"]
    }
  }
}

配合 Dashboard 密码：为 Dashboard 设置访问密码，确保只有授权用户才能使用 WebChat。

openclaw config set dashboard.password "your-secure-password"
openclaw restart

部署 HTTPS：如果 WebChat 暴露在公网上，务必通过 Nginx 反向代理配置 HTTPS，WebSocket 连接也会自动升级为加密的 WSS 协议。

适用场景

WebChat 特别适合以下几种使用场景：

快速测试：在配置新模型或调整人设后，直接在浏览器中测试效果，无需切换到其他聊天应用。
网站客服：在自己的产品网站上嵌入 AI 对话入口，为访客提供即时问答服务。
内部工具：团队成员通过浏览器直接与 AI 助手交互，无需额外安装聊天客户端。
演示展示：向他人展示 OpenClaw 的能力时，WebChat 是最直观的方式。

常见问题

WebChat 和 Dashboard 中的"新建对话"有什么区别？

Dashboard 中的对话功能主要用于管理和查看来自各频道的历史对话。而 WebChat 是一个独立的聊天频道，拥有自己的配置项（模型、人设、技能等），对话记录也会作为 WebChat 频道的记录保存。

WebSocket 连接断开怎么办？

WebChat 内置了自动重连机制。当网络波动导致 WebSocket 连接中断时，客户端会自动尝试重新建立连接。如果持续无法连接，请检查 Gateway 服务是否正常运行：

openclaw doctor

移动端浏览器支持吗？

支持。WebChat 界面已做响应式适配，在手机和平板浏览器中均可正常使用。

小结

WebChat 作为 OpenClaw 内置的网页聊天频道，提供了零依赖、低门槛的 AI 对话体验。基于 WebSocket 的实时通信架构确保了流畅的交互效果，而原生集成的设计让它可以与其他频道无缝并行运行。无论是日常测试、网站集成还是团队内部使用，WebChat 都是一个值得启用的频道。