How to correctly create a custom socket method with Vue-Socket.io?

Question

This a simple experiment with Vue-Socket.io.

Express is used to serve index.html locally.

The sockets are being handled by http://metinseylan.com:1923.

I've defined a custom socket inside of main.js named testClicked. The test button is bound via Vue.js to the clickButton() method. Inside of clickButton() are two emit calls:

this.$socket.emit('connect', val);          // Works
this.$socket.emit('testClicked', val);      // Fails

I do not understand why the first one works, but the second one fails. I put the console output at the bottom.

I also tried adding testClicked to var methods = [...]; inside of vue-socketio.js, but to no avail.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-socket-dynamo</title>
    </head>
    <body id="vue-socket-dynamo">
        <button @click="clickButton('testing 123')">Test</button>

        <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
        <script src="vue.js"></script>
        <script src="vue-socketio.js"></script>
        <script src="main.js"></script>
    </body>
</html>

vue-socketio.js is copy and pasted from here

main.js

var metin = 'http://metinseylan.com:1923';

Vue.use(VueSocketio, metin); // Automatically socket connect from url string

var vm = new Vue({
    el: '#vue-socket-dynamo',
    sockets:{
        connect: function(val){
            if(val) { console.log('socket connected -> val: ', val); }
            else    { console.log('socket connected'); }
        },
        testClicked: function(val){
            console.log('testClicked method fired by socket server. eg: io.emit("customEmit", data)');
            if(val) { console.log('val: ', val); }
        }
    },
    methods: {
        clickButton: function(val){
            // $socket is socket.io-client instance
            console.log('@click=clickButton Triggered');           // This works.
            console.log('Input val: ', val);
            this.$socket.emit('connect', val);         // Works
            this.$socket.emit('testClicked', val);    // NOT WORKING
        }
    }
});

Gorgia666 · Accepted Answer · 2016-10-07 14:35:13Z

1

Have you coded the emit method on server side?

mySocketIo/index.js  

module.exports = {
  init: function (server) {
    var io = require('socket.io')
    var listeningIo = io.listen(server, null)
    var listeningIoChat = listeningIo.of('/chat')
    listeningIoChat.on('connection', function (socket) {
      console.log('a user connected to chat')
      socket.on('testClicked', function (msg) {
        console.log("testClicked")
        listeningIoChat.emit('testClicked', msg); // this line will trigger the VueSocketio event
      });
      socket.on('disconnect', function () {
        console.log('user disconnected');
      });
    });
  }
}

answered Oct 7, 2016 at 14:35

Gorgia666

9621 gold badge6 silver badges11 bronze badges

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

Collectives™ on Stack Overflow

How to correctly create a custom socket method with Vue-Socket.io?

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