使用 socket.io-client 与 Vite.js & Vue

Question

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

正如我所说，我确实在 vue-cli 和 [=33= 之间复制并粘贴了我的代码]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

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

使用 socket.io-client 与 Vite.js & Vue

Using socket.io-client with Vite.js & Vue

javascript

vue.js

socket.io

vue-cli

vite