使用Vue 3创建实时聊天应用，使用WebSocket

在这篇博客中，我们将创建一个简单的实时聊天应用，使用 Vue 3 的 setup 语法糖以及 WebSocket 技术。通过这个示例，您可以更好地理解 Vue 3 的新特性以及 WebSocket 的基本用法。

概述

我们的应用将允许用户输入消息，并通过 WebSocket 将消息发送到服务器，服务器则会广播收到的消息给所有连接的客户端。我们将集中精力实现以下功能：

1. 连接到 WebSocket 服务器
2. 发送聊天消息
3. 接收并显示来自其他用户的消息

创建 Vue 3 项目

首先，您需要在本地创建一个 Vue 3 项目。可以使用 Vue CLI 来快速开始：

npm install -g @vue/cli
vue create chat-app
cd chat-app

在项目中安装所需的依赖：

npm install

创建 WebSocket 服务器（可选）

为了测试我们的应用，您可能需要一个 WebSocket 服务器。我们可以使用以下简单的 Node.js 服务器来处理 WebSocket 连接。

// server.js
const WebSocket = require('ws');

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

wss.on('connection', (ws) => {
    ws.on('message', (message) => {
        // 广播到所有客户端
        wss.clients.forEach((client) => {
            if (client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });
});

console.log('WebSocket server is running on ws://localhost:8080');

运行这个服务器：

node server.js

实现 Vue 3 客户端

接下来，我们来实现 Vue 3 客户端。这是我们的主要 Vue 组件：

<template>
  <div class="chat-app">
    <h1>实时聊天应用</h1>
    <div class="messages">
      <div v-for="(msg, index) in messages" :key="index">{{ msg }}</div>
    </div>
    <input v-model="message" @keyup.enter="sendMessage" placeholder="输入消息并按 Enter 发送" />
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const messages = ref([]);
    const message = ref('');
    let ws;

    const connectWebSocket = () => {
      ws = new WebSocket('ws://localhost:8080');

      ws.onmessage = (event) => {
        messages.value.push(event.data);
      };

      ws.onopen = () => {
        console.log('WebSocket connection established');
      };

      ws.onclose = () => {
        console.log('WebSocket connection closed');
      };
    };

    const sendMessage = () => {
      if (message.value.trim()) {
        ws.send(message.value);
        message.value = '';
      }
    };

    onMounted(() => {
      connectWebSocket();
    });

    onBeforeUnmount(() => {
      ws.close();
    });

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

<style scoped>
.chat-app {
  width: 400px;
  margin: auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 5px;
}
.messages {
  height: 300px;
  overflow-y: auto;
  margin-bottom: 10px;
}
input {
  width: 100%;
  padding: 10px;
}
</style>

总结

您现在已经成功创建了一个基于 Vue 3 和 WebSocket 的实时聊天应用。从用户界面到消息的发送和接收，所有部分都是实时的。您可以根据需要添加更多的功能，比如用户身份识别、消息时间戳、使用 Vuex 管理状态。

通过本教程，您掌握了Vue 3 和 WebSocket 的基本结合使用方式，期待您能在此基础上实现更加复杂的实时应用功能。