Real-time communication between web browsers is now possible with WebRTC. Though relatively new and still in draft form, its API, coupled with the fact that WebRTC is not supported by all major web browsers yet, (and among the ones that do, some of them do not support every feature of this technology), makes it seem challenging to use for critical applications. However, that might not be entirely true!

Since its introduction by Google in May 2011, WebRTC has found its place in many modern web applications. As a core element of most modern web browsers, it allows web applications to seamlessly leverage its capabilities to enhance user experience in various ways. From video streaming and conferencing applications that operate without clunky browser plugins to leveraging peer-to-peer (P2P) networks without routing every bit of data through a server, WebRTC unlocks a world of possibilities.

This article explores how to build a simple P2P web game of Connect Four using WebRTC. We’ll navigate the complexities and inconsistencies of WebRTC implementations using a powerful JavaScript library called PeerJS.

Transmitting Data with WebRTC

Before diving in, it’s crucial to understand that WebRTC isn’t limited to audio and video streaming. It also supports P2P data channels. These channels come in two forms: reliable and unreliable. As the names suggest, reliable channels guarantee message delivery and order, while unreliable channels offer no such assurances.

What’s more, WebRTC data channels require minimal infrastructure setup beyond what a typical WebRTC peer connection needs: a signaling server for connection coordination, a STUN server for public identity resolution, and optionally, a TURN server to relay messages if a direct connection can’t be established (e.g., both peers behind NATs). If these acronyms sounds familiar, that’s because WebRTC cleverly reuses existing technologies whenever possible.

This opens up a plethora of use cases for WebRTC, including multiplayer games, content delivery, file sharing, and more. All of this without relying on an intermediary server, resulting in reduced latency.

In our simple web game, we’ll utilize a data channel between two web browsers to exchange player moves.

Introducing PeerJS

PeerJS simplifies WebRTC implementation in your browser, providing a clean, consistent, and elegant API around it. It plugs various holes in WebRTC implementation of earlier browsers. For instance, in Chrome 30 and earlier, only unreliable data channels were supported. If configured to use reliable data channels, PeerJS would employ a shim for those older browsers. While not as efficient as native reliable channel implementations, it would still function.

PeerJS simplifies peer identification, using unique IDs for each peer. These IDs can be self-selected by the peer or generated by a server. While WebRTC promises peer-to-peer communication, a server is still needed as a connection broker and for signaling. PeerJS provides an open-source implementation of this connection broker server PeerJS Server (using Node.js) if you prefer not to use their cloud-hosted version (currently free but with limitations).

Connect Four Goes Peer-to-Peer

Let’s create a simple Node.js/Express application to demonstrate.

1
2
3
4

npm init
npm install express --save
npm install jade --save
npm install peer --save

This application will host the PeerJS Server and serve a single page containing a main menu and a 7-by-6 Connect Four grid, along with front-end assets.

Setting up the PeerJS Server

Hosting our own PeerJS Server is straightforward. The official repository on GitHub even offers one-click deployment to Heroku.

In our case, we’ll instantiate ExpressPeerServer in our Node.js application and serve it at “/peerjs”:

1
2
3
4
5
6
7

var express = require('express')
var app = express()
// … Configure Express, and register necessary route handlers
srv = app.listen(process.env.PORT)
app.use('/peerjs', require('peer').ExpressPeerServer(srv, {
	debug: true
}))

The PeerJS Client

With the PeerJS Server running, let’s move to the client side. As mentioned, PeerJS identifies peers with unique IDs, either generated automatically by PeerServer or chosen when instantiating Peer objects.

1

var peer = new Peer(id, options)

The id can be omitted, letting the server generate a unique one. PeerServer ensures ID uniqueness. The second argument, options, is an object containing key (the API key for cloud-hosted PeerServer), or host, port, path, etc., for self-hosted servers.

1
2
3
4
5

var peer = new Peer({
	host: location.hostname,
	port: location.port || (location.protocol === 'https:' ? 443 : 80),
	path: '/peerjs'
})

