如何使用Vue-Socket.io正确创建自定义套接字方法？
如何使用Vue-Socket.io正确创建自定义套接字方法？
提问于 2016-09-02 08:52:51
这是一个简单的Vue-Socket.io实验。
Express用于在本地提供index.html服务。
套接字由http://metinseylan.com:1923处理。
我在main.js中定义了一个名为testClicked的自定义套接字。测试按钮通过Vue.js绑定到clickButton()方法。clickButton()内部有两个emit调用：
this.$socket.emit('connect', val); // Works
this.$socket.emit('testClicked', val); // Fails我不明白为什么第一个有效，但是第二个失败了。我将控制台输出放在底部。
我还尝试将testClicked添加到vue-socketio.js中的var methods = [...];中，但无济于事。
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为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
}
}
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-10-07 22:35:13
你在服务器端编写emit方法了吗？
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');
});
});
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/39282843
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号