Multijugador en Phaser

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Configuración del servidor

1. Crearemos una cuenta en https://hathora.dev/.

2. Creamos una nueva aplicación dentro de hathora.dev.

3. Seguiremos la guía Getting Started.

4. Creamos una carpeta para nuestro proyecto que tendrá en la raíz el siguiente fichero:

tsconfig.js

{
    "compilerOptions": {
        "target": "esnext",
        "module": "esnext",
        "moduleResolution": "node",
        "esModuleInterop": true,
        "strict": true
    }
}

5. En esta carpeta, ejecutaremos los siguientes comandos:

npm i @hathora/server-sdk
npm i -D typescript ts-node @types/node

5. Guardamos el Application Id y la Secret Key de nuestro proyecto, que estarán en el dashboard de nuestra aplicación (menú settings) dentro de hathora.dev, en nuestro fichero .env.

APP_SECRET=[app secret]

6. Cramos el siguiente fichero en la raíz de nuestro proyecto.

server.mts

import { register } from "@hathora/server-sdk";

const coordinator = await register({
  appSecret: process.env.APP_SECRET!,
  authInfo: { anonymous: { separator: "-" } },
  store: {
    newState(roomId, userId, data) {
      console.log("newState", roomId.toString(36), userId);
    },
    subscribeUser(roomId, userId) {
      console.log("subscribeUser", roomId.toString(36), userId);
    },
    unsubscribeUser(roomId, userId) {
      console.log("unsubscribeUser", roomId.toString(36), userId);
    },
    onMessage(roomId, userId, data) {
      const dataBuf = Buffer.from(data.buffer, data.byteOffset, data.byteLength);
      console.log("onMessage", roomId.toString(36), userId, dataBuf.toString("utf8"));
      coordinator.sendMessage(roomId, userId, dataBuf);
    },
  },
});

console.log(`Connected to ${coordinator.host} with storeId ${coordinator.storeId}`);

7. Ejecutamos la aplicación:

npx ts-node-esm server.mts

Configuración del cliente

npm i @hathora/client-sdk

Escribimos el siguiente fichero:

client.mts

// client.mts

import { HathoraClient } from "@hathora/client-sdk";

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const client = new HathoraClient(APP_ID);
const token = await client.loginAnonymous();
const roomId = await client.create(token, new Uint8Array());
const connection = await client.connect(token, roomId, onMessage, onError);

connection.write(encoder.encode("Hello world!"));

function onMessage(msg: ArrayBuffer) {
  console.log(decoder.decode(msg));
}

function onError(error: any) {
  console.error(error);
}