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"

Answer 1

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!")
    })
  }

Answer 2

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...

Answer 3

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 :)