Building a P2P Chat Room Web App with React and LioWebRTC

Introduction

This tutorial will show you how to build a web application using React and react-liowebrtc. As you follow along in this tutorial, you will learn how to use LioWebRTC to embed peer to peer communication right into your React components. For this tutorial, we will assume that you have at least a basic understanding of React.

LioWebRTC is a JavaScript library that facilitates peer to peer (p2p) communication between browsers, allowing you to quickly and easily let people communicate within your web app without having to write a single line of server-side code. We’ll be using react-liowebrtc (a React component library for LioWebRTC).

In this tutorial, we will cover the following:

1. Installing and using create-react-app.
2. Building a React component.
3. Adding react-liowebrtc.
4. Deploying your web app onto Netlify.

Click here to view a demo of the final product.

Getting Started with create-react-app

Before getting started, you’ll need Node 8.10.0 or later on your machine. To create a new app, you may choose one of the following methods (run the command in your terminal):

npx

npx create-react-app my-p2p-app

npm

npm init react-app my-p2p-app

Yarn

yarn create react-app my-p2p-app

Once create-react-app finishes, you will see an output similar to the following:

Figure 0.1

It will create a directory called my-p2p-app inside the current folder. Inside that directory, it will generate the initial project structure:

my-p2p-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 └── serviceWorker.js

Once the installation is done, you can open your project folder:

cd my-p2p-app

Now, install the project’s node modules using yarn or npm install.

Creating React Components

With the initial project structure and boilerplate code set up, we can now create custom components. Open up the project directory with your favorite text editor. In the src folder, create a new file called ChatBox.js.

This is where we will create our chat box component. Once the file is open, add the following code (we will change it later):

Figure 1.1

Once that’s in there, save ChatBox.js and open App.js. Delete the boilerplate code, and add the following. This code simply imports your new ChatBox component, and renders it in the app:

Now, let’s take a quick look at what we have so far. In terminal, start the web app with yarn startor npm start.

You should see something like this:

Figure 1.2

Now that we have a working React app, let’s build out the ChatBox component. Open ChatBox.js, delete everything, and add the following:

Now in your current working directory, create a new file called ChatBox.css. Paste the following CSS into the file:

Now, save ChatBox.js and ChatBox.css. Next, open App.js and update it to this:

What just happened

In your JS file, we made a chat box component that contains event handlers for when the user presses a key. When the user presses enter, the component will call the onSend function passed into its props by the parent component (App.js). In the App component, we created an empty array in the component’s state, and we called it chatLog. This also gets passed into the ChatBox component as a prop. The ChatBox component will render the chat log unless it’s empty. We made a ChatBox.css file which contains some CSS that’ll make the component look nice. After saving all three files, your project should look something like this:

Figure 1.3

Try typing something into the textbox and pressing enter. You should see your message show up in the chat box.

Putting the “P2P” in P2P Chat App

Now that we’ve got a working ChatBox component, we need to add the p2p communication. To do so, we need to install the react-liowebrtc package. Go back to your terminal, and enter:

npm install react-liowebrtc --save

Once that’s done, you should see output similar to the following:

Figure 2.1

Now we’ll need to go back into App.js and change a few things. First, import react-liowebrtc:

import { LioWebRTC } from 'react-liowebrtc';

Next, we need to wrap the ChatBox component with the LioWebRTC component we just imported. Your render function should look like this now:

Now, we need to create those handler functions that we see in the LioWebRTC component props:

Finally, we need to add the following object into our component state:

options: {
  debug: true,
  dataOnly: true
}

Now, your App.js should look something like this:

What just happened

We wrapped our ChatBox component in a LioWebRTC component, and we wrote some event handling functions that we passed into the LioWebRTC component’s props. We made event handlers for when LioWebRTC is ready to join a room, when a new peer is created, and when we receive data from a peer. We also added initializing options to LioWebRTC, stored in our state. In this case, we specified dataOnly, i.e. no video or audio channels. Take a look at the docs on GitHub for more information on LioWebRTC’s options, methods, and events.

Once you’ve saved App.js, open ChatBox.js. Add the following import:

import { withWebRTC } from 'react-liowebrtc';

Next, edit our handleSend function to use LioWebRTC:

Finally, we want to export our ChatBox app with the withWebRTC higher order component. At the bottom of ChatBox.js, change the export statement to the following:

export default withWebRTC(ChatBox);

That’s it! Save all your files, and open localhost:3000 in two separate tabs. You should be able to communicate!

Figure 2.2

What just happened

We imported the higher order component withWebRTC. Then, we added a line to the handleSend function to call the “shout” method of the webRTC session manager. This session manager object, props.webRTC, is callable from all child components of the LioWebRTC component as long as the child component is exported using withWebRTC. If you’re familiar with React, you may notice that this pattern is similarly used in theming.

Publishing Your Web App

Now we just need to publish our web app to Netlify so all our friends can use it too. Go back into your terminal and run:

npm run build

Figure 3.1

This should create a folder in your project directory called “build” (Figure 3.1). Next, head to https://netlify.com/ and log in or sign up. Once you’re in your dashboard, there should be a box where you can drag and drop your build folder.

Figure 3.2

After dragging and dropping your build folder, your site should be deployed. Netlify should automatically generate a domain name.

Figure 3.3

And that’s it! You can now visit the URL, send it to friends, and chat over the internet! 🙂

A Note on Signaling

WebRTC needs to be facilitated with signaling; a service that acts as a matchmaker for peers before they establish direct video/audio/data channels. Signaling can be done in any way, e.g. via good old fashioned carrier pigeons. Signaling services only need to fulfill the absolute minimal role of matchmaking peers.

LioWebRTC uses SignalBuddy to facilitate signaling. LioWebRTC works out of the box with a demo SignalBuddy server that was intended for testing purposes. However, for production purposes, IT IS NOT RELIABLE. In production, you will need to set up your own SignalBuddy server (or any other socket.io solution that implements matchmaking).