You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

4.2 KiB

Raw Blame History Unescape Escape

STOMP 集成完成

已创建的文件

核心文件

src/utils/stompService.ts - STOMP 核心服务
- 完整的 STOMP 客户端封装（基于 @stomp/stompjs）
- 支持连接、订阅、发布
- 自动重连机制
- 服务注册和消息分发

示例文件

src/utils/STOMP_USAGE.md - 详细使用文档
- API 文档
- 使用示例
- 迁移指南
- 故障排除
src/services/nodeService.ts - Node 服务示例
- 展示如何封装业务服务
- 设备节点管理
- 消息处理逻辑
src/components/StompDemo.vue - Vue 组件示例
- 完整的演示界面
- 连接控制
- 消息发送和日志

快速开始

1. 在 main.ts 中初始化

import { createApp } from 'vue';
import App from './App.vue';
import { stompService } from './utils/stompService';

const app = createApp(App);

// 连接 STOMP 服务器（默认地址：ws://localhost:8080/stomp-endpoint）
stompService.connect({
  // 可选配置
  // brokerUrl: 'ws://your-server:8080/stomp-endpoint',
  // username: 'admin',
  // password: 'password',
  reconnectDelay: 5000
});

app.mount('#app');

2. 在组件中使用

<script lang="ts" setup>
import { onMounted } from 'vue';
import { stompService, MqttCmd } from '@/utils/stompService';

onMounted(() => {
  // 注册服务
  stompService.registerService('myService', {
    mqttReady() {
      console.log('STOMP 已就绪');
    },
    
    msgNode(value) {
      console.log('收到 Node 消息:', value);
    }
  });
});

// 发送消息
function sendCommand() {
  stompService.send('/app/web/write', MqttCmd.Control, {
    nodeId: 'node-001',
    action: 'turnOn'
  });
}
</script>

3. 查看演示

将 StompDemo.vue 组件添加到您的路由中：

// router/index.ts
import StompDemo from '@/components/StompDemo.vue';

{
  path: '/stomp-demo',
  name: 'StompDemo',
  component: StompDemo
}

然后访问 /stomp-demo 查看演示界面。

主要特性

✅ 自动重连 - 连接丢失后自动重连（默认 5 秒间隔）
✅ 服务注册 - 支持多个业务服务注册
✅ 消息分发 - 自动将消息分发到对应服务
✅ TypeScript - 完整的类型支持
✅ 错误处理 - 完善的错误处理和日志
✅ 易于扩展 - 可轻松添加新服务

消息命令类型

MqttCmd = {
  Channel: 'channel',           // 通道状态
  NodeInit: 'nodeInit',         // Node 初始化
  Node: 'node',                 // Node 更新
  User: 'user',                 // 用户登录
  Control: 'control',           // 控制命令
  VideoInit: 'videoInit',       // 视频初始化
  VideoCtl: 'videoCtl',         // 视频控制
  Lock: 'lock',                 // 锁控
  Alarm: 'alarm',               // 告警
  Info: 'info',                 // 通知提示
  SocketDebugger: 'socketDebugger' // 调试
}

从 ExtJS 迁移

ExtJS 版本

Rec.mqtt.connect();
Rec.service.node = { msgNode: function(data) {} };
Rec.mqtt.send(cmd, value);

Vue 版本

import { stompService } from '@/utils/stompService';

stompService.connect();
stompService.registerService('node', { msgNode: (data) => {} });
stompService.send('/app/web/write', cmd, value);

连接地址

默认连接地址：

开发环境：ws://localhost:8080/stomp-endpoint
生产环境：ws://your-domain/stomp-endpoint

自定义连接地址：

stompService.connect({
  brokerUrl: 'ws://192.168.1.100:8080/stomp-endpoint'
});

注意事项

连接时机: 建议在 main.ts 中应用启动时连接
服务注册: 在组件的 onMounted 生命周期注册
资源清理: 组件卸载时根据需要清理
TypeScript: 所有方法都有完整类型定义

需要帮助？

查看 src/utils/STOMP_USAGE.md 获取详细文档
查看 src/components/StompDemo.vue 获取完整示例
查看 src/services/nodeService.ts 获取服务封装示例

下一步

根据您的业务需求创建相应的服务
将现有的 ExtJS 服务迁移到新的架构
添加更多错误处理和日志记录
实现消息持久化和离线缓存

4.2 KiB Raw Blame History Unescape Escape