1

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)')
        }
    }
Improve this question

2 Answers 2

Reset to default
2

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

20 Comments

Thanks for your reply Muka! I tried that but I get an error: Error in created hook: "TypeError: this.sockets is undefined" When I use a subscribe.
Do you have a sockets property (object) in your component?
Oh sorry I misunderstood you, yeah I have a properties object but it doesnt do anything when I add connect() and other stuff on it. sockets: { connect: function () { console.log('socket connected') }, customEmit: function (data) { console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)') } }
I tried searching for "listener" and "subscribe" but I cannot find anything that works so far. Do you have any suggestions on how to handle it properly? I keep getting the same error "this.sockets is undefined", no matter how I do it.
If you could provide code that should work (including the server), and displays the error you experience, I’ll see if I can get it to work. I tried to replicate the situation, but unfortunately I didn’t have the spare time. Maybe you can upload it to github.
|
-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>```
Improve this answer

1 Comment

Please include an explanation of the code Espartaco Parra.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.