Dynamically Connect React Native App with Server through Socket on Button Click Android iOS Tutorial

Hi Guys, Today through this tutorial I am going to explain very interesting topic and this is how we can Connect React Native App with Server through Socket on Button Click. I was always wanted to perform these types of tasks in react native from a very long period of time and today I am sharing this very basic but important knowledge through this tutorial.

In brief, what I am doing in Dynamically Connect React Native App with Server through Socket on Button Click tutorial?

  • First of all, we need to install two third party libraries and these libraries are as follows:
    • socket.io : Responsible to create server.
    • socket.io-client : Responsible to create client.
  • Then we create a server through socket.io and client through socket.io-client libraries.
  • Then import the client file in our react native app and start the server on system.
  • Then on button click open the socket, connect with the server and get message form server with client ID in our react native app.
Note: Your computer on which server is running and your mobile development machine ( emulator / physical ) must be shared same network.

Let’s begin…

Step – 1: Move your current location to your react native project directory through command prompt and install socket.io library through this command.

If library will be successfully installed then you will get the following output:

Step – 2: Install socket.io-client library through this command.

If library will be successfully installed then you will get the following output:

Step – 3: Create two folders named server, client under your react native project directory as follows.

Step – 4: Create a file named server_file.js under your server folder and write code for it.

Explanation:

  • It’s a js file which will be run through node.
  • const port = 3000;  is responsible to declare a port number on which server and client will communicate.
  • Through io.listen(port); command allows server to listen to clients on port 3000.
  • The on  statement allows server / client to start listening and emit  statement allows server / client to start speaking. The connection  event will be fired when a new client is connected to the server. In our case, When a new client is connected to the server then each client started listening through custom createConnection  event. This createConnection  event will be fired through emit  from the client side. When the createConnection  event will be fired from client side then it started emitting on the client through connectionResponse  custom event. This connectionResponse  event will be registered on the client side and through server we will fire this event with client ID.

Step – 5: Create a file named client_file.js under your client folder and write code for it.

Explanation:

  • In openSocket('http://<your-ip_address>:3000'); statement supply your IP address. For security reasons, I am hiding my IP address.
  • This custom getConnected  function will be fired when we click on the button through react native app and this function connects your client with the server on port number 3000. First of all, we register the connectionResponse custom event and emit the createConnection  custom event on the server and the server will emit the connectionResponse  custom event with unique client ID for newly created client.
  • As you noticed that I am passing a callback as a parameter to getConnected method. Actually this is a function which is responsible to update the state variable with returned client ID in our react native app’s Text component.
  • Using disconnect  function, I am disconnecting the socket because whenever you click on the button again then new socket connection will be opened and for best practice previous socket connection must be closed before creating the new one.

Step – 6: Import required components from react , react-native  packages and import client_file.js  file in our react native app.

Step – 7: Implement constructor  method.

Step – 8: Implement connect  custom method which is responsible to execute the getConnected  method of client_file.js file and update the state variable with the newly created client ID.

Step – 9: Implement render  method.

Step – 10: Implement styles for all required components.

Graphical Representation:

Complete Source Code:

  • server_file.js:

  • client_file.js:

  • React Native File:

Step – 11: Execute react-native run-ios  to run app in iOS devices and / or execute react-native run-android  to run app in Android devices.

  • iOS Screenshot:

  • Android Screenshot:

Enjoy guys and have a nice day… 😉

2 Comments

  1. Hi there, i would like to ask 2 questions.
    * let say if i’m not connecting to localhost, and I try to connect to an existing external server. I don’t need to create the server file from my side, right? i just need to create the client file only, right?

    *socket = openSocket(‘http://aaaaa’);
    console.log(socket);
    {
    console.log(response) <—– It's just wont get the response
    callback( response );
    socket.disconnect();
    });
    socket.emit('createConnection');

    • – Yes, if you implement server functionality on an external server then you only need to create client file.
      – I have to check it and then let you know.

Leave a Reply

Your email address will not be published. Required fields are marked *