在 socket.io-client 中调用 IO 时出错,角度 8

Posted

技术标签:

【中文标题】在 socket.io-client 中调用 IO 时出错,角度 8【英文标题】:Getting error while calling IO in socket.io-client, angular 8 【发布时间】:2021-02-25 00:09:54 【问题描述】:

我在我的 Angular 项目中调用 socket.io-client 的 IO,如下所示:

import  Injectable  from '@angular/core';
import  Observable  from 'rxjs/internal/Observable';
import * as io from 'socket.io-client';
@Injectable(
  providedIn: 'root'
)
export class SocketclientService 
  socket:any;
  url:any="ws://localhost:8080"
  constructor() 
    this.socket = io(this.url);
   
   
   listen(eventname:any,data:any)
     return new Observable((subscriber)=>
       this.socket.on(eventname,(data:any)=>
         subscriber.next(data);
       )
     )
   
   emit(eventname:string,data:any)
     this.socket.emit(eventname,data);
    

但我总是收到如下错误:

 Error: src/app/services/socketclient.service.ts:11:19 - error TS2349: This expression is not callable.
      Type 'typeof import("C:/somepathtoproject/node_modules/socket.io-client/build/index")' has no call signatures.
    
    11     this.socket = io(this.url);
                         ~~

我不明白为什么会这样显示,即使我已经安装了@types/socket.io-client

【问题讨论】:

【参考方案1】:

角度 10 可以正常工作:

import io from 'socket.io-client';

这是官方文档 https://socket.io/docs/v3/client-api/index.html

【讨论】:

VSCode 给我以下警告:Module '"socket.io-client"' has no exported member 'io'.ts(2305) 但一切正常。 这应该是被接受的答案。完美运行 而且他还得把socket的类型改成socket:从同一个依赖中导入的socket。 @ViniciusArruda 和其他人:这是由手动安装的类型定义引起的。但它们现在包含在 npm 包中。所以只需删除它们:npm uninstall @types/socket.io-client.【参考方案2】:

这可能是由单独安装的类型定义引起的。但它们现在随 socket.io-client 软件包一起提供 (see docs: "Note for TypeScript users")。

所以只需卸载它们并更改导入:

npm uninstall @types/socket.io-client

import  io, Socket  from 'socket.io-client';

【讨论】:

【参考方案3】:

我找到了一个解决方法,我稍微探索了 socket.io-client 模块,并在“index.d.ts”下找到了这一行:

export  lookup as io, Socket, SocketOptions ;

所以我尝试这样导入:

import io from 'socket.io-client/build/index';

然后使用它:

this.socket=io(url);

它对我有用。

【讨论】:

【参考方案4】:

这是 2021 年更新的使用 Typescript 的方法:


import  io, Socket  from 'socket.io-client';

export default class SocketService 
  socket: Socket;

  constructor(conn) 
    this.socket = io(conn);
 
   (...)
  


应该在括号内导入io,并使用Socket 类型的套接字也来自'socket.io-client'

【讨论】:

【参考方案5】:

您的导入语句不正确,应该是这样的

import io from 'socket.io-client';

如果您查看type definition,您可以看到它被声明为

declare module 'socket.io-client' 
 export = io;

根据this的意思是它

export = 语法指定从模块导出的单个对象

如果我理解正确的话,它类似于需要上述导入语法的default export

【讨论】:

【参考方案6】:

即使我在过去 2 天也面临同样的问题,以下是我解决此问题的方法:

-> import * as io from 'socket.io-client'; //在新版本中出现错误,不知道为什么。

so use-> import io from 'socket.io-client'; //它不会抛出任何错误

1)首先错误是因为新版本的socket.io-client(即版本> 3.0-几天前发布)。所以尝试使用最稳定的。(我在客户端和服务器端都使用了 2.3.0) 2)确保您在客户端使用的套接字版本与服务器中使用的套接字版本匹配。

【讨论】:

我正在使用 const io= require('socket.io-client) import io ... 正在解决这个问题 "Module '"socket.io-client"' has no export member 'io'.ts(2305)" 好的,这个问题只有在你安装了@types/socket.io-client 的情况下才会出现在打字稿上【参考方案7】:

实际上,您的代码是正确的,但我相信您使用的是 socketIO 的更新版本,即 (3.0) 客户端。

使用以下版本: 将条目粘贴到 package.json 中并运行 npm i。

**"socket.io-client": "2.2.0"**,

或者干脆删除早期版本并安装 2.0 版本。

$npm i socket.io-client@2.2.0 --save

【讨论】:

【参考方案8】:

为上述示例安装以下版本

$npm i socket.io-client@2.2.0 --save

【讨论】:

【参考方案9】:

将导入语句更改为

import io from 'socket.io-client';

适用于"socket.io-client": "^4.3.2" 及更高版本

开始连接时,使用以下语句:

    this.socket = io(< server url >, query:  <your data object> );

在之前的版本中,查询键用于接受字符串和对象,现在显示字符串类型错误

【讨论】:

以上是关于在 socket.io-client 中调用 IO 时出错,角度 8的主要内容,如果未能解决你的问题,请参考以下文章

在Socket.io-client中发送自定义头。

在 socket.io-client 的客户端上向 self 发送事件

如何在 Angular 2 应用程序中导入 socket.io-client?

socket.io-client + react,在哪里连接服务器?

在 create-react-app 中使用 Socket.io-client 的 WebSockets 代理

在 Angular 2 应用程序中导入 socket.io-client 时出错 [重复]