DEV Community: Lior Ben-David

Building a Video Chat App with Socket.io, PeerJS, Codesphere

Lior Ben-David — Fri, 26 Mar 2021 20:33:48 +0000

The Coronavirus pandemic has made video chat the primary method of communication that we rely on. Whether it’s for school, work, or just talking to friends and family, we end up video chatting almost every day in the age of Coronavirus. Contrary to popular belief, building your own video chat app is not too difficult.

In this tutorial, I’ll be outlining the structure of building a basic chat app with the following technologies:

Node.js
ExpressJS
EJS
Socket.io
WebRTC(w/ PeerJS)
Codesphere

If you’d like to follow along line by line, you can find the source code here:

https://github.com/LiorB-D/VideoChat

You can also try out a demo for yourself here!
Once the app loads in, you can run it with
npm ci && node server.js

Explanation of Different Technologies We’ll Be Using in this Project

Part of the reason I loved building this project is that it allows us to dip our toes into a number of useful technologies.

Node.js

Node.js is a runtime environment that allows us to run JavaScript code independent of a web browser. It is essential to practically any web application that involves more than basic JavaScript integration.

If you haven’t worked with it before, you can download it here:

https://nodejs.org/en/

Since we are building our app in Codesphere, Node.js is already installed.

ExpressJS

ExpressJS is a server framework for Node.js. It is the go-to framework that is used in building web applications and APIs and is pretty intuitive to use. We are going to be using Express to run our video chat server.

EJS

When you first learn web development, you learn how to embed JavaScript within an HTML page. For websites that need limited back-end logic, this is a super convenient way to develop the app. More frequently, however, we see developers using frameworks, like React and Angular, that generate the HTML pages from JavaScript. This allows developers to have a lot more freedom when building web applications since they are not limited by the skeleton of an HTML file.

EJS on the other hand is a simple framework that will allow us to render and serve HTML files from our Express server. This is where our videos will be shown.

UUID

When a user first opens our chat app, we want to create a room for them with a unique identifier.

UUID is a protocol for generating a random unique identifier. There is a UUID package that can generate it automatically for us.

Socket.io

Socket.io is a relatively easy-to-use JavaScript library for creating real-time communication apps. While it has both a client-side and a server-side library, we are going to be using the server-side library to manage communication between users.

WebRTC and PeerJS

WebRTC (Real-Time Communication) is the underlying technology in browsers and mobile apps that allows for real-time communication.

Since working with WebRTC directly can be a bit complex, we are going to be using PeerJS which allows us to use WebRTC in an incredibly easy way.

PeerJS also provides a free cloud service that we will be using to host our rooms.

Codesphere

Lastly, Codesphere is an online collaborative programming environment and cloud provider. With Codesphere you can build your web app ready to scale without all the cumbersome config. In this project, Codesphere is going to allow us to create and deploy our Video Chat app seamlessly.

https://codesphere.com

Installations

First, we need to set up the base of our Node project with
npm init -y

Next, install all our necessary packages
npm i express ejs socket.io uuid peer

In addition to these packages, we are going to install a tool called Nodemon. Nodemon will automatically update our deployed code whenever we save, so
npm i --save-dev nodemon

Finally, in our package.json file, we are going to add a script to start our server.



"scripts": {
    "watch": "nodemon server.js"
 },

Creating our Server

We are going to create a file called server.js with the following code:

Our server.js file is going to run our video chat server. From it, we are going to redirect the user to a room and show them the ‘room’ webpage.

Building our EJS Page

Next, we are going to make a views directory and create an EJS file in it, called room.ejs

This is a template that will be used to render the HTML page for the user. This HTML page is going to use the script.js file to connect to the server.

Our Client-Side Script

Finally, we are going to create a directory called public and within it create a script.js file:

This is the client-side code that handles interacting with the server and other users.

Deploying in Codesphere

Deploying in Codesphere is as easy as running
npm run devStart
In terminal

We can then access the deployed web application like so:

Next Steps

And there we go! With this setup, we’ve made a very basic video chat app that you can use to communicate with friends!

Obviously, before making a commercial video chat app, you are going to want to implement a number of more complex features, including:

