vue3使用WebSocket实现实时报警弹窗

可以使用Vue3中的Composition API和WebSocket API来实现实时报警弹窗。以下是一个简单的示例：

1.在Vue3项目中安装WebSocket：

npm install --save ws

2.创建一个WebSocket实例：

import { ref, onMounted } from 'vue'
import WebSocket from 'ws'

export default {
  setup() {
    const alertMsg = ref('')

    const ws = new WebSocket('ws://localhost:8080')

    ws.onmessage = (event) => {
      alertMsg.value = event.data
    }

    onMounted(() => {
      ws.addEventListener('open', () => {
        console.log('WebSocket connected')
      })
    })

    return {
      alertMsg
    }
  }
}

3.在模板中使用alertMsg来显示报警信息：

<template>
  <div>
    <p>{{ alertMsg }}</p>
  </div>
</template>

4.在服务器端实现WebSocket：

const WebSocket = require('ws')

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

wss.on('connection', (ws) => {
  console.log('WebSocket connected')

  ws.send('Welcome to WebSocket server')

  setInterval(() => {
    ws.send('Alert!!!')
  }, 5000)

  ws.on('close', () => {
    console.log('WebSocket closed')
  })
})

在上述代码中，我们使用WebSocket.Server创建了一个WebSocket服务器，并在客户端连接时发送欢迎消息。然后，我们使用setInterval函数每隔5秒向所有连接的客户端发送报警消息。当客户端关闭连接时，服务器会打印一条消息。