CODEWITHSUNDEEP
vue.js
user11137806
user11137806

Reputation:

VueJS with vue-socket-io not displaying anything

Trying for days but without any luck. I installed https://www.npmjs.com/package/vue-socket.io.

I then added this code to my main.js vue file:

import VueSocketio from 'vue-socket-io';
Vue.use(VueSocketio, 'http://localhost:3001/');

My node server is running on port 3001, and when I refresh my page I do see something happen i.e. the command prompt shows a random string i.e. "PLlVISTMrfO2BzCJAAAZ". This is my connection, so that part is working!

When I want to receive a message from my server I used this code:

io.on('connection', function(socket) {

    console.log('connected with id: ' + socket.id)

    socket.on('SEND_MESSAGE', function(data) {
        io.emit('hello_world', 'Get you right back...')
        console.log(data);
    });

});

When I send a message from Vue, it is received by the server, but when I try to send a message from the server to Vue it is never received.

My Vue code:

    created() {

        // Send a message to the server
        this.$socket.emit('SEND_MESSAGE', 'Hello Node!')

        // Listen
        this.$options.sockets.hello_world = (data) => {
            console.log(data);
            console.log('something came...');
        }

    }

Does anyone have any idea how to fix this? I also tried this but this aint working either: 

    sockets: {
        connect() {
            // Fired when the socket connects.
            console.log("server connected");
        },

        disconnect() {
            console.log("server disconnected");
        },

        hello_vue: function (data) {
            console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
        }
    }

Upvotes: 1

Views: 5695

Answers (2)

Espartaco Parra
Espartaco Parra

Reputation: 1

this worked for me

export default {
  name: "App",
  sockets: {
    connection: function () {
      console.log("socket connected");
    },
    customEmit: function (data) {
      console.log('s'
      );
    },
  },
  components: {
    HelloWorld,
  },
  created() {
    this.sockets.listener.subscribe("chat:message", (data) => {
      console.log(data);
    });
  },
  methods: {
    clickButton: function () {
      // $socket is socket.io-client instance
      this.$socket.emit("chat:message", { id: "asasas" });
    },
    listenButton: function () {
      // $socket is socket.io-client instance
      this.$socket.on("chat:message", () => {
        console.log("data");
      });
    },
  },
</pre>```

Upvotes: -1

muka.gergely
muka.gergely

Reputation: 8329

The npm source you linked says that you have to subscribe to events to receive them dynamically, during runtime.

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');

You can find it here.

Your code is written according to the old documentation (I guess that's deprecated, no longer working).

I suggest you try it with the subscribe method.

EDIT

The solution was to update the used socket package to a better one, and handle the CORS errors in the node server.

New, better package: npmjs.com/package/vue-socket.io-extended

CORS error handling: https://enable-cors.org/server_expressjs.html

IMPORTANT EDIT

GitHub informed me, that it found a HIGH SEVERITY VULNERABILITY in one of the dependencies used in this example.

CVE-2018-20834

More information

high severity

Vulnerable versions: < 4.4.2

Patched version: 4.4.2

A vulnerability was found in node-tar before version 4.4.2. An Arbitrary File Overwrite issue exists when extracting a tarball containing a hardlink to a file that already exists on the system, in conjunction with a later plain file with the same name as the hardlink. This plain file content replaces the existing file content.

Please be careful!

Upvotes: 2

Related Questions