Tutorial 05

Request browser confirmations

Continue the chat contract by asking connected pages to return confirmation data.

Outcome

You will know how settled, all, and any report browser responses when the server sends a request to connected pages.

Server request

Ask room members to confirm a message

Use settled when you want one result object that includes successful browser responses and failed or timed-out responses.

Ack means the browser listener returns a value

The server sends confirmMessage to every connected page in rooms.chat. Each page listener may return data. settled reports which pages answered and which did not.

Terms

Previously: The Rooms page made rooms.chat a private room that joins automatically. This request sends confirmMessage to the browsers in that room.

Code focus: Place this after rooms.chat.emit.message(message) in fromClient.send when you want the send action to return client confirmation stats.

Lives in

src/routes/rooms/[roomId]/chat.socket.ts

inside fromClient.send after broadcasting the message · The send handler already created the message and knows rooms.chat. Add the request there when the send response should include browser confirmation stats.

Route map

src/routes/rooms/[roomId]/

+page.svelte

chat.socket.ts <- realtime contract

src/hooks.socket.ts

typescript src/routes/rooms/[roomId]/chat.socket.ts · settled ack request

const result = await rooms.chat.request.confirmMessage.settled(
  {
    // Browser handlers receive the message id they should confirm.
    messageId: message.id
  },
  { timeout: 1500 }
);

return {
  // Count browser handlers that responded successfully.
  confirmed: result.ok.length,

  // Preserve why each missing client did not respond.
  failed: result.failed.map((item) => item.reason)
};

Result: The send action now returns whether connected browser listeners handled the confirmation request.

Checkpoint

Disconnect one tab and send again. The response should show that one expected acknowledgement was missing or timed out.

Next step

Client handler

Return an acknowledgement from the browser

Add a browser listener for confirmMessage in +page.svelte. Whatever that listener returns is what the server request receives.

The browser returns data, but the contract owns the shape

The handler lives in +page.svelte because the browser is answering. The return shape is still declared in chat.socket.ts, so TypeScript catches mismatched return values.

Terms

Previously: The previous step added rooms.chat.request.confirmMessage.settled(...) on the server. This is the browser handler that answers it.

Code focus: Add this beside your existing room.on.message listener in +page.svelte. It uses the same const room = chat() generated client.

Lives in

src/routes/rooms/[roomId]/+page.svelte

browser listener that answers the server request · The server request waits for connected pages. This listener returns the typed payload that settled, all, or any can collect.

Route map

src/routes/rooms/[roomId]/

+page.svelte

chat.socket.ts <- realtime contract

src/hooks.socket.ts

svelte src/routes/rooms/[roomId]/+page.svelte · ack listener

<script lang="ts">
  import { chat } from './chat.socket';

  const room = chat();

  room.on.confirmMessage(({ messageId }) => {
    return {
      // This return value is validated against the server ack schema.
      receivedAt: `${messageId}:${new Date().toISOString()}`
    };
  });
</script>

Result: Connected pages now answer the server request with typed confirmation data.

Checkpoint

Change the returned shape temporarily. TypeScript should complain because +page.svelte no longer matches chat.socket.ts.

Next: Production

Run the safe realtime lab