Question

这是一个简单的Vue-Socket.io实验。

Express用于在本地提供index.html。

套接字由http://metinseylan.com:1923处理。

我在名为main.js的{{1}}内部定义了一个自定义套接字。测试按钮通过Vue.js绑定到testClicked方法。 clickButton()内部有两个发出呼叫：

clickButton()

我不明白为什么第一个有效，但第二个失败了。我将控制台输出放在底部。

我也尝试在vue-socketio.js中将this.$socket.emit('connect', val); // Works this.$socket.emit('testClicked', val); // Fails添加到testClicked，但无济于事。

的index.html

var methods = [...];

vue-socketio.js是copy and pasted from here

main.js

<!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>

Answer 1

您是否在服务器端编写了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');
      });
    });
  }
}

如何使用Vue-Socket.io正确创建自定义套接字方法？

1 个答案: