Using socket-io with Ionic2

Ionic Framework ionic-v3
1

I need to use a socket.io connection to enable my ionic2 app.

I installed ``socket.io-client via npm so i can use it like this.

import * as io from 'socket.io-client'
.....
....
...
this.socket = io(this.conf.connectionServer);
this.socket.on('connect', () =>{
......
.....})

I does work when i’m using ionic serve in chrome or when running ionic run -l
but when i just build everything with ionic run it won’t work.
i was able to log the error messsge on the screen of my device:
Error: Failed to execute: open: on :XMLHttpRequest:: REfused to connect to : http://file/socket.io/?EIO.....: because it violates the documents Content Security Policy.....

My Content Security Policy is:

<meta http-equiv="Content-Security-Policy" 
    content="default-src 'self';                                                                                                                                ;
        style-src 'self' 'unsafe-inline'; 
        script-src 'self' 'unsafe-inline' 'unsafe-eval'
                    http://localhost:*
                    http://127.0.0.1:*
                
                    ;
        connect-src	'self'
                    ws://*
                    http://141.57.21.25:*
                    http://*.casualtv.de
                    http://file/socket.io*
                    ;

        img-src *;
        media-src *
    ">

But it but i cant find the right solution.

I’m using:

Cordova CLI: 6.0.0
Gulp version: CLI version 3.9.1
Gulp local:
Ionic Version: 2.0.0-beta.1
Ionic CLI Version: 2.0.0-beta.17
Ionic App Lib Version: 2.0.0-beta.8
OS:
Node Version: v5.6.0

2

Hmmmm, CSP is a tricky one to figure out. This post might help you figure more out

1 Like
3

Thanks for your quick reply Mike,

the odd behavior occure when building as .apk
NOT when using serve or even the livelreload option of run

in Chrome the connection goes to: http://141.XX.XX.XX/socket.io/
but on android it trys to connect to http://file/socket.io/

Even if I set the CSP to default-src *; (allow everything from everywhere)
Still it would work on Chrome/livereload but not on Android

Another hint:


someone suggest remove and re-Adding the platform may help… but it did not for me.

4

Hmmm, have you tried removing the CSP completely?

5

Hi Mike,
I think i tried everything. With no Sucess so far.

Removing the CSP-Meta-Tag does not resolve anything.

Removing the whitlist plugin: Even normal http-request are blocked with 404

I Came to the unterstanding that the problem might be realted to me store the src of socket.io-client in the node_modules

I will try to put them on the same server, when i have acess to it (this is a collaborative Research-Project)
but probably the issue may still remain, as i’m goning to connect to multiple servers in the near future.

any further hints?

6

I finally figured out a solution… yay!!

The problem was not really related to CSP

Is was my setup of the socket.io conneted:
I Used:

//this is wrong
this.statisticServer= “141.xx.xx.xx:8090/”;
…
this.socket = io(this.conf.statisticServer);

But it should be:

//this is right this.statisticServer= "http://141.xx.xx.xx:8090/";
…
this.socket = io(this.conf.statisticServer);

thanks again mike for your advises.

As a CSP i use:

  <meta http-equiv="Content-Security-Policy" content="
                                default-src *;
                                style-src 'self' 'unsafe-inline'; 
                                script-src * 'self' 'unsafe-inline' 'unsafe-eval';
                                connect-src * ;">

Which allows pretty everthing from everywhere

1 Like
7

Humm, i think the right and wrong ones look the same, typo in answer?

8

declare var socket: any;
import {App,Page, IonicApp, Platform, Storage, SqlStorage} from ‘ionic/ionic’;

I want to use socket variable in other pages . but declare var not working . Please help me

9

@lichillo17
no… they are not the same
you have to add http:// as protocol.
I think the probelm relates to the change of context when on a mobile device. But it’s way odd.

@lhteam

why don’t you move the socket.io-parts to an injectable service?
I you do it like this:

import {IonicApp} from ‘ionic-angular’
import {Injectable} from ‘angular2/core’;
import {Observable} from ‘rxjs/Observable’;
import ‘rxjs/add/operator/share’
import * as io from ‘socket.io-client’
//services
import {Config} from ‘…/config/config’

@Injectable()

export class ConnectionService {
conf : Config;
info : string;
nav$ : Observable<{}>;
_navObserver : any;
app;
private _isConnected: boolean;

socket : io;
  constructor(app: IonicApp,
  conf: Config){
          
    console.log("ConnectionService()")
    this.conf = conf;
    this.app = app;   
    this.socket=null;
    this._isConnected= false;
    this.info= "";
    this.nav$ = new Observable(observer =>{
            this._navObserver = observer;
        }).share();
    this.connect();
   
}
connect(){
     console.log("ConnectionService.connect()")
    this.socket = io(this.conf.connectionServer);
    this.socket.on('connect', () =>{
        //<initialize etc...
        console.log("ConnectionService.on.connect");   
        this.register(''); 
    })
    this.socket.on('sendFromConnectedDevice', (msg) =>{
        console.log("ConnectionService.on.sendFromConnectedDevice",msg);
        this.sendFromConnectedDeviceEventHandler(msg);
    });

now in your page you just subscribe to the observable of the injectable:
in my case i want to push or pop pages,

10

Sorry i didn’t notice that, i’m used to see working urls with and without the http:// part.

1 Like
11

hey guzs i want to create listener . websocket was used for listener?