Vue 3 中实现 WebSocket 实时通信网络功能

在 Vue 3 中实现 WebSocket 实时通信网络功能，可以通过以下步骤来完成。首先，确保你的后端已经设置了 WebSocket 服务。然后，前端可以通过 WebSocket API 与服务器进行实时双向通信。

1. 安装 WebSocket 客户端（可选）

Vue 3 自带 WebSocket API，但如果你希望使用一个更加友好的库，可以选择如 socket.io 等库。如果你仅使用原生 WebSocket，可以跳过安装部分。

使用原生 WebSocket：

Vue 3 本身已经支持原生的 WebSocket。

2. 创建 WebSocket 服务

首先，可以创建一个 useWebSocket 的自定义 Hook 用来管理 WebSocket 连接、发送和接收数据。

// src/composables/useWebSocket.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useWebSocket(url) {
  const socket = ref(null);
  const messages = ref([]);

  // 连接 WebSocket
  const connect = () => {
    socket.value = new WebSocket(url);

    socket.value.onopen = () => {
      console.log('WebSocket连接已建立');
    };

    socket.value.onmessage = (event) => {
      messages.value.push(event.data);
      console.log('收到消息:', event.data);
    };

    socket.value.onclose = () => {
      console.log('WebSocket连接已关闭');
    };

    socket.value.onerror = (error) => {
      console.error('WebSocket错误:', error);
    };
  };

  // 发送消息
  const sendMessage = (message) => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(message);
      console.log('发送消息:', message);
    } else {
      console.error('WebSocket未连接');
    }
  };

  // 清理 WebSocket 连接
  onUnmounted(() => {
    if (socket.value) {
      socket.value.close();
    }
  });

  onMounted(() => {
    connect();  // 在组件挂载时连接 WebSocket
  });

  return { socket, messages, sendMessage };
}

3. 在组件中使用 WebSocket

然后在你的组件中使用这个 useWebSocket Hook 来进行 WebSocket 通信。

<template>
  <div>
    <h1>WebSocket 实时消息</h1>
    <div v-for="(msg, index) in messages" :key="index">
      <p>{{ msg }}</p>
    </div>
    <input v-model="message" placeholder="输入消息" />
    <button @click="sendMessage(message)">发送消息</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import { useWebSocket } from '@/composables/useWebSocket';

export default {
  setup() {
    const { messages, sendMessage } = useWebSocket('ws://localhost:8080'); 
    const message = ref('');

    return { messages, sendMessage, message };
  },
};
</script>

<style scoped>
/* 你的样式 */
</style>

4. 后端 WebSocket 示例（以 Node.js 为例）

你可以使用 ws 库来在 Node.js 中实现 WebSocket 服务器：

// 安装 WebSocket 库
// npm install ws

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);
      }
    });
  });

  // 连接建立时向客户端发送欢迎消息
  ws.send('欢迎连接 WebSocket 服务器');
});

5. 启动 WebSocket 服务

1.运行 WebSocket 服务端（Node.js 示例）：

node server.js

2.启动 Vue 应用：

npm run serve

这样，Vue 3 的前端就能够与 WebSocket 后端进行实时通信了。

6. 注意事项：

1. 确保 WebSocket 服务器的地址正确，并且后端支持 WebSocket 协议。
2. 根据需要处理 WebSocket 的重连机制和异常处理。
3. 如果你的应用需要更复杂的功能，可以考虑使用 socket.io，它在 WebSocket 之上提供了更多的功能和容错能力。