Tanks (TypeScript + Canvas + Socket.io)
This guide requires access to the Rivet private beta.
Request access here.
View on GitHub
| Language | Rendering | Networking |
|---|---|---|
| TypeScript | Canvas | Socket.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
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/
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
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.
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
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! 🎉