bug: on Android ERR_CONNECTION_REFUSED zone.js 3243 (Ang7, ion4, socketio, express)

[ctfrancia]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

While running the app on the device it will not connect to express server

Expected behavior:

to connect to server

Steps to reproduce:

Related code:

config.xml

<name>MyApp</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-navigation href="*" />

express server.js

require('dotenv').config({path: __dirname + '/.env'});
const app = require('express')();
const cors = require('cors');
const PORT = process.env.CHAT_PORT || 3000;
const ENV = process.env.NODE_ENV || 'development';
const server = require('http').createServer(app, {origins: 'http://192.168.1.38:8100/'}); 
const io = module.exports.io = require('socket.io')(server);
const SocketManager = require('./lib/SocketManager');

app.use(cors());

// server setup
server.listen(PORT); // I have omitted the console.log that prints out the port but the correct port is being ran on 8080.

io.on('connection', SocketManager);

index.html

<script src="http://127.0.0.1:8080/socket.io/socket.io.js"></script>

app.module.ts

import { SocketIoModule, SocketIoConfig } from 'ngx-socket-io';
const config: SocketIoConfig = { url: 'http://127.0.01:8080/', options: {}};

imports: [..., SocketIoModule.forRoot(config)]

page that uses socket connection

  async ngOnInit() {
    this.chatService
      .getMessages()
      .subscribe(messageObj => {
        this.messages.push(messageObj)
      });
  }

chatService

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

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  constructor(private socket: Socket) {}

  public sendMessage(msg: any){
    this.socket.emit('new-message', msg);
  }

  public getMessages = () => {
    return Observable.create(observer => {
      this.socket.on('new-message', messageObj => {
        observer.next(messageObj);
      })
    })
  }

Other information:

I have followed all previous suggestions with connecting. However, it will not connect. For example when I don't have my server running I get the same issue, which is telling me that it has to be something wrong with the config.xml or some type of manner that I am connecting that the phone doesn't like.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.6
   @ionic/angular-toolkit        : 1.4.1

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 8 other plugins)

System:

   Android SDK Tools : 26.1.1 (/Users/c.francia/Library/Android/sdk)
   NodeJS            : v10.15.3 (/usr/local/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[ctfrancia]

So, I'm stupid. to fix the issue: (mac os x) System Settings -> Network -> use the IP Address you find there in place of the localhost so in app.module.ts put const config: SocketIoConfig = { url: 'http://IP_ADDRESS_FROM_NETWORK:8080/', options: {}};

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.