Search code examples
androidsocket.ioclient-serverionic4nodejs-server

Ionic 4 android app not connecting to local node js server when running on real android device


I am trying to implement a client-server communication for my Ionic 4 android app. I have a local node js server implementation on my pc and I am using socket.io to establish the communication. The problem is that when I am running the app on browser or on emulator the communication between the app and local server is ok but when I am trying to run the app on a real android device (samsung galaxy s9+) the app cannot connect to the local server. More specific the message 'User Connected' is not appeared on the server console to indicate that app is connected to the server and therefore user never gets back his userid.

Can anyone help me to find out why?

Server side

index.js

let app = require('express')();
let server = require('http').createServer(app);
let io = require('socket.io')(server);

// Allow CORS support and remote requests to the service
app.use(function(req, res, next)
{
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization');
  next();
});

// Set up route 
app.get('/', (req, res) =>
{
  res.json({ message: 'You connected to panic Shield server' });
});

var port = process.env.PORT || 8080;

server.listen(port, function(){
  console.log('listening in http://192.168.x.x:' + port);
});

const uuidv4 = require("uuid/v4");

// User connected to the server
io.on('connection', (socket) => {

  console.log('User Connected');

  socket.on('disconnect', function(){});

  socket.on('set-credentials', (credentials) => {
    let userId = uuidv4();
    ...
    // server informs user for his unique id
    socket.emit('your user id', userId);
    ...
  }
});

Client side

app.module.ts

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://192.168.x.x:8080', options: { secure: true } };

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    HttpClientModule,
    SocketIoModule.forRoot(config)
],
...

home.page.ts

import { Socket } from 'ngx-socket-io';

constructor(private socket: Socket) { }

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

async connectToServer(name, surname, gender, speech) {
  const str = name.concat(' // ').concat(surname).concat(' // ').concat(gender).concat(' // ').concat(speech);
  this.socket.emit('set-credentials', str);
  this.socket.on('your user id', (data) => {
    this.userId = data.toString();
    // save the userId
    set('userId', this.userId);
    // Refresh the page
    window.location.reload();
  });
}

Solution

  • I found the problem. In my case, the firewall of my pc doesn't allow any other device on local network connect to the server. When I turned off the firewall the connection between client-server was established!