CODEWITHSUNDEEP
angularexpresssocket.ioionic-native
Ctfrancia
Ctfrancia

Reputation: 1588

connecting ionic4/socket.io to expressjs net::ERR_CONNECTION_REFUSED

I get net::ERR_CONNECTION_REFUSED all the time, even when the server is not running.

When running the application through my browser it works fine, but, then through the device and ran natively I get the error above.

I feel like I have tried everything to resolve this issue. I have read so so so many stack overflow questions with the same issue. and none of them have helped.

app.module:

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

note: above I have also tried:

'https://localhost:8080'

'https://localhost:8080/'

'http://localhost:8080/'

'127.0.0.1:8080'

'127.0.0.1:8080/'

'http://127.0.0.1:8080'

'http://127.0.0.1:8080/'

'https://127.0.0.1:8080'

'https://127.0.0.1:8080/'

socketio server:

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

note: I have tried all the same variations as above in the origins: except changing the port since my Ionic 4 app is running on Port 8100. I have also tried not including the origins:

my SocketService: 

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

@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);
          })
        })
      }
    }

What I am expecting it to do is connect, and for my server to register that there has been a connection.

Thanks for any help

UPDATE: I've configured my config.xml as such:

   <content original-src="index.html" src="http://192.168.1.38:8100" />
    <access origin="*" />
    <allow-navigation href="*" />

no such luck. still blocked though

Upvotes: 0

Views: 722

Answers (2)

Ctfrancia
Ctfrancia

Reputation: 1588

So, I solved the issue. The issue is stupid enough and I am ashamed to have solved it like this. But the issue was that when I was trying to connect the phone to the server I was using the IP address of localhost 127.0.0.1:8080 which on the CLIENT side is looking inward to itself! What I needed to do was go to Apple->System Preferences->Network and then use the IP address from:

Wi-Fi is connected to MOVISTAR_PLUS_52B1 and has the IP address 192.168.X.XX.

put that into my config as such: const config: SocketIoConfig = { url: 192.168.X.XX, options: {}};

Upvotes: 0

Falyoun
Falyoun

Reputation: 3966

Once i would smash my laptop for this error after trying and searching i got the answer as following

Firstly

To run it on your device you have to put you IP Adress like 192.168.1.2 in your application, You can get by opening CMD and type ipconfig if you are using windows, So in your app it must be

const config: SocketIoConfig = { url: 'http://IP_ADDRESS:8080', options: {}};

Secondly

Which was my problem actually, Please go to firewall and disable it just for testing,If you want to produce your app you have to enable only the port your app running on

Please note that you have to turn it off for accepting the connection on your specified port

Finally

Make sure that your local server accepting request from your client-side, You can use Cors external package.

To install it:

npm install cors --save

To use it:

const cors = require('cors');
app.use(cors({
  origin: '*', //Or some origins you can specify
  optionsSuccessStatus: 200
}));

Upvotes: 1

Related Questions