{"id":5783,"date":"2026-02-01T08:00:15","date_gmt":"2026-02-01T15:00:15","guid":{"rendered":"https:\/\/rec0m88.com\/?p=5783"},"modified":"2026-02-02T11:01:38","modified_gmt":"2026-02-02T18:01:38","slug":"the-synchronicity-challenge-solving-real-time-netplay-with-webrtc-p2p","status":"publish","type":"post","link":"https:\/\/rec0m88.com\/cs\/the-synchronicity-challenge-solving-real-time-netplay-with-webrtc-p2p\/","title":{"rendered":"V\u00fdzva Synchronicity: \u0158e\u0161en\u00ed s\u00ed\u0165ov\u00e9 hry v re\u00e1ln\u00e9m \u010dase pomoc\u00ed WebRTC P2P"},"content":{"rendered":"<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Obsah<\/h2><nav><ul><li><a href=\"#the-architecture-why-servers-are-the-enemy-of-speed\">Architektura: Pro\u010d jsou servery nep\u0159\u00edtelem rychlosti<\/a><\/li><li><a href=\"#sctp-vs-tcp-choosing-speed-over-perfection\">SCTP vs. TCP: Up\u0159ednostn\u011bn\u00ed rychlosti p\u0159ed \u201cdokonalost\u00ed\u201d<\/a><\/li><li><a href=\"#the-synchronous-lock-step-method\">Metoda \u201csynchronn\u00edho lock-stepu\u201d<\/a><\/li><li><a href=\"#security-and-nat-traversal\">Zabezpe\u010den\u00ed a p\u0159ekon\u00e1v\u00e1n\u00ed NAT<\/a><\/li><li><a href=\"#why-web-rtc-is-the-future-of-the-modern-arcade\">Pro\u010d je WebRTC budoucnost\u00ed modern\u00edch heren<\/a><\/li><\/ul><\/nav><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Ve vysoce konkuren\u010dn\u00edm sv\u011bt\u011b retro her a modern\u00edch ark\u00e1dov\u00fdch titul\u016f je \u201czpo\u017ed\u011bn\u00ed\u201d v\u00edc ne\u017e jen nep\u0159\u00edjemnost \u2013 je to faktor, kter\u00fd m\u016f\u017ee rozhodnout o v\u00fdsledku hry. Kdy\u017e hrajete online rychlou plo\u0161inovku nebo bojovku, kde z\u00e1le\u017e\u00ed na bleskov\u00fdch reflexech, i zpo\u017ed\u011bn\u00ed 100 ms m\u016f\u017ee znamenat rozd\u00edl mezi skokem v perfektn\u00edm na\u010dasov\u00e1n\u00ed a frustruj\u00edc\u00edm \u201cGame Over\u201d.\u201d<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Zat\u00edmco mnoho modern\u00edch bojov\u00fdch her vyu\u017e\u00edv\u00e1 technologii \u201cRollback\u201d k zamaskov\u00e1n\u00ed latence, v <strong>Rec0m88<\/strong>, zam\u011b\u0159ili jsme se na jin\u00fd, p\u0159\u00edm\u011bj\u0161\u00ed p\u0159\u00edstup: <strong>Nativn\u00ed synchronizace WebRTC typu peer-to-peer (P2P)<\/strong>. T\u00edm, \u017ee jsme se vyhnuli modelu centralizovan\u00e9ho serveru a vyu\u017eili nejmodern\u011bj\u0161\u00ed datov\u00e9 kan\u00e1ly prohl\u00ed\u017ee\u010de, jsme vytvo\u0159ili synchronizovan\u00e9 prost\u0159ed\u00ed \u201cLock-Step\u201d, kter\u00e9 klade d\u016fraz na \u010distou rychlost a integritu vstupn\u00edch dat.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-architecture-why-servers-are-the-enemy-of-speed\">Architektura: Pro\u010d jsou servery nep\u0159\u00edtelem rychlosti<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">V\u011bt\u0161ina online her vyu\u017e\u00edv\u00e1 model \u201cklient-server\u201d. Va\u0161e zad\u00e1n\u00ed se ode\u0161le na server, ten jej zpracuje a v\u00fdsledek pak ode\u0161le zp\u011bt v\u00e1m i va\u0161emu soupe\u0159i. Zat\u00edmco je to skv\u011bl\u00e9 pro battle royale hry se 100 hr\u00e1\u010di, pro retro hry typu 1v1 je to katastrof\u00e1ln\u00ed. Ka\u017ed\u00e1 \u201czast\u00e1vka\u201d na serveru zvy\u0161uje fyzickou vzd\u00e1lenost a prodlu\u017euje dobu zpracov\u00e1n\u00ed (latenci).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Dne <strong>Rec0m88<\/strong>, jakmile se p\u0159ipoj\u00edte do lobby, signaliza\u010dn\u00ed server ustoup\u00ed do pozad\u00ed. Pomoc\u00ed <strong>Datov\u00e9 kan\u00e1ly WebRTC<\/strong>, v\u00e1\u0161 prohl\u00ed\u017ee\u010d nav\u00e1\u017ee p\u0159\u00edm\u00fd \u201ctunel\u201d s prohl\u00ed\u017ee\u010dem va\u0161eho protivn\u00edka.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u017d\u00e1dn\u00ed prost\u0159edn\u00edci:<\/strong> Data se po internetu p\u0159en\u00e1\u0161ej\u00ed po co nejkrat\u0161\u00ed fyzick\u00e9 trase.<\/li>\n\n\n\n<li><strong>Sn\u00ed\u017een\u00ed kol\u00eds\u00e1n\u00ed:<\/strong> Bez centr\u00e1ln\u00edho serveru, kter\u00fd by musel zvl\u00e1dat tis\u00edce p\u0159ipojen\u00ed, z\u016fst\u00e1v\u00e1 \u201cdoru\u010dov\u00e1n\u00ed paket\u016f\u201d stabiln\u00ed, co\u017e je kl\u00ed\u010dov\u00e9 pro plynul\u00fd rytmus hern\u00edch smy\u010dek retro her.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sctp-vs-tcp-choosing-speed-over-perfection\">SCTP vs. TCP: Up\u0159ednostn\u011bn\u00ed rychlosti p\u0159ed \u201cdokonalost\u00ed\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">B\u011b\u017en\u00fd webov\u00fd provoz (nap\u0159\u00edklad na\u010d\u00edt\u00e1n\u00ed webov\u00e9 str\u00e1nky) vyu\u017e\u00edv\u00e1 <strong>TCP<\/strong>. Protokol TCP je posedl\u00fd dokonalost\u00ed; pokud dojde ke ztr\u00e1t\u011b paketu, zastav\u00ed ve\u0161kerou \u010dinnost a po\u017e\u00e1d\u00e1 o jeho opakovan\u00e9 odesl\u00e1n\u00ed. Ve h\u0159e n\u00e1s nezaj\u00edm\u00e1 paket, kter\u00fd byl odesl\u00e1n p\u0159ed 200 ms \u2013 zaj\u00edm\u00e1 n\u00e1s pouze to, co se pr\u00e1v\u011b d\u011bje <em>nyn\u00ed<\/em>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N\u00e1\u0161 motor vyu\u017e\u00edv\u00e1 <strong>SCTP (Stream Control Transmission Protocol)<\/strong> vrstva v r\u00e1mci WebRTC, nakonfigurovan\u00e1 pro <strong>Neuspo\u0159\u00e1dan\u00e9 a nespolehliv\u00e9 doru\u010den\u00ed<\/strong>.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li><strong>N\u00edzk\u00e9 re\u017eijn\u00ed n\u00e1klady:<\/strong> Odstra\u0148ujeme z tradi\u010dn\u00edch webov\u00fdch protokol\u016f nadbyte\u010dn\u00e9 prvky, jako je \u201cnavazov\u00e1n\u00ed spojen\u00ed\u201d a \u201ckontrola chyb\u201d.<\/li>\n\n\n\n<li><strong>Prevence blokov\u00e1n\u00ed na za\u010d\u00e1tku fronty:<\/strong> Pokud dojde ke zpo\u017ed\u011bn\u00ed jednoho p\u0159\u00edchoz\u00edho paketu v p\u0159et\u00ed\u017een\u00e9m sm\u011brova\u010di, nezpomal\u00ed to n\u00e1sleduj\u00edc\u00edch p\u011bt paket\u016f. Emul\u00e1tor jednodu\u0161e zpracov\u00e1v\u00e1 nejnov\u011bj\u0161\u00ed \u201cstav sv\u011bta\u201d, kter\u00fd obdr\u017e\u00ed, \u010d\u00edm\u017e zaji\u0161\u0165uje plynul\u00fd pr\u016fb\u011bh akce.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-synchronous-lock-step-method\">Metoda \u201csynchronn\u00edho lock-stepu\u201d<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Jeliko\u017e nepou\u017e\u00edv\u00e1me \u201cRollback\u201d (kter\u00fd p\u0159edpov\u00edd\u00e1 budoucnost), vyu\u017e\u00edv\u00e1me vysoce optimalizovan\u00fd <strong>Synchronn\u00ed re\u017eim \u201elock-step\u201c<\/strong> model. V tomto uspo\u0159\u00e1d\u00e1n\u00ed se emul\u00e1tory na obou konc\u00edch mus\u00ed p\u0159ed pokra\u010dov\u00e1n\u00edm dohodnout na \u010d\u00edsle r\u00e1mce.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Aby se to i p\u0159es fyzik\u00e1ln\u00ed z\u00e1kony t\u00fdkaj\u00edc\u00ed se latence jevilo jako \u201cokam\u017eit\u00e9\u201d, implementuje Rec0m88 <strong>Nastaven\u00ed vstupn\u00edho vyrovn\u00e1vac\u00edho pam\u011bti<\/strong>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Dynamick\u00e9 vyrovn\u00e1vac\u00ed pam\u011bti pro jitter:<\/strong> N\u00e1\u0161 engine v re\u00e1ln\u00e9m \u010dase m\u011b\u0159\u00ed \u201cdobu p\u0159enosu tam a zp\u011bt\u201d (RTT) mezi v\u00e1mi a va\u0161\u00edm p\u0159\u00edtelem. Pokud m\u00e1te stabiln\u00ed p\u0159ipojen\u00ed (nap\u0159. 20 ms), engine automaticky zmen\u0161\u00ed vstupn\u00ed vyrovn\u00e1vac\u00ed pam\u011b\u0165 t\u00e9m\u011b\u0159 na nulu.<\/li>\n\n\n\n<li><strong>Na\u010dasov\u00e1n\u00ed sn\u00edmk\u016f WASM:<\/strong> Proto\u017ee na\u0161e emul\u00e1torov\u00e1 j\u00e1dra b\u011b\u017e\u00ed v <strong>WebAssembly<\/strong>, m\u016f\u017eeme prov\u00e1d\u011bn\u00ed sn\u00edmku na n\u011bkolik mikrosekund pozastavit, zat\u00edmco \u010dek\u00e1me na paket P2P, a pot\u00e9 prov\u00e1d\u011bn\u00ed \u201cp\u0159esko\u010dit vp\u0159ed\u201d, abychom z\u016fstali synchronizovan\u00ed s audio hodinami.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"security-and-nat-traversal\">Zabezpe\u010den\u00ed a p\u0159ekon\u00e1v\u00e1n\u00ed NAT<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u010cast\u00e1 ot\u00e1zka v souvislosti s hran\u00edm her typu P2P zn\u00ed: <em>\u201cJe to bezpe\u010dn\u00e9?\u201d<\/em> D\u0159\u00edve znamenalo P2P, \u017ee jste svou IP adresu odhalili nezn\u00e1m\u00e9mu \u010dlov\u011bku. D\u00edky technologii WebRTC na Rec0m88 je p\u0159ipojen\u00ed chr\u00e1n\u011bno pomoc\u00ed <strong>DTLS (Datagram Transport Layer Security)<\/strong>. Prohl\u00ed\u017ee\u010de si vym\u011b\u0148uj\u00ed za\u0161ifrovan\u00e9 \u201cotisky\u201d, \u010d\u00edm\u017e je zaji\u0161t\u011bno, \u017ee i kdy\u017e komunikujete p\u0159\u00edmo s jin\u00fdm hr\u00e1\u010dem, data z\u016fst\u00e1vaj\u00ed za\u0161ifrovan\u00e1 a v\u00e1\u0161 lok\u00e1ln\u00ed syst\u00e9m z\u016fst\u00e1v\u00e1 v izolovan\u00e9m prost\u0159ed\u00ed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Krom\u011b toho \u0159e\u0161\u00edme probl\u00e9m \u201cp\u0159esm\u011brov\u00e1n\u00ed port\u016f\u201d pomoc\u00ed <strong>ICE (Interactive Connectivity Establishment)<\/strong>. D\u00edky vyu\u017eit\u00ed server\u016f STUN\/TURN k \u201cprokous\u00e1n\u00ed\u201d se p\u0159es br\u00e1ny firewall zaji\u0161\u0165ujeme, \u017ee se dva hr\u00e1\u010di mohou spojit, i kdy\u017e jsou p\u0159ipojeni p\u0159es p\u0159\u00edsn\u011b nastaven\u00e9 dom\u00e1c\u00ed routery nebo \u0161koln\u00ed s\u00edt\u011b \u2013 a to v\u0161e bez nutnosti ru\u010dn\u00edho otev\u00edr\u00e1n\u00ed jedin\u00e9ho portu.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"why-web-rtc-is-the-future-of-the-modern-arcade\">Pro\u010d je WebRTC budoucnost\u00ed modern\u00edch heren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">D\u00edky tomu, \u017ee Rec0m88 up\u0159ednost\u0148uje technologii WebRTC P2P p\u0159ed tradi\u010dn\u00edmi metodami zalo\u017een\u00fdmi na serverech \u010di metodami s vr\u00e1cen\u00edm zp\u011bt, nab\u00edz\u00ed \u201c\u010dist\u00fd\u201d z\u00e1\u017eitek z emulace. Ne\u201ch\u00e1d\u00e1me\u201d, co hr\u00e1\u010d ud\u011blal; zaji\u0161\u0165ujeme, aby oba hr\u00e1\u010di vid\u011bli p\u0159esn\u011b stejn\u00fd sn\u00edmek, p\u0159esn\u011b ve stejn\u00fd okam\u017eik, a to s co nejni\u017e\u0161\u00ed fyzickou latenc\u00ed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je to z\u00e1\u017eitek, kter\u00fd se nejv\u00edce podob\u00e1 tomu, jako byste sed\u011bli na stejn\u00e9 pohovce s druh\u00fdm ovlada\u010dem, a to v\u0161e d\u00edky modern\u00edmu webov\u00e9mu stacku.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Technick\u00e1 pozn\u00e1mka: Optim\u00e1ln\u00ed hra<\/strong> Pro co nejlep\u0161\u00ed z\u00e1\u017eitek p\u0159i vyu\u017e\u00edv\u00e1n\u00ed na\u0161ich datov\u00fdch kan\u00e1l\u016f WebRTC doporu\u010dujeme kabelov\u00e9 p\u0159ipojen\u00ed p\u0159es Ethernet. A\u010dkoli je na\u0161e technologie P2P navr\u017eena tak, aby zvl\u00e1dala kol\u00eds\u00e1n\u00ed sign\u00e1lu v s\u00edti Wi-Fi, pro dokonalou p\u0159esnost na \u00farovni jednotliv\u00fdch sn\u00edmk\u016f je kabelov\u00e9 p\u0159ipojen\u00ed st\u00e1le nejlep\u0161\u00ed volbou.<\/p>","protected":false},"excerpt":{"rendered":"<p>Ve vysoce konkuren\u010dn\u00edm sv\u011bt\u011b retro her a modern\u00edch ark\u00e1dov\u00fdch titul\u016f je \u201czpo\u017ed\u011bn\u00ed\u201d v\u00edc ne\u017e jen nep\u0159\u00edjemnost \u2013 je to faktor, kter\u00fd m\u016f\u017ee rozhodnout o v\u00fdsledku hry. Kdy\u017e hrajete online rychlou plo\u0161inovku nebo bojovku vy\u017eaduj\u00edc\u00ed bleskov\u00e9 reflexy, i zpo\u017ed\u011bn\u00ed 100 ms m\u016f\u017ee znamenat rozd\u00edl mezi skokem v perfektn\u00edm na\u010dasov\u00e1n\u00ed a frustruj\u00edc\u00edm \u201cGame Over\u201d. Zat\u00edmco mnoho modern\u00edch bojov\u00fdch her vyu\u017e\u00edv\u00e1\u2026<\/p>","protected":false},"author":1,"featured_media":5764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"wpai_generated_summary":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[40],"tags":[],"class_list":["post-5783","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-meta"],"_links":{"self":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/posts\/5783","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/comments?post=5783"}],"version-history":[{"count":0,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/posts\/5783\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media\/5764"}],"wp:attachment":[{"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/media?parent=5783"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/categories?post=5783"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rec0m88.com\/cs\/wp-json\/wp\/v2\/tags?post=5783"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}