Files
scrabble-game/ui/src/lib/transport.ts
T
Ilia Denisov 3471d40576
CI / changes (pull_request) Successful in 3s
CI / unit (pull_request) Successful in 9s
CI / integration (pull_request) Successful in 16s
CI / ui (pull_request) Successful in 1m4s
CI / conformance (pull_request) Successful in 9s
CI / gate (pull_request) Successful in 0s
CI / deploy (pull_request) Successful in 1m27s
feat(export): server-rendered artifacts behind one signed download URL
The finished-game export now works identically on every platform: the
client mints a signed relative URL (game.export_url) carrying its date
locale, IANA time zone and localized non-play labels, resolves it
against its own origin and hands it to the platform's native download —
Telegram downloadFile, VKWebAppDownloadFile, or a plain browser anchor
(also the desktop VK iframe). Both artifacts ride the route: the .gcg
text (no more clipboard mode, except the legacy pre-8.0 Telegram
fallback) and the PNG of the final position.

The PNG is rasterized by a new internal 'renderer' sidecar (node:22-slim
+ skia-canvas + baked Liberation/Noto Color Emoji fonts) executing the
SAME ui/src/lib/gameimage.ts the web project unit-tests, bundled at
image build time — one renderer, no drift; the browser no longer draws
or delivers bytes itself. The backend rebuilds the render payload from
the journal + engine.AlphabetTable, verifies the HMAC (10-minute TTL,
BACKEND_EXPORT_SIGN_KEY, constant-time, uniform 404s) on its public
group, and streams the artifact as a named attachment; the gateway
forwards /dl/* behind the per-IP public rate limiter (caddy @gateway
matcher extended — the landing catch-all trap).

Deploy: renderer service (compose + prod overlay + roll before backend
+ prod push list), EXPORT_SIGN_KEY env (TEST_/PROD_ secrets), CI runs
the sidecar smoke in the ui job. Docs: ARCHITECTURE export-delivery
section, FUNCTIONAL(+_ru), UI_DESIGN, TESTING, deploy/README.
2026-07-02 18:44:07 +02:00

296 lines
13 KiB
TypeScript

// The real Connect-RPC + FlatBuffers transport. Every unary op rides the single
// Execute envelope (message_type + FlatBuffers payload); the live stream is
// Subscribe. The session token rides in the Authorization header; domain outcomes
// come back in result_code, edge failures as Connect error codes — both normalised to
// a thrown GatewayError. In dev the Vite proxy forwards the RPC path to the h2c
// gateway; in a packaged app VITE_GATEWAY_URL points at the real origin.
import { createClient } from '@connectrpc/connect';
import { createConnectTransport } from '@connectrpc/connect-web';
import { Gateway } from '../gen/edge/v1/edge_pb';
import { GatewayError, type GatewayClient } from './client';
import * as codec from './codec';
import { browserOffset } from './profileValidation';
import { registerProbe, reportOffline, reportOnline } from './connection.svelte';
import { backoffMs, isConnectionCode, retryable, toGatewayError } from './retry';
const MAX_RETRIES = 6;
const sleep = (ms: number): Promise<void> => new Promise((r) => setTimeout(r, ms));
export function createTransport(baseUrl: string): GatewayClient {
const origin = baseUrl || (typeof location !== 'undefined' ? location.origin : '');
const transport = createConnectTransport({ baseUrl: origin, useBinaryFormat: true });
const client = createClient(Gateway, transport);
let token: string | null = null;
const headers = (): Record<string, string> | undefined =>
token ? { authorization: `Bearer ${token}` } : undefined;
// The reachability probe the connection watcher fires while offline: a cheap authenticated read
// (it must reject when there is no session, so the watcher keeps waiting rather than reporting up).
registerProbe(async () => {
if (!token) throw new Error('no session');
await client.execute({ messageType: 'profile.get', payload: codec.empty(), requestId: '' }, { headers: headers() });
});
// exec runs one unary op, auto-retrying transient transport failures with capped backoff (so a
// dropped connection or a rate-limit recovers seamlessly) and driving the global Connecting
// indicator. A successful round-trip marks the gateway reachable; a domain result_code is final.
async function exec(messageType: string, payload: Uint8Array, signal?: AbortSignal): Promise<Uint8Array> {
for (let attempt = 0; ; attempt++) {
let res;
try {
res = await client.execute({ messageType, payload, requestId: '' }, { headers: headers(), signal });
} catch (e) {
if (signal?.aborted) throw e; // an intentional cancel (e.g. the tiles moved) — do not retry
const err = toGatewayError(e);
if (retryable(err.code, messageType) && attempt < MAX_RETRIES) {
reportOffline();
await sleep(backoffMs(attempt + 1));
continue;
}
if (isConnectionCode(err.code)) reportOffline();
throw err;
}
reportOnline();
if (res.resultCode && res.resultCode !== 'ok') throw new GatewayError(res.resultCode);
return res.payload;
}
}
return {
setToken(t) {
token = t;
},
async fetchDict(variant, version, opts) {
if (!token) throw new Error('fetchDict: no session');
// Low priority so the browser schedules the (large) dictionary behind the game's own
// requests — the move eval, state and live events — on a slow link (EDGE). Ignored
// where the Priority Hints API is unsupported (iOS WebKit), which is harmless. The
// signal aborts a stalled download so it stops holding the channel; reload (the debug
// "clear") bypasses the browser HTTP cache to force a fresh copy.
const res = await fetch(`${origin}/dict/${encodeURIComponent(variant)}/${encodeURIComponent(version)}`, {
headers: { authorization: `Bearer ${token}` },
priority: 'low',
signal: opts?.signal,
cache: opts?.reload ? 'reload' : undefined,
} as RequestInit);
if (!res.ok) throw new Error(`fetchDict ${variant}/${version}: HTTP ${res.status}`);
return res.arrayBuffer();
},
async reportLocalEval(counts) {
if (!token) throw new Error('reportLocalEval: no session');
// keepalive so a batch flushed as the app is backgrounded still reaches the edge.
const res = await fetch(`${origin}/metrics/local-eval`, {
method: 'POST',
headers: { authorization: `Bearer ${token}`, 'content-type': 'application/json' },
body: JSON.stringify(counts),
keepalive: true,
});
if (!res.ok) throw new Error(`reportLocalEval: HTTP ${res.status}`);
},
async authTelegram(initData) {
return codec.decodeSession(await exec('auth.telegram', codec.encodeTelegramLogin(initData, browserOffset())));
},
async authVK(params, displayName) {
return codec.decodeSession(await exec('auth.vk', codec.encodeVKLogin(params, browserOffset(), displayName)));
},
async authGuest(locale) {
return codec.decodeSession(await exec('auth.guest', codec.encodeGuestLogin(locale ?? '', browserOffset())));
},
async authEmailRequest(email) {
await exec('auth.email.request', codec.encodeEmailRequest(email, browserOffset()));
},
async authEmailLogin(email, code) {
return codec.decodeSession(await exec('auth.email.login', codec.encodeEmailLogin(email, code)));
},
async profileGet() {
return codec.decodeProfile(await exec('profile.get', codec.empty()));
},
async blockStatus() {
return codec.decodeBlockStatus(await exec('account.block_status', codec.empty()));
},
async gamesList() {
return codec.decodeGameList(await exec('games.list', codec.empty()));
},
async lobbyEnqueue(variant, multipleWords, vsAi) {
return codec.decodeMatchResult(await exec('lobby.enqueue', codec.encodeEnqueue(variant, multipleWords, vsAi)));
},
async lobbyPoll() {
return codec.decodeMatchResult(await exec('lobby.poll', codec.empty()));
},
async lobbyCancel() {
await exec('lobby.cancel', codec.empty());
},
async gameState(id, includeAlphabet) {
return codec.decodeStateView(await exec('game.state', codec.encodeStateRequest(id, includeAlphabet)));
},
async gameHistory(id) {
return codec.decodeHistory(await exec('game.history', codec.encodeGameAction(id)));
},
async submitPlay(id, tiles, variant) {
return codec.decodeMoveResult(await exec('game.submit_play', codec.encodeSubmitPlay(id, tiles, variant)));
},
async pass(id) {
return codec.decodeMoveResult(await exec('game.pass', codec.encodeGameAction(id)));
},
async exchange(id, tiles, variant) {
return codec.decodeMoveResult(await exec('game.exchange', codec.encodeExchange(id, tiles, variant)));
},
async resign(id) {
return codec.decodeMoveResult(await exec('game.resign', codec.encodeGameAction(id)));
},
async hint(id) {
return codec.decodeHintResult(await exec('game.hint', codec.encodeGameAction(id)));
},
async evaluate(id, tiles, variant, signal) {
return codec.decodeEvalResult(await exec('game.evaluate', codec.encodeEval(id, tiles, variant), signal));
},
async checkWord(id, word, variant) {
return codec.decodeWordCheck(await exec('game.check_word', codec.encodeCheckWord(id, word, variant)));
},
async complaint(id, word, note) {
await exec('game.complaint', codec.encodeComplaint(id, word, note));
},
async hideGame(id) {
await exec('game.hide', codec.encodeGameAction(id));
},
async draftGet(id) {
return codec.decodeDraftView(await exec('draft.get', codec.encodeGameAction(id)));
},
async draftSave(id, json) {
await exec('draft.save', codec.encodeDraftSave(id, json));
},
async chatPost(id, body) {
return codec.decodeChatMessage(await exec('chat.post', codec.encodeChatPost(id, body)));
},
async chatList(id) {
return codec.decodeChatList(await exec('chat.list', codec.encodeGameAction(id)));
},
async nudge(id) {
return codec.decodeChatMessage(await exec('chat.nudge', codec.encodeGameAction(id)));
},
async markChatRead(id) {
await exec('chat.read', codec.encodeGameAction(id));
},
async feedbackSubmit(body, attachment, attachmentName, channel) {
// The app build (Vite define) and the device's detected UTC offset ride with the report
// so the operator sees which version it came from and the local time it was filed; the
// caller need not pass them.
await exec('feedback.submit', codec.encodeFeedbackSubmit(body, attachment, attachmentName, channel, __APP_VERSION__, browserOffset()));
},
async feedbackGet() {
return codec.decodeFeedbackState(await exec('feedback.get', codec.empty()));
},
async feedbackUnread() {
return codec.decodeFeedbackUnread(await exec('feedback.unread', codec.empty()));
},
async friendsList() {
return codec.decodeFriendList(await exec('friends.list', codec.empty()));
},
async friendsIncoming() {
return codec.decodeIncomingList(await exec('friends.incoming', codec.empty()));
},
async friendsOutgoing() {
return codec.decodeOutgoingList(await exec('friends.outgoing', codec.empty()));
},
async friendRequest(accountId, gameId) {
await exec('friends.request', codec.encodeTarget(accountId, gameId));
},
async friendRespond(requesterId, accept) {
await exec('friends.respond', codec.encodeFriendRespond(requesterId, accept));
},
async friendCancel(accountId) {
await exec('friends.cancel', codec.encodeTarget(accountId));
},
async unfriend(accountId) {
await exec('friends.unfriend', codec.encodeTarget(accountId));
},
async friendCodeIssue() {
return codec.decodeFriendCode(await exec('friends.code.issue', codec.empty()));
},
async friendCodeRedeem(code) {
return codec.decodeRedeemResult(await exec('friends.code.redeem', codec.encodeRedeemCode(code)));
},
async blocksList() {
return codec.decodeBlockList(await exec('blocks.list', codec.empty()));
},
async block(accountId, gameId) {
await exec('blocks.add', codec.encodeTarget(accountId, gameId));
},
async unblock(accountId) {
await exec('blocks.remove', codec.encodeTarget(accountId));
},
async invitationsList() {
return codec.decodeInvitationList(await exec('invitation.list', codec.empty()));
},
async invitationCreate(inviteeIds, settings) {
return codec.decodeInvitation(await exec('invitation.create', codec.encodeCreateInvitation(inviteeIds, settings)));
},
async invitationAccept(invitationId) {
return codec.decodeInvitation(await exec('invitation.accept', codec.encodeInvitationAction(invitationId)));
},
async invitationDecline(invitationId) {
return codec.decodeInvitation(await exec('invitation.decline', codec.encodeInvitationAction(invitationId)));
},
async invitationCancel(invitationId) {
await exec('invitation.cancel', codec.encodeInvitationAction(invitationId));
},
async profileUpdate(p) {
return codec.decodeProfile(await exec('profile.update', codec.encodeUpdateProfile(p)));
},
async linkEmailRequest(email) {
await exec('link.email.request', codec.encodeLinkEmailRequest(email));
},
async linkEmailConfirm(email, code) {
return codec.decodeLinkResult(await exec('link.email.confirm', codec.encodeLinkEmailConfirm(email, code)));
},
async linkEmailMerge(email, code) {
return codec.decodeLinkResult(await exec('link.email.merge', codec.encodeLinkEmailConfirm(email, code)));
},
async linkTelegram(data) {
return codec.decodeLinkResult(await exec('link.telegram.confirm', codec.encodeLinkTelegram(data)));
},
async linkTelegramMerge(data) {
return codec.decodeLinkResult(await exec('link.telegram.merge', codec.encodeLinkTelegram(data)));
},
async statsGet() {
return codec.decodeStats(await exec('stats.get', codec.empty()));
},
async exportGcg(gameId) {
return codec.decodeGcg(await exec('game.gcg', codec.encodeGameAction(gameId)));
},
async exportUrl(gameId, kind, dateLocale, actionLabels, timeZone) {
return codec.decodeExportUrl(
await exec('game.export_url', codec.encodeExportUrlRequest(gameId, kind, dateLocale, actionLabels, timeZone)),
);
},
subscribe(onEvent, onError) {
const ctrl = new AbortController();
void (async () => {
try {
for await (const ev of client.subscribe({}, { headers: headers(), signal: ctrl.signal })) {
const pe = codec.decodeEvent(ev.kind, ev.payload);
if (pe) onEvent(pe);
}
} catch (e) {
if (!ctrl.signal.aborted) onError?.(toGatewayError(e));
}
})();
return () => ctrl.abort();
},
};
}