实现：后端可以实时响应到客户端、客户端同样可以发送消息给后端

效果：

一、创建Vue3项目：

        1：项目创建

// 创建项目
npm init vue@latest

// 初始化依赖包
npm i

// 安装 socket.io
npm i socket.io-client@4.8.1

        2：Vue相关源码

<template>
  <div id="app">
    <h2>服务端推送消息: {{ serverMessage }}</h2>

    <input v-model="input" placeholder="输入消息" />
    <button @click="sendMsg">发送到服务端</button>
    <h3>
      <{{ clientMessage }}>
    </h3>
  </div>
</template>

<script>
import { io } from "socket.io-client";

export default {
  data() {
    return {
      socket: null,
      serverMessage: "",
      clientMessage: "",
      input: "",
    };
  },
  mounted() {
    // 连接后端 socket.io 服务
    this.socket = io("http://localhost:3000", {
      auth: {
        token: "token", // 假设你登录后保存了 token
        customize:"自定义字段"
      }
    });

    // 监听服务端推送消息
    this.socket.on("serverMsg", (msg) => {
      this.serverMessage = msg;
      // console.log("收到服务端推送:", msg);
    });

    // 监听自己发送后服务端回的消息（之前的 chatMsg）
    this.socket.on("chatMsg", (msg) => {
      this.clientMessage = msg
      // console.log("服务端回复:::", msg);
    });
  },
  methods: {
    sendMsg() {
      this.socket.emit("chatMsg", this.input || "前端发的消息");
      this.input = "";
    },
  },
  beforeUnmount() {
    if (this.socket) this.socket.disconnect();
  },
};
</script>

二、创建nodeJS项目

        1、创建项目

// ----空文件内------

// 初始化package.js
npm init

// 安装相关依赖
npm install socket.io@4.8.1
npm install express

        2、新建app.js，写入代码

// server.js
const express = require("express");
const http = require("http");
const { Server } = require("socket.io");

const app = express();
const server = http.createServer(app);

// 初始化 socket.io，允许跨域
const io = new Server(server, {
  cors: {
    origin: "*", // 允许任意前端地址连接（生产环境建议写具体地址）
  },
});

// 监听客户端连接
io.on("connection", (socket) => {
  console.log("客户端连接成功:", socket.id);
  console.log(socket);
  
   // 获取前端发来的 token
  // const token = socket.handshake.auth.token;
  const {token,customize} = socket.handshake.auth;
  console.log("auth相关字段:", token,'---',customize);

  // TODO: 校验 token 合法性
  // 如果不合法，可以断开连接
  // if (!isValidToken(token)) {
  //   socket.disconnect();
  //   return;
  // }

  // 定时推送数据给客户端
  let count = 0;
  const timer = setInterval(() => {
    count++;
    socket.emit("serverMsg", "服务端推送数据：" + count);
  }, 2500);

  // 接收客户端输入
  socket.on("chatMsg",(msg)=>{
    console.log("收到前端消息：",msg);
    socket.emit("chatMsg", "客户端输入数据：" + msg);
    
  })

  // 客户端断开时清除定时器
  socket.on("disconnect", () => {
    clearInterval(timer);
    console.log("客户端断开:", socket.id);
  });
});

// 启动服务
server.listen(3000, () => {
  console.log("服务已启动: http://localhost:3000");
});

三、启动项目

// Vue3 启动命令
npm run dev

// nodeJS 启动命令
node app

注：如nodeJS的3000端口被占用，请手动关闭项目或更改源码端口号