Privacy/Encryption
User Authentication
An appealing UI
Group calls
Using your own servers, instead of relying on PeerJS’s free cloud service

TUTORIAL: How to open a GitHub project in Codesphere

Lior Ben-David — Tue, 16 Mar 2021 17:29:21 +0000

Codesphere is a development ecosystem that combines a collaborative IDE, GitOps, and cloud services to streamline the development of scalable web applications.

Nowadays it’s hard to imagine development without using git. That’s why in today’s article we’ll show you how to clone your git project from GitHub and open it in Codesphere.

Clearing the working directory

At the moment, when a new app is created Codesphere clones a default project from GitHub. To quickly clear out the working directory we can run the following command in the terminal:

rm -rf ..?* .[!.]* *

Cloning a GitHub repository

To clone a GitHub repository, we first need to find the repo’s web URL. This will typically be:
https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git

To find the right one, navigate to the green code button on your repo’s main page.

Then click on ‘https’ and copy the URL.

After that, navigate back to Codesphere and run the following command in the terminal to clone the repo:

git clone URL

For example, here is how this command looks for me:

git clone https://github.com/LiorB-D/ToDoList.git .

Finally, your project should now appear under Code in the file tree.

Thanks for reading!

By the way, the direct GitHub integration is coming soon to make the version control process as simple as possible.

Stay tuned and happy coding!

Creating a Trivia Game with React and Codesphere

Lior Ben-David — Thu, 04 Mar 2021 23:35:43 +0000

There are few things as exciting as the “I know that one!” feeling one gets in a trivia game. The rush of being able to answer a niche and random question is a major reason why game shows have been a TV staple for almost as long as televisions have existed.

I recently came across OpenTDB, a free user-contributed trivia question database. Naturally, my first thought was to use it to create a trivia app. Though not incredibly complex, this project serves as a fun introduction to a number of React topics:

Developing and Deploying a React App with Codesphere
Working with an API
Using useEffect and useState

The final result:

Creating a React App with Codesphere

Codesphere is an online, collaborative programming environment and cloud provider. With Codesphere you can build your web app ready to scale without all the cumbersome config. In this project, Codesphere is going to allow us to create and deploy our React app seamlessly.

Codesphere is currently in early access but will launch fully soon. If you would like to join the early access, I have a number of keys that I can give out — leave me a comment with your email and I’ll send you one.

Once you are signed in, Codesphere should loan you in with an example project. We are going to delete the contents of the example project by running the following command in the terminal

