VueJS与vue-socket-io没有显示任何内容

Question

试了几天但没有运气。我安装了https://www.npmjs.com/package/vue-socket.io。

然后我将此代码添加到我的main.js vue文件中：

import VueSocketio from 'vue-socket-io';
Vue.use(VueSocketio, 'http://localhost:3001/');

我的节点服务器在端口3001上运行，当我刷新页面时，我确实看到了一些事情，即命令提示符显示随机字符串，即“PLlVISTMrfO2BzCJAAAZ”。这是我的联系，所以这部分正在运作！

当我想从我的服务器收到消息时，我使用了以下代码：

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);
    });

});

当我从Vue发送消息时，它会被服务器接收，但是当我尝试从服务器向Vue发送消息时，它永远不会被接收。

我的观看代码：

    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...');
        }

    }

有谁知道如何解决这个问题？我也尝试了这个，但是这个工作要么：

    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)')
        }
    }

Answer 1

您链接的npm源表示您必须在运行时期间订阅事件以动态接收它们。

this.sockets.subscribe('EVENT_NAME', (data) => {
    this.msg = data.message;
});

this.sockets.unsubscribe('EVENT_NAME');

你可以找到它here。

你的代码是根据old documentation编写的（我猜这已被弃用，不再有效）。

我建议你尝试使用subscribe方法。

编辑

解决方案是将使用过的套接字包更新为更好的套接字包，并处理节点服务器中的CORS错误。

新的更好的包装：npmjs.com/package/vue-socket.io-extended

CORS错误处理：https://enable-cors.org/server_expressjs.html

重要编辑

GitHub告诉我，它在这个例子中使用的一个依赖项中发现了一个高严重漏洞。

CVE-2018-20834

更多信息

严重程度高

易受攻击的版本：<4.4.2

补丁版本：4.4.2

在版本4.4.2之前的node-tar中发现了一个漏洞。当提取包含系统上已存在的文件的硬链接的tarball时，以及与硬链接同名的后续普通文件时，存在任意文件覆盖问题。此普通文件内容替换现有文件内容。

请小心！