【摘要】cc-chat 是一个轻量级 WebSocket 中继系统，让你在任何有浏览器的设备上远程操控 Claude Code CLI。核心代码不到 1400 行，Docker 一键部署，支持多会话管理、移动端适配、xterm.js 终端模拟。
开源地址：https://github.com/lmx050218/cc-chat
Docker 镜像：dexbug/cc-chat:v1.0
License：MIT
一、前言
Claude Code 是 Anthropic 推出的官方命令行编程助手，基于 Claude 模型，能够直接在终端中读写代码、执行命令、管理项目。它非常强大——但它有一个问题：你必须待在电脑前才能用它。
出门在外想用手机看一下 Claude Code 的运行结果？在公司想远程操作家里电脑上正在跑的 Claude Code 会话？平板上想快速给它下达一个新指令？
这些场景，CLI 本身都搞不定。
于是就有了 cc-chat —— 一个轻量级的 WebSocket 中继系统，让你通过浏览器远程访问 Claude Code CLI。
二、cc-chat 是什么？
一句话概括：cc-chat 让你在任何有浏览器的设备上，远程操控运行在本地电脑上的 Claude Code CLI。
它的架构非常简洁——三段式 WebSocket 中继：
本地电脑（Agent）→ WebSocket → Linux 服务器（Relay，Docker 部署）→ WebSocket → 任意浏览器（xterm.js 终端）
三、它能做什么？
1. 手机 / 平板远程访问
这是最核心的使用场景。躺床上用手机就能查看 Claude Code 的输出、给它下达指令，不用再爬起来开电脑。
2. 多会话管理
浏览器侧边栏显示所有活跃的 Claude Code 会话，你可以：一键创建新会话、在多个会话之间自由切换、每个会话独立配置模型（Opus / Sonnet / Haiku / Fable 5）和权限模式以及思考强度、切换会话时自动同步完整历史记录（最多 10,000 条）。
3. 丰富的会话配置
创建新会话时可通过弹窗配置：会话名称、主题（Dark/Light）、模型（Opus/Sonnet/Haiku/Fable 5）、权限模式（auto/acceptEdits/default/bypassPermissions/plan/dontAsk）、思考强度（low/medium/high/xhigh/max）。
4. 文件上传
通过输入栏旁边的回形针按钮选择文件，会自动以 @filename 格式插入到消息中，这是 Claude Code 原生的文件引用语法。
5. 移动端适配
小屏幕自动折叠侧边栏为汉堡菜单，触屏友好的输入体验，适配 iPhone 刘海屏安全区域。
6. 自动重连与心跳监测
Agent 端指数退避重连（5 秒到 30 秒），浏览器端断线后 3 秒自动重连，30 秒一次心跳检测，侧边栏和顶栏实时显示 Agent 在线状态。
7. 自动应答
Agent 会自动处理 Claude Code 的交互式启动提示——信任目录确认、权限绕过确认、主题选择、用户协议确认、自动更新提示——无需手动操作，启动即用。
四、快速部署
部署分为两步：服务器端（Relay）和本地端（Agent）。
第一步，部署 Relay 服务器：
首先生成共享 Token，命令：openssl rand -hex 32。然后创建 compose.yaml，内容如下（这里你用 Halo 的代码块功能插入）：
services:
relay:
image: dexbug/cc-chat:v1.0
restart: unless-stopped
ports:
- "17389:17389"
environment:
- CC_TOKEN=你的Token
最后执行 docker compose up -d，Relay 就跑起来了。
第二步，启动本地 Agent：
Windows 用户直接双击 start.cmd，或者手动进入 agent 目录执行 npm install，然后创建 .env 文件，写入 CC_TOKEN（与服务器一致）和 CC_RELAY（wss://你的服务器地址/ws）。最后 node agent.js 启动。Agent 会自动检测本地安装的 Claude Code CLI（支持 VS Code 扩展目录、PATH 和自定义路径三种方式）。
第三步，打开浏览器访问 https://你的服务器地址，输入 Token，即可使用。
提示：建议在 Relay 前加 Nginx 反向代理并配置 SSL 证书，实现全程 WSS 加密，README 中有完整 Nginx 配置示例。
五、技术栈
cc-chat 的设计哲学是轻量、零依赖前端框架、易于理解：
Agent：Node.js + node-pty（伪终端管理 Claude Code CLI）
Agent 终端解析：@xterm/headless（无头终端解析 ANSI 输出，实现自动应答）
Relay：Node.js + Express + ws（HTTP 静态文件服务 + WebSocket 消息路由）
前端：Vanilla JS + xterm.js（单文件 SPA，无任何框架依赖）
部署：Docker + Docker Compose（一键容器化部署）
核心代码量：agent/agent.js 385 行，relay/server.js 134 行，relay/public/index.html 813 行（完整前端 SPA）。没有 ORM、没有数据库、没有消息队列——就是纯粹的 WebSocket 管道。这意味着易于理解（半小时通读源码）、易于调试（直接看 WebSocket 消息）、易于魔改（没有框架的条条框框）。
六、安全设计
Token 认证：Agent、Relay、浏览器三端共享同一个预生成 Token，不匹配则拒绝连接。
WSS 加密：WebSocket 通信全程走 TLS 加密（需要配置 SSL）。
无第三方服务：数据不经过任何外部，完全点对点。
轻量攻击面：Relay 只做消息转发，不存储数据，不暴露额外端点。
七、实际使用体验
出差途中改代码：在高铁上用手机给 Claude Code 发了一条指令，让它重构一个函数。回到酒店打开电脑，代码已经改好了。这种「远程编程」的体验非常爽。
多任务并行：同时开了 3 个会话，一个写前端组件，一个调后端接口，一个跑测试。在浏览器侧边栏切换比 Alt+Tab 还快。
iPad 变身编程工具：配上键盘的 iPad 打开浏览器就是一个完整的 Claude Code 终端，写代码的体验出乎意料地好。
八、未来计划
v1.0 已经具备了完整的远程访问能力，后续可能考虑：会话间的文件共享和剪贴板同步、终端输出的 Markdown 富文本渲染、Webhook/通知集成、更细粒度的权限控制。
九、总结
如果你是 Claude Code 的重度用户，又经常需要在不同设备、不同场景下使用它，cc-chat 值得一试。
三步上手：Docker 启动 Relay → 本地启动 Agent → 浏览器打开即用。
核心优势：轻量（核心代码不到 1400 行）、安全（Token + WSS）、零前端框架依赖、移动端友好。
项目地址：https://github.com/lmx050218/cc-chat
如果觉得有用，欢迎 Star 支持！
评论区