在创建前请保证已经安装好vue，npm和node.js。
首先在命令行中使用“npm init vite@latest+项目名”语句来创建一个vue项目（这是使用vite来构建vue项目，记得安装依赖项）
在src\App.vue中写入模板（vue）和js脚本：
<template><div><h2>Chat App</h2><div v-if="isAuthenticated"><div><input type="text" v-model="message" placeholder="Enter your message" @keyup.enter="sendMessage"><button @click="sendMessage">Send</button></div><div v-for="message in messages" :key="message.id"><strong>{{ message.username }}:</strong> {{ message.text }}</div></div><div v-else><input type="text" v-model="username" placeholder="Enter your username"><button @click="login">Login</button></div></div></template>
<script>import { ref, onMounted } from 'vue';import io from 'socket.io-client';export default {setup() {const socket = io('http://localhost:3000'); // 修改为你的服务器地址const username = ref('');const isAuthenticated = ref(false);const message = ref('');const messages = ref([]);const login = () => {if (username.value) {isAuthenticated.value = true;}};const sendMessage = () => {if (message.value) {const newMessage = { username: username.value, text: message.value };socket.emit('message', newMessage);//receiveMessage(newMessage); // 将自己发送的消息添加到消息列表message.value = '';}};const receiveMessage = (message) => {messages.value.push(message);};onMounted(() => {socket.on('connect', () => {console.log('Connected to server');});socket.on('message', receiveMessage);});return {username,isAuthenticated,message,messages,login,sendMessage};}};</script>
代码逻辑：首先检查用户是否登录，登录后方可发送消息；在输入消息和按下发送按钮后，将把textbar里面消息在经过计算属性合并后通过socket.emit发送到服务器端，同时通过socket.on来监听消息，收到便把消息传入函数receiveMessage中，将收到的消息压入messages数组中，并在页面中显示。
由于我只有一台电脑实所有我在本地运行服务器（使用node.js），在项目根目录中，新建文件server.cjs，在该文件中写入代码，逻辑：
导入服务器相关的依赖项（const sth =require('...');)将服务器配置好，并写入监听的消息，用io传递，并确定监听端口，记得打印错误信息方便找出错误。
const express = require('express');const http = require('http');const socketIO = require('socket.io');const app = express();const server = http.createServer(app);const io = socketIO(server, {cors: {origin: '*',methods: ['GET', 'POST'],},});io.on('connection', (socket) => {console.log('A user connected');socket.on('message', (message) => {console.log('Received message:', message);io.emit('message', message);});socket.on('disconnect', () => {console.log('A user disconnected');});});server.listen(3000, () => {console.log('Server started on port 3000');});
然后我们通过命令行启动项目
npm run dev
node server.cjs
