DEV Community

Sumrit Grover
Sumrit Grover

Posted on

React Native Chat App using

React Native with

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 connect the client to the server. The useRef hook is essential to reference the socket.

Image description

Discussion (0)