在 Vite.js 和 Vue 中使用 socket.io-client

Question

我正在尝试为我的下一个 Vue 项目学习 socket.io。但不幸的是，我无法让它工作。当我使用 vue-cli 创建项目时，我没有遇到任何问题。但我想坚持使用 Vite.js，因为它更快更容易定制。因此，当我尝试使用 vite 时，控制台上没有错误。当我记录套接字实例时，它显示它已断开连接。我认为它与 esbuild 和 commonjs 冲突有关。 我也尝试使用vite-plugin-commonjs 来支持commonjs 模块，但它也不起作用。

正如我所说，我确实在 vue-cli 和 Vite 应用之间复制并粘贴了我的代码，当 vue-cli 工作时，Vite 保持断开连接。

我的服务器代码：

const express = require("express");
const socket = require("socket.io");
const app = express();

const server = app.listen(3001, function () {
  console.log("server running on port 3001");
});

const io = socket(server, {
  cors: {
    origin: "*",
  },
});

io.on("connection", function (socket) {
  console.log(socket.id);
  socket.on("SEND_MESSAGE", function (data) {
    io.emit("MESSAGE", data);
  });
});

我的前端（Vue）代码

<template>
  <button @click="echo">Echo</button>
</template>

<script>
import { io } from "socket.io-client";
export default {
  data() {
    return {
      socket: io("http://localhost:3001"),
    };
  },
  methods: {
    echo() {
      console.log(this.socket.disconnected);
    },
  },
};
</script>

感谢您的帮助！

Answer 1

一旦你没有为 Vite 项目显示你的 package.json，我已经使用以下命令初始化了一个新项目 npm init vite@latest my-vue-app --template vue

使用命令npm install vue-socket.io --save安装vue-socket.io

并得到以下工作代码：

Vue 代码：

<template>
  <button @click="echo">Echo</button>
</template>

<script>
import VueSocketIO from "vue-socket.io";
export default {
  data() {
    return {
      socket: new VueSocketIO({
            debug: true,
            connection: 'http://localhost:3001'
      })
    }
  },
  methods: {
    async echo() {
      console.log(this.socket.io.connected); // prints true
    },
  },
};
</script>

服务器代码：

const express = require("express");
const socket = require("socket.io");
const app = express();

const server = app.listen(3001, function () {
    console.log("server running on port 3001");
});

const io = socket(server, {
    allowEIO3: true,
    cors: {credentials: true, origin: 'http://localhost:3000'},
});

io.on("connection", function (socket) {
    console.log(socket.id);
    socket.on("SEND_MESSAGE", function (data) {
        io.emit("MESSAGE", data);
    });
});

一切正常。 您也可以在调试模式下运行 Node.js SocketIO，只需使用以下命令DEBUG=socket* node {ENTRY FILE NAME}.js

让我知道一切都适合你:)