Getting error while calling IO in socket.io-client, angular 8

Question

I am calling IO of socket.io-client in my angular project like below:

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

But I am always getting an error like:

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

I am not getting it why this is showing, even I have installed @types/socket.io-client

juanitourquiza · Accepted Answer · 2020-12-02 16:42:01Z

30

In angular 10 works fine:

import {io} from 'socket.io-client';

This is the official documentation https://socket.io/docs/v3/client-api/index.html

answered Dec 2, 2020 at 16:42

juanitourquiza

2,2241 gold badge33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ViniciusArruda Over a year ago

VSCode is giving me the following warning: Module '"socket.io-client"' has no exported member 'io'.ts(2305) but everything is working fine.

Hemadri Dasari Over a year ago

This should be accepted answer. Works perfectly

Frederiko Ribeiro Over a year ago

And he also has to change the type of the socket to socket: Socket that is imported from the same dependency.

Martin Schneider Over a year ago

@ViniciusArruda and others: That is caused by manually installed type definitions. But they are included in the npm package now. So just remove them: npm uninstall @types/socket.io-client.

Martin Schneider · Accepted Answer · 2021-02-15 14:07:17Z

14

That may be caused by the type definitions been installed separately. But they are shipped with the socket.io-client package now (see docs: "Note for TypeScript users").

So just uninstall them and change the imports:

npm uninstall @types/socket.io-client

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

answered Feb 15, 2021 at 14:07

Martin Schneider

15.7k8 gold badges63 silver badges64 bronze badges

Comments

Ali Abbas · Accepted Answer · 2020-11-23 09:03:12Z

6

I found a workaround for this, I explored the socket.io-client modules a bit and under 'index.d.ts' I found this line:

export { lookup as io, Socket, SocketOptions };

So I tried importing like this:

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

then to use it:

this.socket=io(url);

it worked for me.

answered Nov 23, 2020 at 9:03

Ali Abbas

1178 bronze badges

Comments

Frederiko Ribeiro · Accepted Answer · 2021-02-09 22:15:57Z

4

Here's a 2021 updated way of doing this with Typescript:


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

export default class SocketService {
  socket: Socket;

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

One should import the io inside the brackets and also attribute the socket with the Socket type also comming from 'socket.io-client'.

answered Feb 9, 2021 at 22:15

Frederiko Ribeiro

2,4081 gold badge26 silver badges34 bronze badges

Comments

Bidyn · Accepted Answer · 2020-11-13 03:35:05Z

2

Your import statement is incorrect, it should look like this

import io from 'socket.io-client';

If you look into type definition you can see that it is declared as

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

which according to this means that it

The export = syntax specifies a single object that is exported from the module

which if I understand correctly is similar to default export that require above import syntax

answered Nov 13, 2020 at 3:35

Bidyn

1492 bronze badges

Comments

Dharman · Accepted Answer · 2020-11-18 05:38:51Z

2

even I am also facing the same issues from last 2 days, Here is how I tackled this issue:

-> import * as io from 'socket.io-client'; //gives error in newer version, not sure why.

so use-> import {io} from 'socket.io-client'; //it will not throw any error

1)Firstly the error is because of newer version of socket.io-client(i,e version>3.0- which got released few days back). So try using the most stable.(I used 2.3.0 both in client & in server side) 2)Make sure that the socket version which you are using in client side matches with the socket version used in server.

edited Nov 18, 2020 at 5:38

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 18, 2020 at 5:33

Shivashankar

331 silver badge3 bronze badges

3 Comments

Daksh Dutta Over a year ago

I am using const io= require('socket.io-client)

Michael Burger Over a year ago

import {io} ... is cousing this issue "Module '"socket.io-client"' has no exported member 'io'.ts(2305)"

Michael Burger Over a year ago

ok, this problem is only on typescript if you have installed @types/socket.io-client

Abhishek Gautam · Accepted Answer · 2021-02-22 06:03:46Z

2

Actually, your code is correct but I believe you are using the updated version of the socketIO which is (3.0) client.

Use the below version : paste the entry in the package.json and run npm i.

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

or simply remove the earlier version and install the 2.0 version.

$npm i [email protected] --save

edited Feb 22, 2021 at 6:03

answered Feb 19, 2021 at 6:56

Abhishek Gautam

1,7973 gold badges21 silver badges31 bronze badges

Comments

Detroit Charan · Accepted Answer · 2020-11-27 09:47:23Z

1

Install the following versions for the above example

$npm i [email protected] --save

edited Nov 27, 2020 at 9:47

answered Nov 27, 2020 at 9:31

Detroit Charan

1992 silver badges2 bronze badges

Comments

Pratik Agarwal · Accepted Answer · 2021-10-30 20:21:35Z

0

changing import statement to

import {io} from 'socket.io-client';

works fine for "socket.io-client": "^4.3.2" and above

while starting connection, use this statement:

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

in previous version, query key used to accept string and objects, now it shows type error for string

answered Oct 30, 2021 at 20:21

Pratik Agarwal

3581 gold badge4 silver badges20 bronze badges

Collectives™ on Stack Overflow

Getting error while calling IO in socket.io-client, angular 8

9 Answers 9

4 Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

Comments

Comments

Comments

Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related