|
|
# 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. 实现消息持久化和离线缓存
|