当前位置： 首页 > news >正文

OpenClaw移动端管理：ollama-QwQ-32B远程监控WebApp搭建

news 2026/5/12 20:41:26

OpenClaw移动端管理：ollama-QwQ-32B远程监控WebApp搭建

1. 为什么需要移动端管理OpenClaw

上周我部署了一个自动化的内容处理流程，用OpenClaw对接ollama-QwQ-32B模型来处理日常的文档整理工作。但很快发现一个问题：当我在外面时，完全不知道家里的自动化任务执行得怎么样了。有好几次回到家才发现任务卡在了某个环节，白白浪费了几个小时。

这让我意识到，OpenClaw虽然能在本地7*24小时运行，但如果不能随时查看状态和干预，实际使用体验会大打折扣。于是决定开发一个简易的移动端Web管理面板，主要解决三个痛点：

  1. 任务状态不透明：无法实时了解自动化流程的执行进度
  2. 结果查看不便：生成的文档或处理结果需要回到电脑才能查看
  3. 紧急情况无法干预：当发现任务异常时，无法远程停止

2. 技术选型与架构设计

考虑到OpenClaw本身已经提供了RESTful API接口，我决定用Express.js来搭建这个管理面板。选择Express主要基于以下几点考虑：

  • 轻量级：不需要复杂的企业级框架，一个简单的Web服务器就能满足需求
  • 快速开发：中间件生态丰富，可以快速实现路由、静态文件服务等功能
  • 跨平台：部署后可以通过任何设备的浏览器访问

整体架构非常简单：

移动设备浏览器 ↔ Express Web服务器 ↔ OpenClaw REST API ↔ ollama-QwQ-32B模型

关键是要处理好几个核心功能点：

  1. OpenClaw API的封装：需要将OpenClaw的原生接口包装成更适合移动端调用的形式
  2. 状态轮询机制：由于HTTP是无状态的，需要实现定期轮询来获取最新任务状态
  3. 响应式设计：确保在各种尺寸的移动设备上都能良好显示

3. 开发环境准备

在开始编码前，需要确保以下环境已经就绪：

  1. 运行中的OpenClaw实例：已经配置好与ollama-QwQ-32B模型的连接
  2. Node.js环境：我使用的是Node 18 LTS版本
  3. 网络访问配置：确保OpenClaw的API端口(默认18789)可以被Express服务器访问
# 检查OpenClaw服务状态 openclaw gateway status # 验证API可用性 curl http://localhost:18789/api/v1/status

如果是在家庭网络环境下，还需要配置路由器的端口转发，将OpenClaw的API端口暴露给内网的其他设备。

4. Express服务器核心实现

4.1 基础服务搭建

首先初始化一个基本的Express应用：

mkdir openclaw-monitor && cd openclaw-monitor npm init -y npm install express axios

然后创建主入口文件app.js：

const express = require('express'); const axios = require('axios'); const app = express(); const port = 3000; // OpenClaw API配置 const OPENCLAW_API = 'http://localhost:18789/api/v1'; // 中间件 app.use(express.json()); app.use(express.static('public')); // 路由 app.get('/api/tasks', async (req, res) => { try { const response = await axios.get(`${OPENCLAW_API}/tasks`); res.json(response.data); } catch (error) { res.status(500).json({ error: 'Failed to fetch tasks' }); } }); // 启动服务器 app.listen(port, () => { console.log(`Monitor app listening at http://localhost:${port}`); });

这个基础版本已经能够代理OpenClaw的任务查询API。

4.2 关键功能实现

接下来实现三个核心功能：

  1. 任务状态查看：增强原始API返回的数据，增加可读性更好的状态描述
  2. 结果预览：对OpenClaw生成的内容进行格式化处理，适合移动端展示
  3. 紧急停止：提供终止指定任务的接口
