techinplanet staffAsked By: Anonymous
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>
<a href="https://cdn.socket.io/socket.io-1.4.5.js">https://cdn.socket.io/socket.io-1.4.5.js</a>
<a href="http://code.jquery.com/jquery-1.11.1.js">http://code.jquery.com/jquery-1.11.1.js</a>
<a href="http://vue.js">http://vue.js</a>
<a href="http://vue-socketio.js">http://vue-socketio.js</a>
<a href="http://main.js">http://main.js</a>
</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
}
}
});
Solution
Answered By: Anonymous
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');
});
});
}
}
