Ionic websocket library socket io emit and fromevent methods not working

211 views Asked by At

In my ionic project (version 6.x),I am using socket io library "ngx-socket-io": "^4.4.0", to connect to my socket io server written in java backend. I am able to make connection , I can see the connected log in server console, but not able to send message to server or receive the message in app. However in network tab of google chrome I can see that event is being received from server and the message is correctly getting printed in the network tab. But my console logs are not getting printed.

And for emit I am not able to send the message to the server.

Here is my code

app module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://localhost:8086?room=a&token=abc123', options: {transports: [ 'websocket','polling']}};

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(),
    SocketIoModule.forRoot(config),
     AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component

import { Component } from '@angular/core';
import { Socket } from 'ngx-socket-io';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {

  constructor(private socket:Socket) {}


  ngOnInit() {
    this.socket.connect();

    let name = `user-${new Date().getTime()}`;
    

    this.socket.emit('send_message',  {"room":"a", "type":"CLIENT","message":"my 1st message"});

    

    this.socket.fromEvent('get_message').subscribe(message => {
      console.log("message received is "+message)
    });

    this.socket.fromEvent('connect').subscribe(message => {
      console.log("Connected now "+message)
    });
  }

  sendMessage() {
    this.socket.emit('send-message', {"room":"a", "type":"CLIENT","message":"my 2nd message"});
   
  }

  ionViewWillLeave() {
    this.socket.disconnect();
  }

  connect(){

  }

 
}

None of my console logs are getting printed. I am not sure what is the issue. Here is the full package json dependencies

"dependencies": {
    "@angular/common": "^15.0.0",
    "@angular/core": "^15.0.0",
    "@angular/forms": "^15.0.0",
    "@angular/platform-browser": "^15.0.0",
    "@angular/platform-browser-dynamic": "^15.0.0",
    "@angular/router": "^15.0.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/camera": "^4.1.4",
    "@capacitor/core": "4.5.0",
    "@capacitor/filesystem": "^4.1.4",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/keyboard": "4.1.0",
    "@capacitor/preferences": "^4.0.2",
    "@capacitor/status-bar": "4.1.0",
    "@ionic/angular": "^6.1.9",
    "@ionic/pwa-elements": "^3.1.1",
    "ionicons": "^6.0.3",
    "ngx-socket-io": "^4.4.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

network tab scr

0

There are 0 answers