Socket.io Ionic


#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.


Example of including socket.io in Ionic 2?
#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


Example of including socket.io in Ionic 2?
#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!


Import socket.io-client not working
#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.