使用原生的 WebSocket API 在 Vue 3 中集成 WebSocket。

最新推荐文章于 2025-03-24 08:40:19 发布

theOtherSky

最新推荐文章于 2025-03-24 08:40:19 发布

阅读量4.1k

点赞数 4

分类专栏： vue 前端例子文章标签： websocket vue.js 网络协议

本文链接：https://blog.csdn.net/qq_35181466/article/details/137827004

版权

前端例子同时被 2 个专栏收录

21 篇文章

订阅专栏

vue

17 篇文章

订阅专栏

本文介绍了如何在Vue.js应用中使用WebSocket进行实时通信，包括建立连接、事件处理、发送和接收数据，以及在组件卸载时关闭连接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
    <p v-if="isConnected">已连接</p>
    <p v-else>未连接</p>
    <p>{{ message }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
//如果你的应用程序运行在非加密的 HTTP（HTTP://）协议下，
//那么你需要确保 WebSocket 的连接 URL 也使用相同的协议。
//如果你的应用程序是通过 HTTP 提供的，那么你可以使用非安全的 WebSocket 连接（ws://）
//所以，你可以使用 ws:// 来代替 http://，这将允许你在非加密的 HTTP 环境中建立 WebSocket 连接。
const url = 'ws://192.168.xxx.xxx:8080/api/websocket/demo'
const isConnected = ref(false)
const message = ref('')
let websocket

//开启WebSocket
function connectWebSocket() {
  websocket = new WebSocket(url)

  websocket.onopen = () => {
    isConnected.value = true
    // 连接成功后发送数据
    sendDataToWebSocket()
  }

  websocket.onclose = () => {
    isConnected.value = false
  }

  //接收服务器返回数据
  websocket.onmessage = (event) => {
    message.value = event.data
  }

  websocket.onerror = (error) => {
    console.error('WebSocket error:', error)
  }
}

//关闭WebSocket
function disconnectWebSocket() {
  if (websocket) {
    websocket.close()
  }
}

//要发送数据到 WebSocket 服务器，你可以使用 websocket.send() 方法。
//在你的示例中，你可以在连接成功后调用 send() 方法发送数据。
function sendDataToWebSocket() {
  const dataToSend = {
    cmd: 10,
    id: '',
    data: {
      camera: '4K USB Camera 1'
    }
  }

  // 将数据转换为字符串并发送到服务器
  websocket.send(JSON.stringify(dataToSend))
}

onMounted(() => {
  connectWebSocket()  //开启websocket连接
})

onBeforeUnmount(() => {
  disconnectWebSocket()
})

</script>