vue3 websocket 实现实时报警弹窗

要实现Vue3的Websocket实时报警弹窗，你可以按照以下步骤进行操作：

1. 安装并引入Vue3的Websocket插件，例如vue-native-websocket。

2. 在Vue3的组件中使用该插件来建立Websocket连接，例如：

<template>
  <div>
    <h1>实时报警弹窗</h1>
    <ul>
      <li v-for="(alert, index) in alerts" :key="index">
        {{ alert }}
      </li>
    </ul>
  </div>
</template>

<script>
import VueNativeSock from 'vue-native-websocket'

export default {
  data() {
    return {
      alerts: []
    }
  },
  mounted() {
    this.$connect('ws://localhost:8080/alerts')
  },
  methods: {
    addAlert(alert) {
      this.alerts.push(alert)
    }
  },
  created() {
    this.$options.sockets.onmessage = (message) => {
      this.addAlert(message.data)
    }
  }
}
</script>

3. 在服务器端建立Websocket服务，例如使用Node.js的WebSocket库：

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8080 })

wss.on('connection', (ws) => {
  console.log('客户端已连接')

  ws.on('message', (message) => {
    console.log(`收到消息：${message}`)
    wss.clients.forEach((client) => {
      if (client.readyState === WebSocket.OPEN) {
        client.send(message)
      }
    })
  })
})

4. 在服务端不断地发送报警信息到客户端，例如：

setInterval(() => {
  const alert = { type: 'warning', message: '门未关好，请注意' }
  wss.clients.forEach((client) => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify(alert))
    }
  })
}, 5000)

这样就可以在Vue3的组件中实时接收并显示报警信息了。