How to use socket.io in ionic?

Ionic Framework ionic-v3
1

I saw a tutorial where they do a chat with socket and ionic I tried to do but with a url of my api rest when running it I get this, can you please tell me the correct way to use it correctly?

import { DetallesPedidosPage } from './../detalles-pedidos/detalles-pedidos';
import { LoginProvider } from './../../providers/login/login';
import { ConexionesProvider } from './../../providers/conexiones/conexiones';
import { LocalizacionProvider } from './../../providers/localizacion/localizacion';
import { Http } from '@angular/http';
import { Component,ViewChild,NgZone } from '@angular/core';
import { NavController ,NavParams,Content} from 'ionic-angular';
import { AngularFireDatabaseModule,AngularFireDatabase, FirebaseObjectObservable  } from 'angularfire2/database';
import * as io from 'socket.io-client';


import { URL_SERVICIOS } from "../../config/url.servicios";
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  @ViewChild(Content) content:Content;

  domiciliario:FirebaseObjectObservable<any[]>;
  usuario:string='carlos'
  lat= this._G.lat;
  lng=this._G.long;
  detalles= DetallesPedidosPage;



  // nombre:any;
  // token:any;
  // id:any;
  /*--------------------------------*/
  resultado:any[]=[]
  constructor( public http: Http,public navParams: NavParams,public navCtrl: NavController ,public db:AngularFireDatabase,public _G:LocalizacionProvider,public _CO:ConexionesProvider) {


    this._G.iniciar_localizacion();
    this.Pmensajero();
  }

  Pmensajero(){



    let url = `${ URL_SERVICIOS }/pmensajero/${this._CO.token}/${this._CO.id}`;
   // let url = URL_SERVICIOS+'/pmensajero/'+this.mensajero;

    this.http.get(url).map(res=>res.json()).subscribe(resp=>{

		  if(resp.error){
		  }else{

      this.resultado = resp.ordenes
      /*----------socket------------*/
      let socket:any;
      let socketHost:string=URL_SERVICIOS;
      socket = io.connect(socketHost)
      socket.on("nuevo pedido",(msg)=>{


      })
      socket.emit('resultado',this.resultado);
      /*---------------fin de socket--------------------*/

      console.log(this.resultado)

		  }


    })


  }



}

image

2

Read the error message. The URI it is calling gives a 404 and is missing some required headers.

3

But I am indicating a url that is: URL_SERVICES or URL, and I am adding it in the socket = io.connect(url) and works well in the app

4

You just created a topic that says it doesn’t work and posted a screenshot that posted an error. Which is it?

5

I just recently followed a tutorial on Simon’s tutorial about creating a realtime chat application with Ionic and Socket.io.

When I got this error, it was because my socket wasn’t configured correctly.

In your backend (if you’re using php or whatever) make sure you do have a content header set to grant permission to your forguine database.

I don’t think this is the content header error, I think you need to reconfigure your socket.

After configuring your socket to the correct path like:
res.sendFile(__dirname + '/index.html');; then run your socket and client.

I recommend nodemon to likereload the server:
npm install nodemon -g

I’d also recommend setting your socket script server.js in your root.

Then run your socket/client (assuming your socket is 8100):
nodemon server.js then your client ionic serve --port 8100 -lc.

That should have you up and running or at least print an error in your console for us to resolve the issues.

Regards,
Neonic1

6

orry I’m translating and it does not translate well, when I say that it works for me is that lapirest only that socket does not work for me and I do not know what the reason is

7

Then that means your firewall is blocking the port/application

Regards,
Neonic1

8

Not really, as the browser reports getting an error 404 on an URL.

@millerjn Where should the Socket.io server actually run?
Your screenshot is indicating http://localhost/socket.io/, is this correct?

9

That should be correct in his case. Same was with mine.

Regards,
Neonic1

10

but it is not that this is http: // localhost: 8101 or her apirest is http: //localhost/supermarket/index.php

11

that’s what i find strange

12

Sorry, but these words don’t make any sense to me. Please spend some time on the words.

1 Like
13

Don’t worry about your API until you get the local environment setup first.

14

That this is not the url to which I am giving access with socket url are: http://localhost:8101 or http://localhost/supermarket/index.php

15

Yeah. By default your root accesses /socket.io/ as I said was correct. Make sure the script src is in your index.html to /socket.io/socket.io.js then it should work locally. Like I said, worry about your API after you have your server/client locally connecting.