Antes que nada, los modulos Http y HttpClient son modulos muy parecidos, solo que digamos que HttpClient es la version mas "actualizada, moderna y segura" de estos modulos, esta se puede usar creo que apartir de angular 7 y ionic 4, así que recomendaria que en vez de usar http, usaras HttpClient:
import { HttpClient } from '@angular/common/http';
Luego lo inyectas en el constructor:
constructor(public http: HttpClient){}
Ahora bien, tienes algo que puede mejorarse en el código, pero antes deberias importar el modulo Observable:
import { Observable } from 'rxjs';
Una vez teniendolo importado tenias la siguiente línea:
const http = this.http.post<any>(URL_SERVER+'/api/createCompra', nuevaCompra);
Esto lo que te devuelve es un Observable si no estoy mal, lo ideal sería que le especificaras a ionic de que tipo va a ser el valor, en este caso un observable:
const http:Observable<any> = this.http.post(URL_SERVER+'/api/createCompra', nuevaCompra);
Ahora, como estas usando httpClient directamente te da la data traida del post como un json, por lo que dentro de este puedes hacer operaciones directamente como si fueran un json de js, (fijate que se retorna res y err):
http.subscribe(
res => {
this.socket.emit('modCompras', res);
return res;
},
err => throw Exception(err);
)
return http;
Ahora, intenta instalar ngx-socket-io en la carpeta raiz del proyecto si tienes ionic4 o superior:
https://www.npmjs.com/package/ngx-socket-io
Ahí te mostrara el funcionamiento base de este plugin, este te permite manejar directamente desde angular sockets por parte del cliente en angular usando observables, los cuales son bastante utiles.
Debes leer el ejemplo y adaptarlo para la escucha de eventos desde tu front para poder que esta información cambie de acuerdo a los eventos y la data traida por el backend en nodejs.
Que por cierto, para poder que esto funcione necesitaras usar es el el link junto con el puerto donde se encuentra corriendo tu servidor de nodejs, esta configuración se crea en el app.module y se veria algo así:
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
Entonces en vez de poner "http://localhost:8988" colocarias la dirección de tu servidor de node y el puerto correspondiente, y en caso dado de que el servidor rechace la conexión debes permitir los origines desde el backend, pero debes hacerlo con una mayor investigación, hacerlo de la siguiente manera se considera realmente inseguro (debes investigar mas a fondo que restricciones le puedes poner en vez de usar * en Allow-Origin y en origins):
const app = require('express')();
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
});
const http = require('http').Server(app);
const io = require('socket.io')(http, {origins: '*:*'});
Debes modificar los origenes y los metodos a tu conveniencia, no te puedo dar mas información al respecto ya que desconozco que metodos de origen son fiables o que se podría poner, esto debes investigarlo mas a fondo tu mismo...
De momento lo que podrias hacer para probar si efectivamente sirve, es hacerlo localmente, (crear o copiar el script que tienes subido y usarlo de manera local corriendolo con nodejs) y usando el asterisco en origins, y una vez este a la escucha cambiar tu configuración:
const config: SocketIoConfig = { url: 'http://localhost:8988', options: {} };
desde la app a localhost y tu puerto y ver si desde la app funciona (recuerda lo de escuchar con observables), lo que retorna io.on('evento') desde el frontend usando ngx-socket-io es un observable, por lo que debes hacer una subscripción y ya dentro de ella si tratar los valores, puedes hacerlo desde un metodo de la clase y llamarlo desde el constructor y que este se encargue de hacer las subscripciones a los eventos, o directamente hacer las subscripciones a los eventos desde el constructor, (que no creo que sea buena idea ya que queda un poco mas sucio el código).
Por ejemplo, esto es un ejemplo desde una pagina cualquiera.ts en ionic que de hecho es una app en la que estoy trabajando:
//Dentro de la clase:
public getConnSubscriber: Subscription;
public connections:Array<any>;
ionViewWillEnter(){
this.setup();
}
setup(){
this.setupConnectionSubscriber();
}
setupConnectionSubscriber(){
this.getConnSubscriber = this.getConnections().subscribe((data:Array<any>) =>{
/*Esta parte es diferente en mi código y no tengo el array
*connections, pero igual funcionaria.*/
this.connections = data;
}
}
getConnections(){
let observable = new Observable(observer =>{
this.socket.on("users-changed", data =>{
observer.next(data);
});
});
return observable;
}