WebSocket 通信

vue3-element-admin 内置了 WebSocket 支持，基于 STOMP 协议实现实时通信。

STOMP 协议

STOMP (Simple Text Oriented Messaging Protocol) 是一个简单的文本消息传递协议。

useStomp

import { useStomp } from '@/composables'

const { connect, subscribe, send, disconnect } = useStomp({
  brokerURL: 'ws://localhost:8080/ws'
})

// 连接
connect()

// 订阅主题
subscribe('/topic/messages', (message) => {
  console.log('收到消息:', message.body)
})

// 发送消息
send('/app/message', { text: 'Hello' })

// 断开连接
disconnect()

应用场景

1. 字典同步

使用 useDictSync 实现字典数据实时同步：

import { useDictSync } from '@/composables'

const { connect } = useDictSync()
connect()

2. 在线人数统计

使用 useOnlineCount 实现在线人数统计：

import { useOnlineCount } from '@/composables'

const { onlineCount, connect } = useOnlineCount()
connect()

3. 实时通知

subscribe('/user/queue/notifications', (message) => {
  ElNotification({
    title: '系统通知',
    message: message.body,
    type: 'info'
  })
})

配置

// vite.config.ts
server: {
  proxy: {
    '/ws': {
      target: 'ws://localhost:8080',
      ws: true
    }
  }
}

相关链接

• useStomp
• useDictSync
• useOnlineCount
• 字典管理