maotu-webtopo/STOMP_INTEGRATION.md

# STOMP 集成完成

## 已创建的文件

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

### 示例文件
2. **`src/utils/STOMP_USAGE.md`** - 详细使用文档
   - API 文档
   - 使用示例
   - 迁移指南
   - 故障排除

3. **`src/services/nodeService.ts`** - Node 服务示例
   - 展示如何封装业务服务
   - 设备节点管理
   - 消息处理逻辑

4. **`src/components/StompDemo.vue`** - Vue 组件示例
   - 完整的演示界面
   - 连接控制
   - 消息发送和日志

## 快速开始

### 1. 在 main.ts 中初始化

```typescript
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. 在组件中使用

```vue
<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` 组件添加到您的路由中：

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

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

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

## 主要特性

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

## 消息命令类型

```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 版本
```javascript
Rec.mqtt.connect();
Rec.service.node = { msgNode: function(data) {} };
Rec.mqtt.send(cmd, value);
```

### Vue 版本
```typescript
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`

**自定义连接地址：**
```typescript
stompService.connect({
  brokerUrl: 'ws://192.168.1.100:8080/stomp-endpoint'
});
```

## 注意事项

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

## 需要帮助？

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

## 下一步

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