尝试在 Laravel 的 vue.js 组件中导入 socket.io 时出现问题

Posted 2023-02-23

【中文标题】尝试在 Laravel 的 vue.js 组件中导入 socket.io 时出现问题

【英文标题】：Issue while trying to import socket.io in vue.js component in Laravel

【发布时间】：2019-12-29 04:22:36

【问题描述】：

我正在使用带有内置 vue.js 组件和 socket.io 的 Laravel 5.8，而不使用 redis 和 laravel-echo-server

npm 安装

npm install vue-socket.io

Laravel 中的resources/js/app.js 文件

import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio);

使用npm run watch 命令编译时没有错误。当我在浏览器中检查输出时，出现以下错误。

不能将类作为函数调用

问题出现在这一行：Vue.use(VueSocketio);

你能推荐一下吗？

下面是 Package.json 文件

"devDependencies": 
    "axios": "^0.18",
    "bootstrap": "^4.1.0",
    "cross-env": "^5.1",
    "jquery": "^3.2",
    "laravel-mix": "^4.0.7",
    "lodash": "^4.17.5",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10",
    "vue-vpaginator": "^1.0.0"
,
"dependencies": 
    "bootstrap-vue": "^2.0.0-rc.24",
    "vee-validate": "^2.2.11",
    "vue-chat-scroll": "^1.3.5",
    "vue-recaptcha": "^1.2.0",
    "vue-socket.io": "^3.0.7",
    "vuejs-dialog": "^1.4.0"

Node.js 端代码。这是与 Laravel 完全不同的工作目录

const express = require("express");

class Server 

    constructor() 
        this.app = express();
        this.port = process.env.PORT || 89;
        this.host = process.env.HOST || `192.168.43.173:89`;
    

    includeRoutes() 
    

    appExecute() 

        var server = this.app.listen(this.port, () => 
            console.log(`Listening on http://$this.host`);
        );        
    


const server = new Server();
server.appExecute();

按照 Java 的建议更新代码

Vue.use(new VueSocketio(
    debug: true,
    connection: 'http://192.168.43.173:89',
));

【参考方案1】：

您应该在VueSocketio 之前添加一个new 关键字。

Vue.use(new VueSocketio());

别忘了指定options 的列表。

【讨论】：

更改代码后出现错误。 vue_socket_io__WEBPACK_IMPORTED_MODULE_3___default.a 不是构造函数还在底部我的问题中添加了新代码。

@Pankaj，运行npm i vue-socket.io，你应该拥有这个包的3.x。如果这没有帮助，请尝试删除 node_modules 并重新安装。