Socket.io Ionic

Ionic Framework ionic-v3
1

Hello! Somebody know where I can find a simple example of socket with Ionic 2? I found examples with the extension (.js) but not (.ts) and I’m really lost.
Thanks in advance.

Best regards.

2

i think you can simply add socket.io to your package.json and install the typings for socket io -->

https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/socket.io/socket.io.d.ts

install the typings module: npm install -g typings
after that you can install the typings for socket.io typings install

typings install socket.io-client --save --ambient

if “–ambient” does not work any more your can try “–global” instead

3

I found this tutorial on ionic2 and socket.io
https://www.thepolyglotdeveloper.com/2016/01/creating-a-real-time-chat-application-with-ionic-2-and-socket-io/

And here is the project on github:

Unfortunately the project files were a bit old and it didn’t suit my needs so I updated it to the latest Ionic2 + Angular2 and converted to typescript. You can check it out in my forked repo:

Good luck, let me know if you have any question.

4

I’ve installed Socket.io client and typings:

npm install socket.io-client --save
typings install dt~socket.io-client --save --global

ambient is deprecated in favor of globals.

@Jose_Ionic Using the client in Ionic 2 is simple as:

import * as io from "socket.io-client";
...

export class YourClass {
  socket: SocketIOClient.Socket;

  ...

  connect() {
    this.socket = io(SOCKET_URL);
    this.socket.on('connect', () => {
      ...
    });
  }
}

Have fun!

4 Likes
5

Thank you very very much for your responses :slight_smile:

@beetz12 -> Thank you for your contribution, I saw that tutorial a few days ago and I liked it, I try to pass it to .ts but I could not :S .

@matheo -> Thank you for your contribution too, the command “npm install socket.io-client --save” has worked but not the same for the second “typings install socket.io-client --save --global”

  • “Typings” is not recognized as an internal or external command. Do you know why?

With your information my .ts is like that:

import {Component} from “@angular/core”;
import {NavController , Alert} from ‘ionic-angular’;
import {Http} from ‘@angular/http’;
import * as io from “socket.io-client”;

@Component({
templateUrl: ‘build/pages/home/home.html’
})

export class HomePage {
constructor(private navController: NavController , private socket: SocketIOClient.Socket) {
this.navController=navController;
this.socket=socket;
}

connect() {
    this.socket = io(192.168.1.100:8080);
    this.socket.on('connect', function () {
        socket.emit('news', { hello: 'world' });
    });
}

}

I have an error: “TS1005: ‘,’ expected.” and the other “cannot find namespace ‘socketIoClient’”, I think that the last one is because the second command doen’t work.

I would like do one example that I press a button like this:

<ion-navbar *navbar>

My Proyect

Send Socket

and send socket to my server in 192.168.1.100.8080 so when I finalize and tested it, I will put it here, if you are interested.
Thank you for your help.

Best regards.

6

Woot, sorry, my copy+paste error, it needs the DT:

typings install dt~socket.io-client --save --global

And to initialize the socket, you need the URL as string, with protocol too:

this.socket = io('http://192.168.1.100:8080');
7

Yes, thank you! Now I dont have my error “TS1005: ‘,’ expected.” but with the new command I have the same error: “Typings” is not recognized as an internal or external command. So now, when I run my proyect I have the error “Cannot find module ‘socket.io-client’”

8

Did you check out my fork?

I converted the project to typescript and also upgraded to Angular RC1 latest ionic2

9

You are missing the typings npm module. You can install it by:

$ npm install typings -g

10

Yes, but your file “home.js” is not .ts I will need .ts

11

Is correct, your command work fine but when excecute the next one “typings install dt~socket.io-client --save --global” It appears on the terminal - (No dependencies)
Do you know why?

12

It’s all ok if no error message, its just a report of the installed definitions.

Check your typings/globals folder and there should be the socket.io-client ones already :wink:

13

OH! You are right :slight_smile: but then… when I run my proyect, why appears on the terminal the message: “Error: Cannot find module ‘socket.io-client’ from 'C:\Users…”

14

I got that error for a while too, dunno if it’s a temporary linter issue detecting that module into node_modules/socket.io-client, because it should be gone after install it with:

npm install socket.io-client --save
15

I have not understood very well, should I eliminate the folder “socket.io-client” and execute the statement again? In your computer work fine now?

16

It works fine, you should trust

ionic serve

more than your IDE error messages, maybe its linter doesn’t detect the changes properly.

17

OK matheo, thank you very very very much for all :slight_smile:

18

You’re welcome, have fun!

19

Make sure you are in the right repo.

20

OH! That great!! Thak you very much!! I think that yesterday Im not in the right repo.
Now I have the problem Cannot find module “chat-message” and “socket-service”. I can not find the way to solve it.