Example Projects
Tanks (TypeScript + Canvas + Socket.io)

This guide requires access to the Rivet private beta.

Request access here.

View on GitHub


The following guide will walk you through integraing and deploying a game with Rivet.

Step 1: Setup project

Clone & run repo

Run the following to clone the repository and start the server:

git clone https://github.com/rivet-gg/example-tanks-typescript-canvas-socketio.git
cd example-tanks-typescript-canvas-socketio
npm start

This will open your browser to http://localhost:8080. Verify the game works.

Initialize project

Make sure you have installed the Rivet CLI here.

Run the following command to setup your project:

  • Bash

  • Powershell

  • CMD

rivet init \
    --recommend \
    --matchmaker \
    --matchmaker-port 3000 \
    --matchmaker-dockerfile Dockerfile \
    --cdn \
    --cdn-build-command "npm install && npm run build:client:prod" \
    --cdn-build-output ./dist/

🛟 Checkpoint 🛟

Step 2: Integrate Rivet Matchmaker

Install @rivet-gg/api

Run the following to install the library to interact with Rivet:

npm install --save @rivet-gg/api

🛟 Checkpoint 🛟

Update the client

Add the following to the top of client/Client.ts:

import { RivetClient } from "@rivet-gg/api";
export const RIVET = new RivetClient({ token: process.env.RIVET_PUBLIC_TOKEN });

Find the connect function in client/Client.ts and replace it with the following:

async function connect(client: Client) {
    // Find a lobby to connect to on Rivet
	let res = await RIVET.matchmaker.lobbies.find({ gameModes: ["default"] });
	let port = res.ports["default"];

    // Open a new connection to the lobby
	client.connection = new Connection(client, port.isTls, port.host, {
		token: res.player.token,

Run npm start again and validate the game still connects.

Open the network inspector and reload to see a POST request to https://matchmaker.api.rivet.gg/v1/lobbies/find.

🛟 Checkpoint 🛟

Update the server

Add the following to the top of server/index.ts:

import { RivetClient } from "@rivet-gg/api";
export const RIVET = new RivetClient({ token: process.env.RIVET_LOBBY_TOKEN });

// Notify Rivet that this lobby is ready to accept players

Find the setupConnection function in server/index.ts and replace it with the following:

async function setupConnection(socket: Socket) {
    // Read the token passed to the socket query
    let playerToken = socket.handshake.query.token as string;

    // Validate the player token with the matchmaker
    await RIVET.matchmaker.players.connected({ playerToken });

    // Remove the player when disconnected
    socket.on("disconnect", () => RIVET.matchmaker.players.disconnected({ playerToken }));

    new Connection(game, socket);

🛟 Checkpoint 🛟

Step 3: Deploy to Rivet

Deploy your game to Rivet with:

rivet deploy --namespace prod

The CLI will print a link ending in rivet.game. Share the link with a friend to play your game on Rivet! 🎉