React native and socket.io node not working

Question

Below is my react native component and node server.js code that I am trying to connect to my node websocket backend.

My react code is running on the same computer as the server. I have found so many varying answers on here, and github, none of which I can get working.

I also found this question which was never answered, and this question has an answer, which I cannot get working (was asked over a year ago)

I have found this article and tried to amend my code based on these guidelines but this did not work.

react code

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

const io = require('socket.io-client/socket.io');
let socket = io('http://localhost:3000');

export default class App extends React.Component {

    constructor(props) {
        super(props);
        console.log(socket);
    }

    render() {
        return (
            <View>
                <Text>Websocket</Text>
            </View>
        );
    }
}

server.js

const express = require('express');
const http = require('http')
const socketio = require('socket.io');

const app = express();
const server = http.Server(app);
const websocket = socketio(server);
server.listen(3000, () => console.log('listening on *:3000'));

console.log(websocket)

// The event will be called when a client is connected.
websocket.on('connection', (socket) => {
  console.log('A client just joined on', socket.id);
});

I am using the following versions of packages

"expo": "^16.0.0",
"react": "16.0.0-alpha.6",
"react-native": "^0.43.4",
"socket.io-client": "^1.7.3"

The article you linked to said to use require rather than import for the socket.io library. Did you try that? — Garrett McCullough
– Garrett McCullough, Commented May 3, 2017 at 4:45
Side question, I just used the built-in web socket library for React Native this past weekend for the first time. It seemed ok but it was my first time using web sockets. What advantage does the socket.io library give over the native library? — Garrett McCullough
– Garrett McCullough, Commented May 3, 2017 at 4:46
Have you tried using the ip address for localhost instead like: let socket = io('127.0.0.1:3000'); — ewein
– ewein, Commented Jan 2, 2018 at 17:55
please be adviced you should use your ip adress since you are connecting from another machine, android emulator in this case, ip must be something that normally starts with 192.168.1.52 — moein rahimi
– moein rahimi, Commented Mar 24, 2019 at 7:28

klvs · Accepted Answer · 2017-05-07 23:55:20Z

7

+25

I believe it should be

const io = require('socket.io-client');

Which does work for me.

I remember running into these sorts of issues when using react native. A lot of socket.io tutorials (including the one on their page) assume you're using an older style of importing JS via script tags in an HTML doc. It looks like socket.io changed the namespace as I do remember it being socket.io-client/socket.io some time ago if memory serves...

edited May 7, 2017 at 23:55

answered May 7, 2017 at 23:49

klvs

1,1897 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

xoux Over a year ago

Why is it a require and not an import? Why is there a difference?

klvs Over a year ago

You could use import if you want to. The difference between my answer and OP is socket.io-client vs socket.io-client/socket.io.

Kaiwen Huang · Accepted Answer · 2017-05-06 13:41:09Z

6

Your server code seems fine. Though you should check if you can connect to its socket via another client.

Anyway try this for react native code.

Import by:

import io from 'socket.io-client/socket.io'

In your component do:

componentDidMount () {
    const socket = io(YOURURL, {
      transports: ['websocket']
    })

    socket.on('connect', () => {
      console.log("socket connected")
      socket.emit('YOUR EVENT TO SERVER', {})
      socket.on('EVENT YOU WANNA LISTEN', (r) => {
      })
    })

    socket.on('connect_error', (err) => {
      console.log(err)
    })

    socket.on('disconnect', () => {
      console.log("Disconnected Socket!")
    })
  }

answered May 6, 2017 at 13:41

Kaiwen Huang

7861 gold badge5 silver badges11 bronze badges

4 Comments

Matt Aft Over a year ago

I have it set up like this and it's working fine...only difference is I'm importing like this import io from 'socket.io-client';

Kaiwen Huang Over a year ago

Oh that's great to hear. There could be namespace differences depending on the version of socket io. The code above should work as long as you can get the io function

Pentarex Over a year ago

transports: ['websocket'] this was a life saver for me!!! Thanks a lot!

Kaiwen Huang Over a year ago

Great! Dude who posted question never bothered choosing the right answer.

Nate · Accepted Answer · 2020-09-01 00:02:01Z

0

Also, on your server end, change const websocket = socketio(server) to const websocket = socketio.listen(server);

answered Sep 1, 2020 at 0:02

Nate

5451 gold badge5 silver badges14 bronze badges

Comments

ahuemmer · Accepted Answer · 2025-02-27 19:23:19Z

0

When you use localhost (127.0.0.1) in your React Native app running on an Android emulator, it's referring to the emulator itself — not your actual machine where the NestJS server is running.

The Android emulator runs in a virtual machine. It has its own internal network, so localhost points to the emulator's own environment, not your computer.

Try this:

const socket = io('http://10.0.2.2:3001', { transports: ['websocket'] });

edited Feb 27 at 19:23

ahuemmer

2,12717 gold badges30 silver badges38 bronze badges

answered Feb 27 at 7:51

KishorGupta

12 bronze badges

Comments

Yevhenii Herasymchuk · Accepted Answer · 2017-05-05 15:16:00Z

-1

Thanks, Peter. In my opinion, the article you have found isn't helpful because you are trying to connect to the host that serves the page. According to the example on socket.io page, try to make sure that this line works: const io = require('socket.io-client/socket.io'); and connect without link: let socket = io();

It worked for me, but only in the browser on the same computer. I think when you will test on the device you have to specify your IP instead of localhost.

Good luck :)

answered May 5, 2017 at 15:16

Yevhenii Herasymchuk

2,14718 silver badges20 bronze badges

Collectives™ on Stack Overflow

React native and socket.io node not working

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related