vue中集成websocket代码样例

Vue.js 中集成 WebSocket 的基本步骤通常包括创建连接、发送和接收消息。这里提供一个简单的 Vue 实例和使用第三方库 `vue-websocket` 的示例：

首先，你需要安装 `vue-websocket` 库，可以使用 npm 或者 yarn 进行安装：

npm install vue-websocket
# 或者
yarn add vue-websocket

然后，在你的 Vue 组件中引入并使用它：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
    <ul v-if="messages">
      <li v-for="(message, index) in messages" :key="index">{{ message }}</li>
    </ul>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import Websocket from 'vue-websocket';

const ws = ref(null);
let messages = ref([]);

onMounted(() => {
  // 初始化 WebSocket 连接
  const url = 'ws://your-websocket-url.com'; // 替换为实际的WebSocket地址
  if (ws.value === null) {
    ws.value = new Websocket(url);
  }
});

function sendMessage() {
  // 发送消息到服务器
  ws.value.send('Hello Server!');
}

// 接收服务器消息
ws.value.onMessage((message) => {
  messages.value.push(message.data); // 假设数据格式是 JSON，解析后添加到列表中
});
</script>

在这个例子中，我们创建了一个 WebSocket 连接，并在用户点击“发送消息”按钮时向服务器发送数据。同时，我们在 `onMessage` 回调中处理从服务器接收到的消息。