How to Make a Realtime Multiplayer Page on Your Static Website

Realtime communication has become increasingly vital for creating engaging user experiences. Traditionally, achieving realtime features like video/audio calling or live chat on the web required server side implementations. However, with WebRTC (Web Real-Time Communication), you can integrate realtime capabilities directly into your web apps and web pages, without the need for an intermediary.

Unfortunately, we do not see many developers who are aware of WebRTC and the facilities and capabilities that it offers, so I wanted to talk about it a little and to share some ideas with the community in the hope that more fellow developers will be curious to learn about this technology and use it to build more cool stuff.

Now you maybe thinking that the article title is a clickbait, but I promise it isn’t. Although there is no games on this page, but it’s actually realtime multiplayer(or multireader to be more specific).

But what is WebRTC? #

To answer this question, one of the best places to start from that I know of is MDN Docs section dedicated to WebRTC, it begins with:

WebRTC (Web Real-Time Communication) is a technology that enables Web applications and sites to capture and optionally stream audio and/or video media, as well as to exchange arbitrary data between browsers without requiring an intermediary. The set of standards that comprise WebRTC makes it possible to share data and perform teleconferencing peer-to-peer, without requiring that the user install plug-ins or any other third-party software.

Also, there is a great video by Fireship that explains exactly how WebRTC works, and actually builds a video chat app from scratch:

And after those, I don’t have much left to say, really.. so yeah I totally “outsourced” this entire part.

It’s really not that hard, but hey, we can make it easier!

Trystero #

There is this library called Trystero (be sure to check out the website, it’s pretty cool).

Trystero is a library that abstracts away the logic of establishing a direct peer-to-peer connection with WebRTC. It offers a simple API for you to create real-time applications without the need for a server. It supports multiple strategies for connecting peers, including BitTorrent, Nostr, MQTT, IPFS, and Firebase, all using the same API. This flexibility allows you to choose the best strategy for your application based on your specific needs and the infrastructure you prefer to use.

Simply put, all you have to do is:

1import { joinRoom } from "trystero"; // (trystero.min.js with a localfile)
2
3const config = {
4  appId: "a_unique_id",
5};
6const room = joinRoom(config, "room_0");

As the documentation states:

By default, the BitTorrent strategy is used. To use a different one just deep import like so (your bundler should handle including only relevant code):

1import { joinRoom } from "trystero/nostr"; // (trystero-nostr.min.js with a localfile)
2// or
3import { joinRoom } from "trystero/mqtt"; // (trystero-mqtt.min.js)
4// or
5import { joinRoom } from "trystero/firebase"; // (trystero-firebase.min.js)
6// or
7import { joinRoom } from "trystero/ipfs"; // (trystero-ipfs.min.js)

So check out the Strategy Comparison section.

And from here on, the Trystero’s API is pretty simple and easy to use.

I’ve used Trystero to build the peers counter component you saw above, and the following simple chat component so you can chat with others reading this article at the same time:

By leveraging Trystero’s “serverless” approach to WebRTC, you can add real-time collaboration features to your web apps and web pages without the need for a dedicated server infrastructure. This not only simplifies the development process but also reduces the overall cost and complexity of your application.

Who is even using this WebRTC thing? #

As far as public data and search results show, Discord, Slack, Google Meet, and others are using WebRTC under the hood for video/audio and other features.

There is also the FOSS(free and open source software) Chitchatter built with WebRTC and Trystero, which is a very nice and useful application, and you can learn a lot from diving into it’s source code.

What you can do with WebRTC #

It’s easy, free, and powerful, so here the fun begins. You can use it to build multiplayer games, collaborative applications, communication services, little surprises all around your personal portfolio, even bring life to static web pages, and really anything that comes to your mind.

I’ll be more than happy to check out anything this little article inspired you to build, just drop a link in the comments, or directly via Email or Telegram.

Thank you for your time.