To establish a connection between two PeerJS peers, one must know the other’s ID. In our Connect Four implementation, the game initiator will share their peer ID with their opponent. With the destination peer ID, peer.connect(destId) initiates the connection:

1

var conn = peer.connect(destId)

Both the Peer object and the DataConnection object from peer.connect(destId) emit useful events. We’ll focus on the ‘data’ event of the DataConnection object and the ’error’ events of both.

Sending data is simple with conn.send(data):

1

conn.send('hello')

While overkill for our purpose, PeerJS transmits data after BinaryPack encoding, allowing for strings, numbers, arrays, objects, and even blobs to be communicated.

Receiving data involves listening for the ‘data’ event on conn:

1
2
3

conn.on(‘data’, function(data) {
	// data === 'hello'
})

That’s the gist of it!

Game Logic

The first player (game initiator) receives their peer ID from PeerJS, which they share with their opponent. Once the opponent joins using this ID, the first player can make a move.

In Connect Four, the only move is dropping a disc into a chosen column. We’ll communicate this move as an array: [‘move’, columnIndex], where columnIndex is the 0-based index of the chosen column.

When a player clicks a column:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

if(!turn) {
	// it is not the current player’s turn
	return
}

var i
// i = chosen column index
if(grid[i].length == 6) {
	// the column doesn’t have any more space available
	return
}

// track player’s move locally
grid[i].push(peerId)

// end current player’s turn
turn = false

conn.send(['move', i])

After sending the move data, we update the local game state, checking for wins or draws.

On the receiving end:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

if(turn) {
	// ignore incoming move data when it is the current player's turn
	return
}

var i = data[1]
if(grid[i].length == 6) {
	// ignore incoming move data when it is invalid
	return
}

// track opponent’s move locally
grid[i].push(opponent.peerId)

// activate current player’s turn
turn = true

We then update the local game state and check for a win or draw.

Note the sanity checks on incoming data. This is crucial in WebRTC games without a central server validating moves.

For brevity, UI update code snippets are omitted. The complete client-side JavaScript can be found here.

Putting It All Together

Our simple page has two sections: a visible main menu and a hidden game grid.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

section#menu
	div.animated.bounceIn
		div
			h1 Connect Four
			br
			div.no-support(style='display: none;')
				div.alert.alert-warning
					p Unfortunately, your web browser does not <a href="http://iswebrtcreadyyet.com">support WebRTC</a>
			div
				a.btn.btn-primary.btn-lg(href='#start') Start
				| &nbsp;
				a.btn.btn-default.btn-lg(href='#join') Join

section#game(style='display: none;')
	div
		div
			h1 Connect Four
			br
			table.table.grid
				tbody
					for i in [0, 1, 2, 3, 4, 5]
						tr
							for j in [0, 1, 2, 3, 4, 5, 6]
								td
									div.slot
			br
			div.alert.alert-info
				p 

We’ll use Bootstrap for basic styling.

Clicking “Start” reveals the game grid and the player’s peer ID, which they can share.

The second player enters this ID and clicks “Join” to start the game.

Testing the Game

Try the the example application or clone the repository from GitHub, install dependencies, and run locally:

1
2
3
4

git clone https://github.com/hjr265/arteegee.git 
cd arteegee
npm install
PORT=5000 npm start

Once the server’s running, open http://localhost:5000 in your browser, start a game in one tab, and join from another (or a different WebRTC-capable browser) using the peer ID.

Open your browser’s console for debug information, as verbose logging is enabled for the PeerJS client.

Troubleshooting

If the game doesn’t work, there are two likely reasons.

Your browser may not support the necessary WebRTC APIs. Try a different WebRTC-enabled browser.

If you’re behind a restrictive network, WebRTC might be blocked. A TURN server could help, but it’s not implemented here. So, if both players are behind NATs, it won’t work.

Wrapping Up

Despite being relatively new and with implementations still maturing, WebRTC offers exciting possibilities. Libraries like PeerJS abstract away the complexities, making the technology accessible.

Hopefully, this PeerJS-based game tutorial helps you get started with WebRTC and build amazing real-time, peer-to-peer web applications.