SpeccyWeb - interní formát stránky
SpeccyWeb jsem začal psát jako jednoduchý textový webový prohlížeč pro ZX Spectrum Next. Cíl nebyl udělat plnohodnotný moderní prohlížeč, který by přímo na osmibitovém počítači zpracovával HTML, CSS, JavaScript, obrázky a všechny dnešní webové komplikace. Ono by šlo zahazovat (přeskakovat) nepodporované html tagy, javascript zhýralosti a soustu dalších více bitové záležitosti, ale problém je rychlost načítání. ESP modul není nejrychlejší (a stabilní) pro přenos velkého objemu dat. Zahození těchto nesmyslů a úpravy textu do "čitelnější" podoby zabil dvě mouchy jednou ranou. Ano, mohl jsem načíst (pokud by se mi to povedlo s ESP :) ) kompletní html co mi vrátí server a parsovat text, ale bylo by to použitelné? Chtěl jsem hlavně dostat obsah webové stránky na obrazovku Spectra tak, aby to bylo čitelné a aby načítání netrvalo půl dne.
Základní myšlenka je jednoduchá. ZX Spectrum Next se nepřipojuje přímo na cílový web, ale komunikuje s mým PHP skriptem proxy.php. Do požadavku pošle adresu stránky. Proxy se pak na serveru chová jako prostředník. Stáhne původní stránku, vyřeší přesměrování, zkontroluje adresu, převede kódování, odstraní části, které textový prohlížeč nepotřebuje, a na konci pošle zpět čistý textový formát určený pro můj prohlížeč.
Formát pro ZX Spectrum Next je čistý ASCII text. Každý záznam je na samostatném řádku a jednotlivá pole jsou oddělená tabulátorem. Nejdůležitější záznam je TEXT. Za ním následuje jeden řádek textu, který se uloží do textové cache a později zobrazí na obrazovce. Druhý důležitý záznam je LINK. Ten obsahuje číslo odkazu a skutečnou URL adresu. Na konci odpovědi je END, podle kterého klient pozná, že stránka skončila.
Příklad takového výstupu může vypadat zjednodušeně takto:
TEXT Toto je radek textu TEXT [Moje stránka!@1] LINK 1 https://www.mb-maniax.cz END
V textu se odkaz nezapisuje jako dlouhá URL adresa. Místo toho se zobrazí popisek a krátká značka @1, @2 a podobně. Skutečné adresy jsou až v záznamech LINK. Důvod je hlavně úspora místa a jednodušší práce na straně klienta. Webové stránky často opakují stejné odkazy v menu, v patičce nebo v seznamech článků. Kdybych všude zapisoval celé URL adresy, přenos by se prodloužil - a vím, že jsme to psal -. ESP není nejrychlejší. Krátké číslo odkazu je úspornější a čitelnější.
Na straně proxy se odkazy sbírají z HTML, převádějí se na absolutní adresy a filtrují se. Neberu prázdné odkazy, kotvy začínající znakem #, javascriptové odkazy, mailto ani telefonní odkazy. Zároveň se hlídá, aby adresa mířila na veřejný http nebo https cíl, ne na lokální nebo privátní síť. Pro text odkazu se použije text z HTML prvku, a když žádný rozumný text neexistuje, použije se samotná adresa. Popisek se zkracuje, aby jeden odkaz zbytečně nerozbil textovou stránku.
Pro formát next mám limit odkazů nastavený na 64, ale postupne budu tento limit zvětšovat, tak se hned nerozčilujte.
Podobně řeším i samotný přenos stránky. Kompletní výstup může být větší, než je pohodlné přečíst najednou přes ESP modul a uložit do pracovního bufferu. Proto proxy umí odpověď rozdělit na části. Když klient pošle parametr part, proxy nevezme celou stránku najednou, ale vrátí jen jednu část. Každá taková odpověď začíná řádkem PART, kde je číslo části, celkový počet částí, celková velikost celého výstupu a velikost aktuálního bloku.
Zjednodušeně může část vypadat takto:
PART 0 3 5120 1980 TEXT Prvni radek... TEXT Dalsi radek...
Důležité je, že proxy se snaží dělit data po celých řádcích. Když to jde, část skončí na hranici záznamu, tedy po CRLF. Klient pak nemusí skládat napůl uříznuté řádky a zpracování je jednodušší. Když by vhodné místo nebylo, část se uřízne podle limitu, ale běžně se držím toho, aby záznamy zůstaly zarovnané.
Na straně ZX Spectrum Next se při načítání nejdřív vyčistí textová cache a tabulka odkazů. Potom se otevře TCP spojení na proxy server a odešle se HTTP požadavek. Klient čte odpověď z ESP modulu jako syrový proud dat a hledá v něm informaci o uzavvření spojení - pak nahraný text v paměťovém buferu přepíše do příslušné paměťové banky tak, aby se dala jednoduše zobrazit.
Řádky TEXT se ukládají do cache jako hotové osmdesátisloupcové textové řádky. To je důležité, protože při rolování už nechci znovu přepočítávat HTML ani dělit dlouhé odstavce. Text je připravený už z proxy, klient ho jen ukládá a kreslí. Prohlížeč má oddělenou oblast pro viditelnou část stránky a pro stavový řádek, takže se při posunu překresluje jen to, co je potřeba.
Zobrazení je postavené na 80sloupcovém tilemap režimu ZX Spectrum Next. Obrazovka je rozdělená na horní část s menu a adresou, hlavní textovou plochu a spodní stavový řádek. Textové řádky se berou z cache podle aktuální pozice v dokumentu. Když uživatel roluje, mění se jen index prvního viditelného řádku a stránka se znovu vykreslí z uložených dat.
Odkazy jsou při vykreslování zvýrazněné jiným atributem. Klient při čtení textu pozná značky typu @1 a podle nich ví, že část řádku patří odkazu. Skutečnou URL adresu ale nehledá v textu. Tu má uloženou v tabulce odkazů, kterou naplnil ze záznamů LINK. Když uživatel klikne myší nebo vybere odkaz, prohlížeč si podle čísla najde URL a připraví nový požadavek na proxy.
Historie a cache jsou řešené přímo v prohlížeči. Při načtení stránky se uloží text i tabulka odkazů. Pro návrat zpět se proto v ideálním případě nemusí znovu stahovat stejná stránka z internetu. Stačí obnovit uložený snímek stránky a znovu ho vykreslit. Proxy sama se nechová jako klasická webová cache. Odpověď posílá jako text/plain a nastavuje ji tak, aby se neukládala po cestě. Ono zpracování stránky skriptem v proxy.php moc času nesežere, mnohem déle čekáte na načtení této stránky přes ESP modul, takže je mnohem rychlejší mít cache přímo v Nextu.
Při převodu HTML se nejdřív zjistí kódování a obsah se převede do UTF-8. Potom se z něj udělá text vhodný pro terminálové zobrazení. Nakonec se výsledek převede na ASCII, protože s tím se na Spectru pracuje nejjednodušeji.
Formuláře jsou zatím podporované jen v jednoduché podobě. Smysl má hlavně vyhledávání nebo jednoduché textové vstupy. Proxy umí sestavit požadavek pro formulář a poslat ho dál na cílový web. Složité formuláře závislé na JavaScriptu, dynamických tokenech nebo moderních ochranách nejsou cílem této verze. Chci, aby šly použít jednoduché věci, ne abych emuloval celý dnešní prohlížeč.
Tabulky jsou zatím slabší místo. V textovém převodu se často rozpadnou na běžné řádky a u složitějších tabulek se ztratí sloupce. Do budoucna bych chtěl přidat jednoduchý režim pro tabulky, kde by proxy spočítala šířky sloupců, ořízla dlouhé buňky a poslala klientovi výsledek tak, aby se dal číst i na 80 sloupcích. Celé řešení je dnes psané hlavně pro ZX Spectrum Next, protože Next má 80sloupcový režim, více paměti, pohodlnější práci s bankami, myš a použitelnou komunikaci přes ESP. Samotný formát ale není závislý na Nextu, takže pokud někdo má přístup k ESP na klasickém ZX Spectru, může se pustit do webového prohlížeče - PHP skript a vše okolo časem uveřejním (až se vše stabilizuje, teď jsem ve fázi překotného vývoje :) ).
Program si můžete stáhnout zdarma zde: https://shrek128.itch.io/speccyweb-zx-spectrum-next
