时间戳

首页 > 解决方案 > 在 Vite.js 和 Vue 中使用 socket.io-client

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

问题描述

我正在尝试为我的下一个 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>

感谢您的帮助！

标签： javascriptvue.jssocket.iovue-clivite

解决方案

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

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

并得到以下工作代码：

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

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

推荐阅读