Socket.io with Vue3

Question

I have a Vue 3 app and an express server. The server does not serve any pages just acts as an API so no socket.io/socket.io.js file is sent to client. I am trying to set up socket.io in one of my vue components but whatever I try does not work. Using vue-3-socket.io keeps giving 't.prototype is undefined' errors.

I have tried vue-socket.io-extended as well with no luck.

Any advice would be appreciated as to the reason and solution for the error above, I have tried various SO solutions without success, and the best way forward.

Prabesh Lamichhane Magar · Accepted Answer · 2022-03-25 10:54:26Z

You can use socket.io-client. I have used socket.io-client of 4.4.1 version.

step: 1 Write class inside src/services/SocketioService.js which returns an instance of socketio.

import {io} from 'socket.io-client';

class SocketioService {
    socket;
    constructor() { }

    setupSocketConnection() {
        this.socket = io(URL, {
            transports: ["websocket"]
        })

        return this.socket;
    }
}

export default new SocketioService();

Step 2: Import SocketioService in App.vue. You can instantiate in any lifecycle hook of vue. I have instantiated on mounted as below. After instantiation, I am listening to welcome and notifications events and used quasar notify.

<script>
import { ref } from "vue";
import SocketioService from "./services/socketio.service.js";

export default {
  name: "LayoutDefault",
  data() {
    return {
      socket: null,
    };
  },
  components: {},

  mounted() {
    const socket = SocketioService.setupSocketConnection();
    socket.on("welcome", (data) => {
      const res = JSON.parse(data);
      if (res?.data == "Connected") {
        this.$q.notify({
          type: "positive",
          message: `Welcome`,
          classes: "glossy",
        });
      }
    });

    socket.on("notifications", (data) => {
      const res = JSON.parse(data);

      let type = res?.variant == "error" ? "negative" : "positive";
      this.$q.notify({
        type: type,
        message: res?.message,
        position: "bottom-right",
      });
    });
  },
};
</script>

Collectives™ on Stack Overflow

Socket.io with Vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related