rm -r ../app/*

We can then go ahead and make our React App from the terminal with the command:

npx create-react-app trivia

Finally, to make sure everything is running smoothly, we can run:

cd trivia && npm start

Before we continue, it will be helpful to get rid of the create-react-app example and have our App.js look like the following:

Accessing the OpenTDB API

Open Trivia Database(OpenTDB) offers us an API that we can call to receive a given number of questions on a given topic. You can generate a custom API Url here:
Open Trivia DB
*To get started using the Open Trivia DB API, use this URL: For more settings or help using the API, read along below…*opentdb.com

In this project, we are going to be using the following API URL:

const url = "[https://opentdb.com/api.php?amount=10&category=19&type=multiple](https://opentdb.com/api.php?amount=10&category=18&type=multiple)"

This URL will give us ten multiple-choice questions in the Math category, but I encourage you to pick whatever topic interests you!

Before we start, make sure to import useEffect and useState at the top of our App.js:

*import {useState, useEffect} from 'react';*

Our next step is going to be defining a number of stateful variables with useState:

const [questions, setQuestions] = useState([])
const [loaded, setLoaded] = useState(false)
const [qInd, setQInd] = useState(0)

The questions variable is going to be an array of question objects we get from the API. The loaded variable is going to let us know if the questions have been loaded yet, so we don’t accidentally try to access them too early. Finally, qInd(As in “question index”) is going to track the current question we are on in our array.

const loadQuestions = async () => {
let response = fetch(url).then(response => response.json()).then(data =>       {
   setQuestions(data.results)
   setLoaded(true)
  })
}

To make sure that it’s working properly, let’s display the current question in our app. We have to make sure, however, that the question loads only if our loaded variable is true. The app will crash otherwise because you are attempting to load an element from an empty questions array.

return (
  <div className="App">
    {loaded && <div>
    <p className = "Question">{questions[qInd].question}</p>
    </div>
    }
  </div>
 );

This should render the following:

Accepting User Inputs

If you look at the question object’s structure, the correct_answer value is stored separately from the rest of our answers. To get all our answers in the same place, we are going to insert the correct_answer randomly among our incorrect_answers whenever we load a question.

We’ll adjust our loadQuestions function like so:

const loadQuestions = async () => {
let response = fetch(url).then(response => response.json()).then(data =>       {
   insertCorr(data.results[0].incorrect_answers, data.results[0].correct_answer)
   setQuestions(data.results)
   setLoaded(true)
  })
}

Where insertCorr() is defined as follows:

function insertCorr(arr, corr) {
    const randInd = Math.floor(Math.random() * 4)
    arr.splice(randInd, 0, corr)
}

Now that all of our questions are in a singular array, we can map through them and create buttons fairly easily:

return (
  <div className="App">
    {loaded && <div>
    <p className = "Question">{questions[qInd].question}</p>
    * {questions[qInd].incorrect_answers.map((a) => {
      return <button key = {a} onClick = {(e) => handlePrsd(e, a)}>{a}</button>
     })}
    *</div>
    }
  </div>
 );

For simplicity, we are going to set each buttons’ key to be its answer and have it call a handlePrsd function which we will define next. We are going to have this function accept two parameters: The click event and the answer that was pressed.

For our handlePrsd function, we want it to iterate to the next question. If we are at the end of our question array, we want it to load new questions:

*const handlePrsd = (e, ans) => {
   e.preventDefault()
   if(qInd + 1 < questions.length) {
      insertCorr(questions[qInd + 1].incorrect_answers, questions[qInd + 1].correct_answer)
      setQInd(qInd + 1)
    } else {
      loadQuestions()
      setQInd(0)
    }
}*

Now we should see the following:

Managing Score

The next step is going to be to manage the user’s score. To do so, we are going to create some stateful variables:

const [score, setScore] = useState(0)*
*const [lastAns, setLastAns] = useState('black')

The score variable will of course store the user’s score. The lastAns variable is going to store the color we want to display the score in, which will be black by default, green if the last answer was correct, and red if the last answer was incorrect.

We will then add a p tag in our App to display the score value in the correct color:

<p className = "Score" style=

{{color: lastAns}}

Score: {score}

Finally, we need to update our handlePrsd function to change the score if correct. To do so, we will check if the pressed answer is the same as the correct answer. If so, we will add ten points, if not, we will deduct 10.

*const handlePrsd = (e, ans) => {
   e.preventDefault()

    if(ans == questions[qInd].correct_answer) {
       setScore(score + 10)
       setLastAns('green')
    } else {
       setScore(score - 10)
       setLastAns('red')
    }*

*    if(qInd + 1 < questions.length) {
      insertCorr(questions[qInd + 1].incorrect_answers, questions[qInd + 1].correct_answer)
      setQInd(qInd + 1)
    } else {
      loadQuestions()
      setQInd(0)
    }
}*

And our final result is:

There we go! Functional, but quite ugly. Let’s style it!

Making Everything Look Pretty

.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-top: 100px;
  text-align: center;
}

button {
  color: #fff;
  text-decoration: none;
  background: #1b95db;
  padding: 20px;
  border-radius: 10px;
  font-size: 22px;
  display: inline-block;
  border: none;
  transition: all 0.4s ease 0s;
  margin: 20px;
  border: 2px solid black;
}

button:hover {
  background: #3db1f5;
}

.Question {
  font-size: 32px;
  margin-right: 50px;
  margin-left: 50px;
}

.Score {
  font-size: 20px;
}

Deploying with Codesphere

Deploying in Codesphere is as easy as running:

npm start

in your terminal.

We can access the deployed web application like so:

Next Steps

This is obviously the bare minimum for a trivia game, but a lot of steps can be taken to make this better:

Buff the CSS and make it look great!
Allow users to change the category, difficulty, or type of questions. Edit the API URL based on their preferences!
Allow multiple players to play at once!