💥 Tanks (Canvas, Socket.io)

LanguageRenderingNetworking
TypeScriptCanvasSocket.io

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

Run the following command to setup your project:

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/


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/[email protected]

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_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.

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_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:

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);
}


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! 🎉

Was this page helpful?

Edit Page

Rivet

Open-source solution to deploy, scale, and operate your multiplayer game

This website is not sponsored by or affiliated with Unity Technologies or its affiliates. Unity Trademark(s) are trademark(s) or registered trademark(s) of Unity Technologies or its affiliates in the U.S. and elsewhere. | This website is not sponsored by, affiliated with, or endorsed by Epic Games, Inc. or its affiliates. 'Unreal Engine' is a trademark or registered trademark of Epic Games, Inc. in the U.S. and elsewhere. | The HTML5 Logo by the World Wide Web Consortium (W3C), used under a Creative Commons Attribution 3.0 License. Source | The Godot Engine Logo by the Andrea Calabró, used under a Creative Commons Attribution 4.0 International License. Source | Docker and the Docker logo are trademarks or registered trademarks of Docker, Inc. in the United States and/or other countries. Docker, Inc. and other parties may also have trademark rights in other terms used herein.

© 2024 Rivet Gaming, Inc. All rights reserved.