React Native Chat App using Socket.io

grover_sumrit

Sumrit Grover

Posted on November 22, 2021

React Native Chat App using Socket.io

React Native with Socket.io

Let's create a basic chat app using React Native as your frontend and socket as your backend

Socket IO

The formal definition is that socket enables real-time, bidirectional event-based communication between the client and the server. It consists of a Node.js server and JS Client

This basically means is that data is transported between server and client in realtime.

Basic Socket Event Handlers

  • item 1 On - on() listens for a ‘connection’ event and will run the provided function anytime this happens.

io.on("connection", (socket) => {});

  • item 2 Emit - emit() to send a message to all the connected clients io.emit("message", {message,sid,time,rid});

Server Code with Socket

The server code is written on a node server using HTTP and express

Image description

Client side code with React Native

Using socket.io-client connect the client to the server. The useRef hook is essential to reference the socket.

Image description

💖 💪 🙅 🚩
grover_sumrit
Sumrit Grover

Posted on November 22, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

React Native Chat App using Socket.io
reactnative React Native Chat App using Socket.io

November 22, 2021