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

Question

I'm trying to learn socket.io for my next Vue project. But unfortunately, I couldn't make it work. When I create my project with vue-cli, I don't have issues with it. But I want to stick with Vite.js since it's faster and easy to customize. So when I try with vite there are no errors at the console. When I log socket instance, it shows it's disconnected. I think its about something with esbuild and commonjs conflict. I also tried with vite-plugin-commonjs to support commonjs modules, but it didn't work too.

As I said, I did copy & paste my code between vue-cli and Vite apps, when vue-cli works, Vite stays disconnected.

My server code:

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);
  });
});

my frontend(Vue) code

<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>

thanks for your help!

Answer 1

As soon as you didn't show your package.json for a Vite project, I have initializes a new project with the following command npm init vite@latest my-vue-app --template vue

Installed vue-socket.io with the command npm install vue-socket.io --save

And got the following working code:

Vue code:

<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>

Server code:

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);
    });
});

Everything works fine. You also can run Node.js SocketIO in a debug mode, just use the following command DEBUG=socket* node {ENTRY FILE NAME}.js

Let me know everything works for you :)