DEV Community 👩‍💻👨‍💻

Cover image for Create a peer to peer chat app with webRTC
EneasLari
EneasLari

Posted on

Create a peer to peer chat app with webRTC

In this article we will use webRTC and socket.io to create a peer to peer chat app between two clients.

The server
We need a server for signaling in order to establish a connection between the two peers. The two clients must know where is the other client.

Initialize a new node.js project:
npm init

Install express:
npm install --save express

Install socket.io for signaling:
npm install --save socket.io

Install ejs for server side rendering:
npm install --save ejs

Install nodemon for auto rerun after code change
npm install --save nodemon

Server code: server.js
This is the simplest server for signaling in order to connect max two peers and one view:

Code explanation

  • At line 12 we use express and ejs to render a simple html page that will help us to make the UI for the file sharing.

  • At line 16 a http server is created and is set to listen to port 3000 or the port defined by a PORT environment variable at line 18

  • At line 20 a new instance of socket.io is initialized and we pass http server as a parameter.

  • At line 22 we listen at the connection event where we have defined all our other events that occur after connection.

  • function log() is a function that emits to the client who sent the message a log event and some message that is defined in the arguments as an array

Lets talk about sockets events that are defined inside our server code.

  • create or join when the server receives this event from the client initially at line 44 it gets the number of clients in room.
    and stores it in var clientsInRoom, if this variable is null then we define the numClients as zero otherwise we set it as the clientsInRoom. At line 49 if the clients who sends the message is the first then we emit the created event to the client otherwise at line 54 if is the second who sends this message we send join to the first client, we join the second client and a joined event is sent to the second client that just joined the room.
    At the end the two clients will receive ready event.
    If anyone else except these two clients send other create or join event he will receive a full event.

  • ipaddr event is for signaling webRTC

Now for the clients:

For the client your will need a config.js file which contains a json object for STUN/TURN server. I will not explain in details what is this for in this article but it is necessary to help two clients to exchange their public IP Addresses.
The gist above is not correct for security reasons but you can create your own config object at xirsys

The client JavaScript:

The view:

Edit the package.json to look like this:

Run the project

npm run dev

Now open two tabs on browser and click connect in every tab , also open debug window to see logging(f12)

Image description

Now that we have made a peer to peer connection we can create a data channel so clients can send messages to each other.

We will only modify the client code:

Lets add a textarea , a send button and printout the messages in the browser

Now run again the project with:

npm run dev

After you click connect in two browsers you see that send message buttons are being enabled

Write a message in the textarea, then click send and see the message in the other tab

Congratulation we made a super message app with some incredible UI!

Image description

Source Code

Thanks for your time.
Leave a question or comment below.

Top comments (1)

Collapse
 
mdjahidhasan09 profile image
MD Jahid Hasan

For only chat system no need to add stun and turn server. If you want to add video than you will need those.

Every Week

We have a Welcome Thread where we invite members to tell us a bit about themselves. Join the conversation with us!