Guías

Multijugador con invitaciones

Copiar página

Una sala para dos jugadores. Créela en su servidor, invite a un amigo a través del selector de amigos de Lia o un enlace, y lleve a ambos jugadores a la misma sala.

La idea: una habitación tiene un id, y el id va en la invitación's startParam. Quien abra la invitación abrirá su aplicación con esa startParam, y su página se unirá a ellos al cuarto. Lia'propio Lia XO funciona así.

#1. Crear una sala en su servidor

server.js

app.post("/api/rooms", async (req, res) => {
  const playerId = await playerFrom(req.body.session); // see Verify on your server
  if (!playerId) return res.status(401).end();
  const room = "room-" + crypto.randomUUID().replace(/-/g, "").slice(0, 10);
  await db.createRoom(room, { host: playerId, players: [playerId] });
  res.json({ room });
});

app.post("/api/rooms/join", async (req, res) => {
  const playerId = await playerFrom(req.body.session);
  if (!playerId) return res.status(401).end();
  const room = await db.room(req.body.room);
  if (!room) return res.status(404).json({ error: "no_room" });
  if (room.players.length >= 2 && !room.players.includes(playerId)) return res.status(409).json({ error: "full" });
  await db.addPlayer(req.body.room, playerId);
  res.json({ room: req.body.room });
});

Los IDs de sala deben ajustarse a un startParam: 1 a 64 de letras, dígitos, _ y -.

#2. Invitar a un amigo

game.js

async function playWithAFriend() {
  const { room } = await api("/api/rooms", {});
  showWaiting(room);
  const { invited } = await Lia.inviteFriend({ startParam: room });
  if (!invited) Lia.toast("Share the link to invite someone");
}

// Or a link to send anywhere: opens your app in Lia, or the App Store without it.
async function shareRoom(room) {
  await Lia.share("Play with me: " + Lia.inviteLink(room));
}

Cada amigo elegido recibe una tarjeta en su chat Lia. Lia solo permite que la gente invite a sus amigos, y solo a amigos que puedan abrir tu aplicación (mientras que está's en prueba, solo sus probadores).

#3. Aterrizar en la sala

Leer startParam cuando se abre la aplicación, y escuchar cuando llegue mientras está'abrir (la persona toca un segundo invitación):

function route(startParam) {
  if (startParam && startParam.startsWith("room-")) joinRoom(startParam);
}

Lia.init().then(function () {
  route(Lia.startParam);
  Lia.ready();
});
Lia.on("startParam", function (data) { route(data.startParam); });

async function joinRoom(room) {
  try {
    await api("/api/rooms/join", { room });
    openTable(room);
  } catch (error) {
    Lia.toast(error.message === "full" ? "That game is full" : "That game has ended");
  }
}

Un startParam es solo una pista: cualquiera puede hacer un enlace con cualquier startParam, así que su servidor decide si la sala existe y el jugador puede unirse.

#4. Juega en vivo

Conecta a ambos jugadores a tu servidor (un WebSocket es habitual), y verifica a cada jugador's sesión antes de unirla a la habitación. Mientras un juego está en marcha:

Lia.enableClosingConfirmation(); // "Leave the game?" if they close
Lia.disableVerticalSwipes();     // a swipe down won't close the sheet mid move
Lia.onPause(function () { socket.send(JSON.stringify({ type: "away" })); });
Lia.onResume(function () { socket.send(JSON.stringify({ type: "back" })); });

#5. Tu turno, por notificación

Cuándo's alguien'tu movimiento y ellos'se ha salido de tu aplicación, un notificación con la sala como su startParam los devuelve directamente:

{ "playerId": "p_3f9c0a6d1b2e4f5a6b7c", "text": "@kofi played. Your move.", "startParam": "room-a81c2e09f4" }

#Mesas públicas

Las invitaciones son para amigos. Para permitir que cualquiera en Lia se una, también liste la habitación en la lobby mientras espera:

server.js

// When the room is made: list it (as the host, with one seat taken).
await lia("POST", "/lobby/tables", { tableId: room, hostPlayerId: playerId, seats: 2, taken: 1, title: "Quick game" });

// When someone joins from the lobby: seat them through Lia first (it refuses blocked players and full tables).
app.post("/api/rooms/sit", async (req, res) => {
  const playerId = await playerFrom(req.body.session);
  if (!playerId) return res.status(401).end();
  try {
    const { full } = await lia("POST", `/lobby/tables/${encodeURIComponent(req.body.room)}/sit`, { playerId });
    await db.addPlayer(req.body.room, playerId);
    if (full) startGame(req.body.room);
    res.json({ room: req.body.room });
  } catch (error) {
    res.status(409).json({ error: error.data?.error ?? "failed" }); // full, not_found, own_table
  }
});

// When the game starts or the room closes: take it out (safe to repeat).
await lia("DELETE", `/lobby/tables/${encodeURIComponent(room)}`);

En su página, muestre las mesas abiertas, y siente a las personas que eligieron su mesa en Lia'propios salón (llegan con el startParam lobby-<table id>):

const { tables } = await Lia.lobby.tables();
renderTables(tables, (table) => api("/api/rooms/sit", { room: table.id }));

function route(startParam) {
  if (startParam?.startsWith("lobby-")) return api("/api/rooms/sit", { room: startParam.slice(6) }).then(openTable);
  if (startParam?.startsWith("room-")) return joinRoom(startParam);
}

Los extraños pueden't chatear a través de Lia, los bloques se respetan y los jugadores pueden reportar entre sí.

#Límites que conocer

Una persona puede invitar a 20 amigos a tu app al día, por lo que las invitaciones siguen siendo algo que la gente bienvenida en sus chats.
Un anfitrión puede tener 3 mesas públicas abiertas en tu aplicación a la vez, y un listado dura como máximo una hora.
Lia.inviteFriend() respuestas { invited }, nunca quién fue invitado: su servidor aprende quién se unió cuando se unan.

Traducido automáticamente. El inglés es la fuente de verdad. Leer en inglés