This project is currently being developed for the Tecnologie Internet course @Università di Parma. We're using PeerJS and React to build a P2P chat app based on WebRTC.
We developed the web app with performance, security and responsiveness in mind. It is strictly tied to the PeerJS APIs, which we use to make videocalls, send text messages, and ping the peers. Let's have a quick overview over the components that were required to build the app.
When a user logs in, we generate a peer through the official PeerServer. We then tie its ID to a username in our login server, so that other users can search him by his username, not his Peer ID. This enables us to establish multi-session chats: once a user has a chat open with a friend, the ID is automatically updated by the login server.
We used the beautiful Material-UI components to build our UI. The library contains most of the UI components a developer will ever need, including grids, TextFields, themes, buttons. Not to mention it is also blazingly fast!
Some components of the UI were obviously missing from Material-UI. react-chat-elements contains what we needed. We used this library to get message boxes and chat lists.
We used Axios to execute async requests to the APIs.
Saving passwords in plain text is so 1990. We decided to use bcrypt, a universally trusted hashing algorithm, available through a lightweight npm module.
No one wants to lose its chats when closing a web app. We decided to save chats data in the local storage, enabling a user to just enter the password and login. Beware: the chats are not encrypted, so use Incognito Mode if you're working on a public workstation.
We built a login server using Node.js and Express which tracks associations between peer.js IDs and our usernames. You can find it here.
You can find the course notes here.
Clone the repository, and install the npm modules like you always do:
You can then run
To run the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the GPL License. See LICENSE for more information.