vue-cli 上的 socket.io 错误 Uncaught TypeError: exists is not a function

Posted 2023-02-22

【中文标题】vue-cli 上的 socket.io 错误 Uncaught TypeError: exists is not a function

【英文标题】：socket.io error on vue-cli Uncaught TypeError: exists is not a function

【发布时间】：2021-08-25 11:06:52

【问题描述】：

我已经使用 npm 在我的 vue-cli 项目中安装了 socket.io。 并像这样使用它：

import socketio from 'socket.io';
import VueSocketIO from 'vue-socket.io';

export const SocketInstance = socketio(MY_URL);

Vue.use(VueSocketIO, SocketInstance)

但是当我运行应用程序时，我得到了；

Uncaught TypeError: exists is not a function

控制台错误。没有应用程序运行。

谁能帮忙？

【参考方案1】：

如果我参考官方的 vue-socket.io 文档，基本用法是这样的（以你的为例）：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO(
    connection: MY_URL,
));

而且，如果你必须将 socket-io 实例传递给 vue-socket.io，你必须这样做：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

const SocketInstance = SocketIO(MY_URL);

Vue.use(new VueSocketIO(
    connection: SocketInstance,
));

但是，在这种情况下，包不是socket.io，而是socket.io-client。问题可能来自于此。

编辑：

对于身份验证，如果我参考 socket.io 文档：https://socket.io/docs/v4/client-initialization/#Socket-options 和 vue-socket.io 的用法，这就是解决方案：

没有socket-io-client：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'

Vue.use(new VueSocketIO(
    connection: MY_URL,
    options: 
        // authentication options
        auth : 
            token : 'qwerty',
        
    ,
));

使用 socket.io-client ：

import Vue from 'vue'
import VueSocketIO from 'vue-socket.io'
import SocketIO from 'socket.io-client'

const SocketInstance = SocketIO(MY_URL, 
    // authentication options
    auth : 
        token : 'qwerty',
    
);

Vue.use(new VueSocketIO(
    connection: SocketInstance,
));

【讨论】：

谢谢，但是...我现在可以在哪里放置身份验证标头？

我已经根据 socket.io-client 文档编辑了我的回复以添加身份验证示例

还有...自定义标题怎么样？

阅读文档，我在回复中分享的链接中包含所有信息