// 在app.js中添加以下路由 // 获取任务详情（含格式化结果） app.get('/api/tasks/:id', async (req, res) => { try { const taskId = req.params.id; const response = await axios.get(`${OPENCLAW_API}/tasks/${taskId}`); // 格式化结果 const formattedResult = formatTaskResult(response.data); res.json({ ...response.data, formattedResult }); } catch (error) { res.status(500).json({ error: 'Failed to fetch task details' }); } }); // 停止任务 app.post('/api/tasks/:id/stop', async (req, res) => { try { const taskId = req.params.id; await axios.post(`${OPENCLAW_API}/tasks/${taskId}/stop`); res.json({ success: true }); } catch (error) { res.status(500).json({ error: 'Failed to stop task' }); } }); // 结果格式化函数 function formatTaskResult(task) { if (task.type === 'document_processing') { return { preview: task.result.substring(0, 100) + '...', full: task.result }; } // 其他任务类型的格式化逻辑... }

4.3 前端界面开发

在public目录下创建简单的HTML界面：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OpenClaw Monitor</title> <style> /* 简单的响应式样式 */ body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; } .task { border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 5px; } .task-running { background-color: #e6f7ff; } .task-completed { background-color: #e6ffed; } .task-failed { background-color: #fff1f0; } button { padding: 5px 10px; margin-left: 10px; } </style> </head> <body> <h1>OpenClaw任务监控</h1> <div id="tasks"></div> <script> // 获取任务列表 async function fetchTasks() { const response = await fetch('/api/tasks'); const tasks = await response.json(); renderTasks(tasks); } // 渲染任务列表 function renderTasks(tasks) { const container = document.getElementById('tasks'); container.innerHTML = ''; tasks.forEach(task => { const taskEl = document.createElement('div'); taskEl.className = `task task-${task.status.toLowerCase()}`; taskEl.innerHTML = ` <h3>${task.name} <span class="status">${task.status}</span></h3> <p>创建时间: ${new Date(task.createdAt).toLocaleString()}</p> ${task.status === 'RUNNING' ? `<button onclick="stopTask('${task.id}')">停止</button>` : ''} <button onclick="showDetails('${task.id}')">详情</button> `; container.appendChild(taskEl); }); } // 停止任务 async function stopTask(taskId) { await fetch(`/api/tasks/${taskId}/stop`, { method: 'POST' }); fetchTasks(); // 刷新列表 } // 显示任务详情 async function showDetails(taskId) { const response = await fetch(`/api/tasks/${taskId}`); const task = await response.json(); alert(`任务详情:\n\n${task.formattedResult.preview || '无结果预览'}`); } // 每10秒刷新一次 fetchTasks(); setInterval(fetchTasks, 10000); </script> </body> </html>

5. 部署与使用

5.1 本地运行测试

启动Express服务器：

node app.js

然后在手机浏览器访问http://[你的电脑IP]:3000，应该能看到运行中的OpenClaw任务列表。

5.2 生产环境部署建议

对于更稳定的生产使用，可以考虑：

  1. 使用PM2管理进程：
npm install -g pm2 pm2 start app.js --name openclaw-monitor pm2 save pm2 startup
  1. 配置Nginx反向代理：提供HTTPS支持和更好的性能
  2. 设置身份验证：添加基本的HTTP认证保护接口

6. 实际使用体验与优化

部署完成后，我发现这个简易管理系统确实解决了我的核心痛点。现在可以：

  • 在外面喝咖啡时，随时查看家里的文档处理进度
  • 发现异常任务时立即停止，避免浪费计算资源
  • 快速预览生成的内容，决定是否需要进一步调整

但也有一些可以改进的地方：

  1. 状态更新延迟：目前的轮询间隔是10秒，对于某些快速任务可能不够及时
  2. 移动端操作体验：现在的界面还很基础，可以考虑使用Vue或React构建更友好的UI
  3. 通知功能：增加任务完成或失败时的推送通知

7. 安全注意事项

在享受远程管理便利的同时，也要特别注意安全问题：

  1. 不要将OpenClaw API直接暴露到公网：始终通过中间层代理访问
  2. 启用基础认证：至少设置用户名/密码保护
  3. 限制访问IP：如果可能，只允许特定IP访问管理界面
  4. 使用HTTPS：避免敏感信息在传输过程中被窃听

一个简单的认证中间件示例：

// 在app.js中添加 const auth = require('basic-auth'); app.use((req, res, next) => { const user = auth(req); if (!user || user.name !== 'admin' || user.pass !== 'yourpassword') { res.set('WWW-Authenticate', 'Basic realm="OpenClaw Monitor"'); return res.status(401).send('Authentication required'); } next(); });

获取更多AI镜像

想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。

http://www.jsqmd.com/news/547428/

相关文章：

  • 2026巧克力保温缸厂家+巧克力调温机厂家+巧克力生产线厂家精选指南 - 栗子测评
  • 使用 HashMap 优化嵌套循环：Java 对象数组转换
  • 3步打造专属滚动体验：让macOS设备交互更高效
  • Mission Planner如何加载天地图卫星地图？手把手教你搞定混合标注地图
  • 语言清洗令：禁用for循环的第一年——软件测试从业者的专业复盘与策略革新
  • OBS多平台直播分发终极指南：obs-multi-rtmp插件完整教程
  • 生物科技企业实验塑胶耗材专业供应商：塑料滴管/塑料试剂瓶/塑料金标卡/定量吸滴管/广口试剂瓶/摇瓶/离心管/窄口试剂瓶/选择指南 - 优质品牌商家
  • OpenClaw移动办公：Qwen3-VL:30B处理飞书移动端图片消息
  • 3分钟搞定iOS应用签名：这个免费工具让你的开发效率翻倍
  • 2026巧克力涂层机厂家+巧克力滴注机厂家+巧克力泵定制厂家+小型巧克力设备厂家一站式搜罗 - 栗子测评
  • 3步重构Windows右键菜单：ContextMenuManager实现操作效率提升40%的全攻略
  • TortoiseGit-2.18.0.1-64bit.msi Microsoft Visual C++ 2015-2022 Redistributable
  • OpenClaw技能开发：为Qwen3.5-9B编写自定义自动化模块
  • SpAtten架构深度拆解：从Top-k引擎到Crossbar设计的硬件加速秘籍
  • 反应罐源头厂家哪家好?2026优选不锈钢发酵罐厂家/乳化罐厂家推荐指南 - 栗子测评
  • Translategemma-27b-it与Anaconda环境配置：Python开发全指南
  • 3步解决手柄漂移：DS4Windows死区调校从入门到精通
  • LaTeX公式转图片：3分钟学会专业数学公式可视化
  • 3D Slicer和SimpleITK处理医学图像时，origin和direction符号不一致？一个Python脚本帮你搞定转换
  • 新手也能上手！2026年性价比拉满的专业AI论文软件
  • Edge/Chrome浏览器插件实测：免费下载腾讯会议回放视频到本地MP4（附详细安装避坑指南）
  • 突破手柄操控瓶颈：DS4Windows摇杆死区的深度调校解决方案
  • Android Studio 2023.12 新版本遇坑记：一招解决 Gradle 反射报错 ‘Unable to make field... accessible‘
  • Windows 11下用DOSBox 0.74-3一键配置MASM 6.15开发环境（附自动挂载脚本）
  • 解锁你的车载娱乐系统：MIB2 High Toolbox终极定制指南
  • 5步打造专属开源光标主题：macOS风格指针个性化全攻略
  • 3步攻克抖音直播录制难题：DouyinLiveRecorder突破性URL解析技术全解析
  • 「五级架构+全流程拆解」236页PPT揭秘：制药企业数字化转型顶层方案实战
  • 如何高效掌握BepInEx：从入门到精通的实战指南
  • 番茄小说下载器：从在线追更到离线收藏的完整解决方案