使用Vue3创建实时聊天应用，使用WebSocket

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

概述

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

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

创建 Vue3 项目

首先，您需要在本地创建一个 Vue3 项目。可以使用 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

实现 Vue3 客户端

接下来，我们来实现 Vue3 客户端。这是我们的主要 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>

总结

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

---

最后问候亲爱的朋友们，并邀请你们阅读我的全新著作