LanguageRenderingNetworking
TypeScriptCanvasSocket.io

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

Step 1: Setup project

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

git clone -b pre-rivet https://github.com/rivet-gg/examples
cd javascript/tanks-socketio-canvas
npm run start

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

Initialize project

Run the following command to setup your project:

rivet init --html5

Update the config

You can configure your gameโ€™s Rivet config in the created rivet.yaml file. For the purposes of this demo, you can copy and paste this config into your file:

rivet.yaml
scripts:
  start: npm run start

# How the game lobbies run and how players connect to the game.
#
# https://docs.rivet.gg/matchmaker/introduction
matchmaker:
  # How many players can join a specific lobby.
  #
  # Read more about matchmaking: https://docs.rivet.gg/matchmaker/concepts/finding-lobby
  max_players: 32

  # The hardware to provide for lobbies.
  #
  # Available tiers: https://docs.rivet.gg/serverless-lobbies/concepts/available-tiers
  tier: basic-1d1

# Which regions the game should be available in.
#
# Available regions: https://docs.rivet.gg/serverless-lobbies/concepts/available-regions
matchmaker:
  regions:
    atl: {}
    fra: {}

  # Runtime configuration for the lobby's Docker container.
  docker:
    # If you're unfamiliar with Docker, here's how to write your own
    # Dockerfile:
    # https://docker-curriculum.com/#dockerfile
    dockerfile: Dockerfile

    # Which ports to allow players to connect to. Multiple ports can be defined
    # with different protocols.
    #
    # How ports work: https://docs.rivet.gg/serverless-lobbies/concepts/ports
    ports:
      default:
        port: 3000

  # What game modes are available.
  #
  # Properties like `max_players`, `tier`, `dockerfile`, `regions`, and more can
  # be overridden for specific game modes.
  game_modes:
    default: {}

# How Rivet CDN should host your static assets on our CDN.
#
# https://docs.rivet.gg/cdn/introduction
cdn:
  # Command to run before uploading the site to Rivet. This can be used to
  # build any JavaScript bundles or generate assets.
  build_command: npm install && npm run build:client:prod

  # The folder to upload to Rivet.
  #
  # If you're hosting a website, ensure that `index.html` is in the root of
  # this folder.
  build_output: ./dist/

kv: {}

identity: {}

Step 2: Integrate Rivet Matchmaker

Install @rivet-gg/api

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

npm i @rivet-gg/api --save

Update the client

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

client/Client.ts
import { RivetClient } from '@rivet-gg/api';
const RIVET = new RivetClient({ token: process.env.RIVET_TOKEN });

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

client/Client.ts
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
  });
}

Update the server

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

server/index.ts
import { RivetClient } from '@rivet-gg/api';
const RIVET = new RivetClient({ token: process.env.RIVET_TOKEN });

// Notify Rivet that this lobby is ready to accept players
RIVET.matchmaker.lobbies.ready();

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

server/index.ts
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);
}

Run with Rivet

Finally, after stopping the previous npm run start, run rivet run start and validate the game still connects.

Step 3: Deploy to Rivet

Now that you managed to get the game running locally, you can deploy your game to Rivet with:

rivet deploy prod

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