{"id":38370,"date":"2019-10-31T22:23:18","date_gmt":"2019-10-31T19:23:18","guid":{"rendered":"https:\/\/prohoster.info\/blog\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase\/"},"modified":"2019-10-31T22:23:18","modified_gmt":"2019-10-31T19:23:18","slug":"portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase","status":"publish","type":"post","link":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase","title":{"rendered":"\u00c1tkonvert\u00e1ljuk a t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot C++-r\u00f3l webre a Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel","gt_translate_keys":[{"key":"rendered","format":"text"}]},"content":{"rendered":"<h2>Bevezet\u00e9s<\/h2>\n<p>\nC\u00e9g\u00fcnk <noindex><a rel=\"nofollow\" href=\"https:\/\/leaningtech.com\">Leaning Technologies<\/a><\/noindex> megold\u00e1sokat k\u00edn\u00e1l a hagyom\u00e1nyos asztali alkalmaz\u00e1sok webre t\u00f6rt\u00e9n\u0151 \u00e1t\u00fcltet\u00e9s\u00e9re. C++ ford\u00edt\u00f3nk <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/leaningtech\/cheerp-meta\">Cheerp<\/a><\/noindex> WebAssembly \u00e9s JavaScript kombin\u00e1ci\u00f3j\u00e1t gener\u00e1lja, ami biztos\u00edtja a <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/leaningtech\/cheerp-meta\/wiki\/Cheerp-Tutorial%3A-Mixed-mode-C++-to-WebAssembly-and-JavaScript\">k\u00f6nny\u0171 b\u00f6ng\u00e9sz\u0151beli interakci\u00f3t<\/a><\/noindex>, \u00e9s a nagy teljes\u00edtm\u00e9nyt.<\/p>\n<p>P\u00e9ldak\u00e9nt arra, hogy mire haszn\u00e1lhat\u00f3, \u00fagy d\u00f6nt\u00f6tt\u00fcnk, hogy \u00e1tport\u00e1lunk egy t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot a webre, \u00e9s ezt kiv\u00e1lasztottuk <noindex><a rel=\"nofollow\" href=\"https:\/\/www.teeworlds.com\/\"><strong>Teeworlds<\/strong><\/a><\/noindex>. A Teeworlds egy t\u00f6bbj\u00e1t\u00e9kos, k\u00e9tdimenzi\u00f3s retro j\u00e1t\u00e9k, amelynek kicsi, de akt\u00edv j\u00e1t\u00e9kos k\u00f6z\u00f6ss\u00e9ge van (k\u00f6zt\u00fck \u00e9n is!). Let\u00f6lt\u00e9si forr\u00e1sai \u00e9s CPU-, GPU-ig\u00e9nyei alacsonyak \u2014 ide\u00e1lis jel\u00f6lt.<\/p>\n<p><img decoding=\"async\" alt=\"\u00c1tkonvert\u00e1ljuk a t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot C++-r\u00f3l webre a Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel\" src=\"\/wp-content\/uploads\/2019\/09\/30bff36ee1158ddea2e76d8b11e48d2b.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>A b\u00f6ng\u00e9sz\u0151ben fut\u00f3 Teeworlds<\/i><br \/>\n<noindex><a rel=\"nofollow\" name=\"habracut\"><\/a><\/noindex><br \/>\nE projektet \u00fagy d\u00f6nt\u00f6tt\u00fck, hogy arra haszn\u00e1ljuk, hogy k\u00eds\u00e9rletez\u00fcnk a <strong>webre t\u00f6rt\u00e9n\u0151 h\u00e1l\u00f3zati k\u00f3d port\u00e1l\u00e1s\u00e1ra vonatkoz\u00f3 \u00e1ltal\u00e1nos megold\u00e1sokkal<\/strong>. Ezt \u00e1ltal\u00e1ban a k\u00f6vetkez\u0151 m\u00f3dokon val\u00f3s\u00edtj\u00e1k meg:<\/p>\n<ul>\n<li><strong>XMLHttpRequest\/fetch<\/strong>, ha a h\u00e1l\u00f3zati r\u00e9sz csak HTTP-k\u00e9r\u00e9sekb\u0151l \u00e1ll, vagy<\/li>\n<li><strong>WebSockets<\/strong>.<\/li>\n<\/ul>\n<p>\nMindk\u00e9t megold\u00e1s megk\u00f6veteli egy szerveroldali komponens hosztol\u00e1s\u00e1t, \u00e9s egyik sem teszi lehet\u0151v\u00e9, hogy sz\u00e1ll\u00edt\u00e1si protokollk\u00e9nt haszn\u00e1ljuk <noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/User_Datagram_Protocol\">UDP<\/a><\/noindex>. Ez fontos az olyan val\u00f3s idej\u0171 alkalmaz\u00e1sokn\u00e1l, mint a videokonferenci\u00e1k \u00e9s j\u00e1t\u00e9kok, mert a megb\u00edzhat\u00f3s\u00e1g \u00e9s a csomagok sorrendj\u00e9nek garant\u00e1l\u00e1sa <noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Transmission_Control_Protocol\">TCP<\/a><\/noindex> zavarokat okozhat az alacsony k\u00e9sleltet\u00e9sben.<\/p>\n<p>Van egy harmadik \u00fat is \u2014 a b\u00f6ng\u00e9sz\u0151n kereszt\u00fcli h\u00e1l\u00f3zat haszn\u00e1lata: <noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/WebRTC\"><strong>WebRTC<\/strong><\/a><\/noindex>.<\/p>\n<p><noindex><a rel=\"nofollow\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/RTCDataChannel\"><strong>RTCDataChannel<\/strong><\/a><\/noindex> t\u00e1mogatja a megb\u00edzhat\u00f3 \u00e9s a megb\u00edzhatatlan adat\u00e1tvitelt (az ut\u00f3bbi esetben lehet\u0151s\u00e9g szerint UDP-t pr\u00f3b\u00e1l haszn\u00e1lni sz\u00e1ll\u00edt\u00e1si protokollk\u00e9nt), \u00e9s alkalmazhat\u00f3 t\u00e1voli szerverrel \u00e9s b\u00f6ng\u00e9sz\u0151k k\u00f6z\u00f6tt is. <strong>Ez azt jelenti, hogy a teljes alkalmaz\u00e1st \u00e1tport\u00e1lhatjuk a b\u00f6ng\u00e9sz\u0151be, bele\u00e9rtve a szerveroldali komponenst is!<\/strong><\/p>\n<p>Ez azonban egy tov\u00e1bbi neh\u00e9zs\u00e9ggel j\u00e1r: miel\u0151tt a k\u00e9t WebRTC peer adatokat tudna cser\u00e9lni, viszonylag bonyolult \"k\u00e9zfog\u00f3\" (handshake) elj\u00e1r\u00e1st kell v\u00e9grehajtani a csatlakoz\u00e1shoz, amihez t\u00f6bb k\u00fcls\u0151 entit\u00e1s (jelz\u0151 szerver \u00e9s egy vagy t\u00f6bb STUN szerver) sz\u00fcks\u00e9ges. <noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/STUN\">TURN<\/a><\/noindex>\/<noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Traversal_Using_Relays_around_NAT\">Ide\u00e1lisan olyan h\u00e1l\u00f3zati API-t szeretn\u00e9nk l\u00e9trehozni, amely bels\u0151leg WebRTC-t haszn\u00e1l, de a lehet\u0151 legjobban hasonl\u00edt az UDP Sockets interf\u00e9sz\u00e9hez, amely nem ig\u00e9nyel kapcsolatot.<\/a><\/noindex>).<\/p>\n<p>Ide\u00e1lis esetben szeretn\u00e9nk egy h\u00e1l\u00f3zati API-t l\u00e9trehozni, amely a WebRTC-t haszn\u00e1lja, de min\u00e9l k\u00f6zelebb \u00e1ll a UDP Sockets interf\u00e9szhez, amelyhez nem sz\u00fcks\u00e9ges a kapcsolat l\u00e9trehoz\u00e1sa.<\/p>\n<p>Ez lehet\u0151v\u00e9 teszi sz\u00e1munkra, hogy kihaszn\u00e1ljuk a WebRTC el\u0151nyeit an\u00e9lk\u00fcl, hogy bonyolult r\u00e9szleteket kellene felfedn\u00fcnk az alkalmaz\u00e1s k\u00f3dj\u00e1r\u00f3l (amelyet a projekt\u00fcnkben a lehet\u0151 legkevesebbet akartunk m\u00f3dos\u00edtani).<\/p>\n<h1>Minim\u00e1lis WebRTC<\/h1>\n<p>\nA WebRTC egy b\u00f6ng\u00e9sz\u0151kben el\u00e9rhet\u0151 API-k\u00e9szlet, amely lehet\u0151v\u00e9 teszi a peer-to-peer hang, vide\u00f3 \u00e9s tetsz\u0151leges adatok \u00e1tvitel\u00e9t.<\/p>\n<p>A kapcsolatok a peer-ek k\u00f6z\u00f6tt STUN \u00e9s\/vagy TURN szervereken kereszt\u00fcl, egy ICE n\u00e9ven ismert mechanizmus seg\u00edts\u00e9g\u00e9vel j\u00f6nnek l\u00e9tre (m\u00e9g akkor is, ha NAT van jelen az egyik vagy mindk\u00e9t oldalon). A peer-ek ICE inform\u00e1ci\u00f3t \u00e9s csatornaparam\u00e9tereket cser\u00e9lnek az SDP protokoll offer \u00e9s answer mechanizmus\u00e1n kereszt\u00fcl.<\/p>\n<p>H\u0171ha! Milyen sok r\u00f6vid\u00edt\u00e9s egy f\u00fcst alatt. R\u00f6viden magyar\u00e1zzuk el, mit jelentenek ezek a fogalmak:<\/p>\n<ul>\n<li><noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/STUN\"><strong>Session Traversal Utilities for NAT<\/strong> (<strong>TURN<\/strong>)<\/a><\/noindex> \u2014 egy protokoll NAT megker\u00fcl\u00e9s\u00e9re \u00e9s egy (IP, port) p\u00e1r beszerz\u00e9s\u00e9re a k\u00f6zvetlen adatcser\u00e9hez a gazdag\u00e9ppel. Ha siker\u00fcl el\u00e9rnie a c\u00e9lj\u00e1t, a peer-ek k\u00f6zvetlen\u00fcl adatokat cser\u00e9lhetnek egym\u00e1ssal.<\/li>\n<li><noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Traversal_Using_Relays_around_NAT\"><strong>Traversal Using Relays around NAT<\/strong> (<strong>Ide\u00e1lisan olyan h\u00e1l\u00f3zati API-t szeretn\u00e9nk l\u00e9trehozni, amely bels\u0151leg WebRTC-t haszn\u00e1l, de a lehet\u0151 legjobban hasonl\u00edt az UDP Sockets interf\u00e9sz\u00e9hez, amely nem ig\u00e9nyel kapcsolatot.<\/strong>)<\/a><\/noindex> szint\u00e9n NAT megker\u00fcl\u00e9s\u00e9re szolg\u00e1l, de \u00fagy val\u00f3s\u00edtja meg ezt, hogy az adatokat a k\u00f6zvetlen\u00fcl l\u00e1that\u00f3 proxy-n kereszt\u00fcl ir\u00e1ny\u00edtja mindk\u00e9t peer sz\u00e1m\u00e1ra. K\u00e9sleltet\u00e9st \u00e9s k\u00f6lts\u00e9get ad hozz\u00e1 a v\u00e9grehajt\u00e1s sor\u00e1n, mint a STUN (mivel a kapcsolat sor\u00e1n folyamatosan alkalmazz\u00e1k), de n\u00e9ha ez az egyetlen lehets\u00e9ges megold\u00e1s.<\/li>\n<li><noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Interactive_Connectivity_Establishment\"><strong>Interactive Connectivity Establishment<\/strong> (<strong>ICE<\/strong>)<\/a><\/noindex> azt haszn\u00e1lj\u00e1k, hogy a legjobb lehets\u00e9ges m\u00f3dot v\u00e1lassz\u00e1k a k\u00e9t peer \u00f6sszekapcsol\u00e1s\u00e1ra a peer-ek k\u00f6lcs\u00f6n\u00f6s kapcsolati inform\u00e1ci\u00f3i \u00e9s a STUN \u00e9s TURN szerverekt\u0151l beszerzett inform\u00e1ci\u00f3k alapj\u00e1n.<\/li>\n<li><noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Session_Description_Protocol\"><strong>Session Description Protocol<\/strong> (<strong>SDP<\/strong>)<\/a><\/noindex> \u2014 a kapcsolat csatorn\u00e1j\u00e1nak param\u00e9tereinek le\u00edr\u00e1s\u00e1ra szolg\u00e1l\u00f3 form\u00e1tum, p\u00e9ld\u00e1ul az ICE jel\u00f6ltek, multim\u00e9dia kodekek (hang-\/videocsatorn\u00e1k eset\u00e9n), stb. Az egyik peer SDP Offer-t ('aj\u00e1nlat') k\u00fcld, a m\u00e1sik pedig SDP Answer-t ('v\u00e1lasz') ad. Ezt k\u00f6vet\u0151en l\u00e9trej\u00f6n a csatorna.<\/li>\n<\/ul>\n<p>\nAhhoz, hogy ilyen kapcsolatot hozzanak l\u00e9tre, a peer-eknek \u00f6ssze kell gy\u0171jteni\u00fck az \u00e1ltaluk a STUN \u00e9s TURN szerverekt\u0151l kapott inform\u00e1ci\u00f3t, \u00e9s meg kell osztaniuk egym\u00e1ssal.<\/p>\n<p>A probl\u00e9ma az, hogy jelenleg nincs k\u00f6zvetlen lehet\u0151s\u00e9g\u00fck az adatok cser\u00e9j\u00e9re, ez\u00e9rt egy alternat\u00edv mechanizmusnak kell l\u00e9teznie az adatok \u00e1tvitel\u00e9re: a jelz\u0151 szerver.<\/p>\n<p>A jelz\u0151 szerver nagyon egyszer\u0171 lehet, mert egyetlen feladata az adatok \u00e1tkapcsol\u00e1sa a peer-ek k\u00f6z\u00f6tt az '\u00fctk\u00f6z\u00e9s' szakaszban (ahogy az az al\u00e1bbi \u00e1br\u00e1n is l\u00e1that\u00f3).<\/p>\n<p><img decoding=\"async\" alt=\"\u00c1tkonvert\u00e1ljuk a t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot C++-r\u00f3l webre a Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel\" src=\"\/wp-content\/uploads\/2019\/09\/0fc39ba5e0942bc19183e8cf06c60868.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>Egyszer\u0171s\u00edtett WebRTC k\u00e9zfog\u00f3 folyamat\u00e1bra<\/i><\/p>\n<h1>Teeworlds h\u00e1l\u00f3zati modell \u00e1ttekint\u00e9se<\/h1>\n<p>\nA Teeworlds h\u00e1l\u00f3zati architekt\u00far\u00e1ja nagyon egyszer\u0171:<\/p>\n<ul>\n<li>A kliens \u00e9s a szerver komponensek k\u00e9t k\u00fcl\u00f6n programot jelentenek.<\/li>\n<li>A kliensek \u00fagy l\u00e9pnek be a j\u00e1t\u00e9kba, hogy csatlakoznak az egyik t\u00f6bb szerverhez, amelyek egyszerre csak egy j\u00e1t\u00e9kot hosztolnak.<\/li>\n<li>Minden adat\u00e1tvitel a j\u00e1t\u00e9k sor\u00e1n a szerveren kereszt\u00fcl t\u00f6rt\u00e9nik.<\/li>\n<li>Egy k\u00fcl\u00f6n mester szerver haszn\u00e1lat\u00e1val gy\u0171jtj\u00fck \u00f6ssze az \u00f6sszes nyilv\u00e1nos szerver list\u00e1j\u00e1t, amely a j\u00e1t\u00e9kkliensben megjelenik.<\/li>\n<\/ul>\n<p>\nA WebRTC adatv\u00e1lt\u00e1s\u00e1nak k\u00f6sz\u00f6nhet\u0151en \u00e1thelyezhetj\u00fck a j\u00e1t\u00e9k szerver komponens\u00e9t a b\u00f6ng\u00e9sz\u0151be, ahol a kliens tal\u00e1lhat\u00f3. Ez nagyszer\u0171 lehet\u0151s\u00e9get ad nek\u00fcnk\u2026<\/p>\n<h1>Elhagyjuk a szervereket<\/h1>\n<p>\nA szerverlogika hi\u00e1ny\u00e1nak van egy kellemes el\u0151nye: az eg\u00e9sz alkalmaz\u00e1st statikus tartalomk\u00e9nt telep\u00edthetj\u00fck a Github Pages-re vagy a saj\u00e1t berendez\u00e9s\u00fcnkre a Cloudflare-en, \u00edgy ingyenesen biztos\u00edthatjuk a gyors t\u00f6lt\u00e9st \u00e9s a magas rendelkez\u00e9sre \u00e1ll\u00e1st. Alapvet\u0151en elfelejthetj\u00fck a szervereket, \u00e9s ha szerencs\u00e9nk van, hogy a j\u00e1t\u00e9k n\u00e9pszer\u0171 lesz, akkor az infrastrukt\u00far\u00e1t nem kell friss\u00edteni.<\/p>\n<p>Azonban ahhoz, hogy a rendszer m\u0171k\u00f6dj\u00f6n, m\u00e9g mindig sz\u00fcks\u00e9g\u00fcnk van k\u00fcls\u0151 architekt\u00far\u00e1ra:<\/p>\n<ul>\n<li>Egy vagy t\u00f6bb STUN szerver: t\u00f6bb ingyenes lehet\u0151s\u00e9g k\u00f6z\u00fcl v\u00e1laszthatunk.<\/li>\n<li>Legal\u00e1bb egy TURN szerver: itt nincsenek ingyenes lehet\u0151s\u00e9gek, \u00edgy saj\u00e1tot \u00fczemeltethet\u00fcnk, vagy fizethet\u00fcnk a szolg\u00e1ltat\u00e1s\u00e9rt. Szerencs\u00e9re a legt\u00f6bb id\u0151ben a kapcsolatot STUN szervereken kereszt\u00fcl lehet l\u00e9trehozni (\u00e9s biztos\u00edtani az igazi p2p-t), de a TURN mint tartal\u00e9k lehet\u0151s\u00e9g sz\u00fcks\u00e9ges.<\/li>\n<li>Jelz\u0151 szerver: a k\u00e9t m\u00e1sik aspektust\u00f3l elt\u00e9r\u0151en a jelz\u00e9s nem standardiz\u00e1lt. Az, hogy a jelz\u0151 szerver val\u00f3j\u00e1ban milyen feladatokat l\u00e1t el, r\u00e9szben az alkalmaz\u00e1st\u00f3l f\u00fcgg. A mi eset\u00fcnkben a kapcsolat l\u00e9trehoz\u00e1sa el\u0151tt kis mennyis\u00e9g\u0171 adatcser\u00e9re van sz\u00fcks\u00e9g.<\/li>\n<li>Teeworlds mester szerver: m\u00e1s szerverek haszn\u00e1lj\u00e1k arra, hogy \u00e9rtes\u00edtsenek a l\u00e9tez\u00e9s\u00fckr\u0151l, m\u00edg a kliensek a nyilv\u00e1nos szerverek keres\u00e9s\u00e9re haszn\u00e1lj\u00e1k. B\u00e1r nem k\u00f6telez\u0151 (a kliensek mindig csatlakozhatnak a m\u00e1r ismert szerverhez manu\u00e1lisan), j\u00f3 lenne, ha rendelkez\u00e9sre \u00e1llna, hogy a j\u00e1t\u00e9kosok v\u00e9letlenszer\u0171 emberekkel j\u00e1tszhassanak.<\/li>\n<\/ul>\n<p>\n\u00dagy d\u00f6nt\u00f6tt\u00fcnk, hogy a Google ingyenes STUN szervereit haszn\u00e1ljuk, m\u00edg egy TURN szervert saj\u00e1t magunk \u00fczemeltetj\u00fck.<\/p>\n<p>Az utols\u00f3 k\u00e9t ponthoz haszn\u00e1ltuk <noindex><a rel=\"nofollow\" href=\"https:\/\/en.wikipedia.org\/wiki\/Firebase\">Firebase<\/a><\/noindex>:<\/p>\n<ul>\n<li>A Teeworlds mester szervere nagyon egyszer\u0171en van megval\u00f3s\u00edtva: egy objektumok list\u00e1jak\u00e9nt, amelyek tartalmazz\u00e1k az akt\u00edv szerverek inform\u00e1ci\u00f3it (n\u00e9v, IP, t\u00e9rk\u00e9p, m\u00f3d, \u2026). A szerverek k\u00f6zz\u00e9teszik \u00e9s friss\u00edtik a saj\u00e1t objektumukat, m\u00edg az \u00fcgyfelek lek\u00e9rik az eg\u00e9sz list\u00e1t, \u00e9s megjelen\u00edtik azt a j\u00e1t\u00e9kosnak. Ezen k\u00edv\u00fcl HTML form\u00e1j\u00e1ban is megjelen\u00edtj\u00fck a list\u00e1t a f\u0151oldalon, hogy a j\u00e1t\u00e9kosok egyszer\u0171en r\u00e1kattinthassanak a szerverre \u00e9s k\u00f6zvetlen\u00fcl bel\u00e9pjenek a j\u00e1t\u00e9kba.<\/li>\n<li>A jelz\u00e9s szorosan \u00f6sszef\u00fcgg a k\u00f6vetkez\u0151 r\u00e9szben bemutatott socket megval\u00f3s\u00edt\u00e1sunkkal.<\/li>\n<\/ul>\n<p>\n<img decoding=\"async\" alt=\"\u00c1tkonvert\u00e1ljuk a t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot C++-r\u00f3l webre a Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel\" src=\"\/wp-content\/uploads\/2019\/09\/5e30bc22643f8baecf850053bf69e130.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>A j\u00e1t\u00e9kbeli \u00e9s a f\u0151oldalon l\u00e9v\u0151 szerverek list\u00e1ja<\/i><\/p>\n<h1>Socket megval\u00f3s\u00edt\u00e1s<\/h1>\n<p>\nEgy olyan API-t szeretn\u00e9nk l\u00e9trehozni, amely a lehet\u0151 legk\u00f6zelebb \u00e1ll a Posix UDP Sockets-hoz, hogy minimaliz\u00e1ljuk a sz\u00fcks\u00e9ges v\u00e1ltoztat\u00e1sok sz\u00e1m\u00e1t.<\/p>\n<p>A legsz\u00fcks\u00e9gesebb minim\u00e1lis funkci\u00f3kat szeretn\u00e9nk megval\u00f3s\u00edtani a legegyszer\u0171bb h\u00e1l\u00f3zati adatcser\u00e9hez.<\/p>\n<p>P\u00e9ld\u00e1ul nincs sz\u00fcks\u00e9g\u00fcnk val\u00f3di \u00fatv\u00e1laszt\u00e1sra: minden peer egy virtu\u00e1lis \"LAN\"-ban tal\u00e1lhat\u00f3, amely egy adott Firebase adatb\u00e1zishoz kapcsol\u00f3dik.<\/p>\n<p>Ennek megfelel\u0151en nincs sz\u00fcks\u00e9g\u00fcnk egyedi IP-c\u00edmekre: a peer-ek egyedi azonos\u00edt\u00e1s\u00e1hoz elegend\u0151, ha a Firebase egyedi kulcs\u00e9rt\u00e9keit haszn\u00e1ljuk (haszn\u00e1lhat\u00f3 domainnevek szerint), \u00e9s minden peer helyben \"\u00e1l\" IP-c\u00edmeket rendel a megfelel\u0151 kulcshoz, amelyet le kell ford\u00edtani. Ez teljesen megsz\u00fcnteti a glob\u00e1lis IP-c\u00edmek kioszt\u00e1s\u00e1nak sz\u00fcks\u00e9gess\u00e9g\u00e9t, ami nem trivi\u00e1lis feladat.<\/p>\n<p>Itt van a minim\u00e1lis API, amelyet meg kell val\u00f3s\u00edtanunk:<\/p>\n<pre><code class=\"cpp\">\/\/ Create and destroy a socket\nint socket();\nint close(int fd);\n\/\/ Bind a socket to a port, and publish it on Firebase\nint bind(int fd, AddrInfo* addr);\n\/\/ Send a packet. This lazily create a WebRTC connection to the \n\/\/ peer when necessary\nint sendto(int fd, uint8_t* buf, int len, const AddrInfo* addr);\n\/\/ Receive the packets destined to this socket\nint recvfrom(int fd, uint8_t* buf, int len, AddrInfo* addr);\n\/\/ Be notified when new packets arrived\nint recvCallback(Callback cb);\n\/\/ Obtain a local ip address for this peer key\nuint32_t resolve(client::String* key);\n\/\/ Get the peer key for this ip\nString* reverseResolve(uint32_t addr);\n\/\/ Get the local peer key\nString* local_key();\n\/\/ Initialize the library with the given Firebase database and \n\/\/ WebRTc connection options\nvoid init(client::FirebaseConfig* fb, client::RTCConfiguration* ice);<\/code><\/pre>\n<p>\nAz API egyszer\u0171 \u00e9s hasonl\u00edt a Posix Sockets API-hoz, de van n\u00e9h\u00e1ny fontos elt\u00e9r\u00e9se: <strong>visszah\u00edv\u00e1sok regisztr\u00e1l\u00e1sa, helyi IP-k kioszt\u00e1sa \u00e9s \"lusta\" csatlakoztat\u00e1s<\/strong>.<\/p>\n<h2>Visszah\u00edv\u00e1sok regisztr\u00e1l\u00e1sa<\/h2>\n<p>\nM\u00e9g ha az alapprogram nem blokkol\u00f3 bemeneti-kimenetet haszn\u00e1l is, a webb\u00f6ng\u00e9sz\u0151ben val\u00f3 futtat\u00e1shoz a k\u00f3dot refaktor\u00e1lni kell.<\/p>\n<p>Ennek az az oka, hogy az esem\u00e9nyciklus a b\u00f6ng\u00e9sz\u0151ben rejtve van a program el\u0151l (legyen sz\u00f3 JavaScript-r\u0151l vagy WebAssembly-r\u0151l).<\/p>\n<p>Nat\u00edv k\u00f6rnyezetben ilyen m\u00f3don \u00edrhatunk k\u00f3dot<\/p>\n<pre><code class=\"cpp\">while(running) {\n  select(...); \/\/ v\u00e1rakoz\u00e1s I\/O esem\u00e9nyekre\n  while(true) {\n    int r = readfrom(...); \/\/ pr\u00f3b\u00e1lkoz\u00e1s az olvas\u00e1ssal\n    if (r &lt; 0 &amp;&amp; errno == EWOULDBLOCK) \/\/ nincs t\u00f6bb el\u00e9rhet\u0151 adat\n      break;\n    ...\n  }\n  ...\n}<\/code><\/pre>\n<p>\nHa az esem\u00e9nyciklus rejtve van el\u0151tt\u00fcnk, akkor azt ilyesmiv\u00e9 kell alak\u00edtanunk:<\/p>\n<pre><code class=\"cpp\">auto cb = []() { \/\/ ezt h\u00edvj\u00e1k meg, amikor \u00faj adatok \u00e9rhet\u0151k el\n  while(true) {\n    int r = readfrom(...); \/\/ pr\u00f3b\u00e1lkoz\u00e1s az olvas\u00e1ssal\n    if (r &lt; 0 &amp;&amp; errno == EWOULDBLOCK) \/\/ nincs t\u00f6bb el\u00e9rhet\u0151 adat\n      break;\n    ...\n  }\n  ...\n};\nrecvCallback(cb); \/\/ a visszah\u00edv\u00e1s regisztr\u00e1l\u00e1sa<\/code><\/pre>\n<p><\/p>\n<h2>Helyi IP-k feladata<\/h2>\n<p>\nA csom\u00f3pontok az \u00abh\u00e1l\u00f3zatunkban\u00bb nem IP-c\u00edmek, hanem Firebase kulcsok (ezek olyan karakterl\u00e1ncok, amelyek \u00edgy n\u00e9znek ki: <code>-LmEC50PYZLCiCP-vqde<\/code> ).<\/p>\n<p>Ez k\u00e9nyelmes, mert nincs sz\u00fcks\u00e9g\u00fcnk IP-k kioszt\u00e1s\u00e1nak mechanizmus\u00e1ra \u00e9s azok egyedis\u00e9g\u00e9nek ellen\u0151rz\u00e9s\u00e9re (valamint azok elt\u00e1vol\u00edt\u00e1s\u00e1ra az \u00fcgyf\u00e9l lekapcsol\u00e1sa ut\u00e1n), de gyakran sz\u00fcks\u00e9ges a peer-ek azonos\u00edt\u00e1sa numerikus \u00e9rt\u00e9k alapj\u00e1n.<\/p>\n<p>Ez\u00e9rt haszn\u00e1ljuk a k\u00f6vetkez\u0151 funkci\u00f3kat <code>resolve<\/code> \u00e9s <code>reverseResolve<\/code>: az alkalmaz\u00e1s valamilyen m\u00f3don megszerzi a kulcs string \u00e9rt\u00e9k\u00e9t (felhaszn\u00e1l\u00f3i bevitel vagy mesterszerver \u00fatj\u00e1n), \u00e9s \u00e1t tudja alak\u00edtani IP-c\u00edmm\u00e9 a bels\u0151 haszn\u00e1lat \u00e9rdek\u00e9ben. Az API t\u00f6bbi r\u00e9sze is egyszer\u0171s\u00e9g kedv\u00e9\u00e9rt ezt az \u00e9rt\u00e9ket kapja \u00fajra, nem string form\u00e1j\u00e1ban.<\/p>\n<p>Ez hasonl\u00edt a DNS keres\u00e9sre, csak a kliensn\u00e9l helyben t\u00f6rt\u00e9nik.<\/p>\n<p>Teh\u00e1t az IP-c\u00edmek nem lehetnek k\u00f6z\u00f6sek k\u00fcl\u00f6nb\u00f6z\u0151 kliensek k\u00f6z\u00f6tt, \u00e9s ha valamilyen glob\u00e1lis azonos\u00edt\u00f3ra van sz\u00fcks\u00e9g, azt m\u00e1s m\u00f3don kell gener\u00e1lni.<\/p>\n<h2>Lusta kapcsolat<\/h2>\n<p>\nAz UDP-nek nincs sz\u00fcks\u00e9ge kapcsolatra, de mint l\u00e1ttuk, miel\u0151tt adatokat elkezden\u00e9nk \u00e1tadni k\u00e9t peer k\u00f6z\u00f6tt, a WebRTC hossz\u00fa kapcsolati folyamatot ig\u00e9nyel.<\/p>\n<p>Ha ugyanazt az absztrakci\u00f3s szintet szeretn\u00e9nk biztos\u00edtani, (<code>sendto<\/code>\/<code>recvfrom<\/code> tetsz\u0151leges peerekkel el\u0151zetes kapcsol\u00f3d\u00e1s n\u00e9lk\u00fcl), akkor a bels\u0151 API-ban \u00ablusta\u00bb (k\u00e9sleltetett) kapcsolatot kell l\u00e9trehoznunk.<\/p>\n<p>Itt van, mi t\u00f6rt\u00e9nik az adatcser\u00e9n\u00e9l a \u00abszerver\u00bb \u00e9s a \u00abkliensek\u00bb k\u00f6z\u00f6tt UDP haszn\u00e1latakor, \u00e9s mit kell megval\u00f3s\u00edtania a k\u00f6nyvt\u00e1runknak:<\/p>\n<ul>\n<li>A szerver megh\u00edvja <code>bind()<\/code>, hogy \u00e9rtes\u00edtse az oper\u00e1ci\u00f3s rendszert, hogy csomagokat szeretne fogadni a megadott porton.<\/li>\n<\/ul>\n<p>\nEhelyett a Firebase-en k\u00f6zz\u00e9tesz\u00fcnk egy nyitott portot a szerver kulcsak\u00e9nt, \u00e9s figyelj\u00fck az esem\u00e9nyeket annak a lefel\u00e9 mutat\u00f3 \u00e1gain.<\/p>\n<ul>\n<li>A szerver megh\u00edvja <code>recvfrom()<\/code>, fogadva a portj\u00e1ra \u00e9rkez\u0151 csomagokat b\u00e1rmely hostb\u00f3l.<\/li>\n<\/ul>\n<p>\nA mi eset\u00fcnkben ellen\u0151rizn\u00fcnk kell a bej\u00f6v\u0151 csomagok sor\u00e1t, amelyeket erre a portra k\u00fcldtek.<\/p>\n<p>Minden port saj\u00e1t sorral rendelkezik, \u00e9s a WebRTC datagramjak\u00e9nt hozz\u00e1adjuk a forr\u00e1st \u00e9s a c\u00e9lportot, hogy tudjuk, hov\u00e1 ir\u00e1ny\u00edtsuk az \u00e9rkez\u0151 \u00faj csomagot.<\/p>\n<p>A h\u00edv\u00e1s nem blokkol\u00f3, \u00edgy ha nincsenek csomagok, egyszer\u0171en -1-et adunk vissza, \u00e9s be\u00e1ll\u00edtjuk <code>errno=EWOULDBLOCK<\/code>.<\/p>\n<ul>\n<li>Az \u00fcgyf\u00e9l valamilyen k\u00fcls\u0151 m\u00f3don megszerzi a szerver IP-c\u00edm\u00e9t \u00e9s portj\u00e1t, \u00e9s megh\u00edvja <code>sendto()<\/code>. Ezenk\u00edv\u00fcl bels\u0151 h\u00edv\u00e1s is zajlik, \u00edgy a k\u00f6vetkez\u0151 <code>bind()<\/code>v\u00e1laszt fog kapni a bind explicite v\u00e9grehajt\u00e1sa n\u00e9lk\u00fcl. <code>recvfrom()<\/code> v\u00e1lasz fog j\u00f6nni an\u00e9lk\u00fcl, hogy a bind kifejezett v\u00e9grehajt\u00e1sa t\u00f6rt\u00e9nne.<\/li>\n<\/ul>\n<p>\nEbben az esetben a kliens k\u00fcls\u0151leg egy karakterl\u00e1nc kulcsot kap, \u00e9s haszn\u00e1lja a funkci\u00f3t <code>resolve()<\/code> az IP-c\u00edm megszerz\u00e9s\u00e9hez.<\/p>\n<p>Ebben a szakaszban elkezdj\u00fck a WebRTC \u201ek\u00e9zfog\u00e1s\u00e1t\u201d, ha a k\u00e9t peer m\u00e9g nem csatlakozott egym\u00e1shoz. K\u00fcl\u00f6nb\u00f6z\u0151 portok csatlakoz\u00e1sa egy peeren ugyanazt a WebRTC DataChannel-t haszn\u00e1lja.<\/p>\n<p>Tov\u00e1bb\u00e1 k\u00f6zvetett <code>bind()<\/code>, hogy a szerver a k\u00f6vetkez\u0151 alkalommal helyre tudja \u00e1ll\u00edtani a kapcsolatot, <code>sendto()<\/code> ha valamilyen okb\u00f3l megszakad.<\/p>\n<p>A szerver \u00e9rtes\u00edt\u00e9st kap a kliens csatlakoz\u00e1s\u00e1r\u00f3l, amikor a kliens r\u00f6gz\u00edti SDP aj\u00e1nlat\u00e1t a szerver portinform\u00e1ci\u00f3j\u00e1val a Firebase-en, \u00e9s a szerver ott is v\u00e1laszol az aj\u00e1nlatra.<\/p>\n<p>\nAz al\u00e1bbi \u00e1br\u00e1n a socket s\u00e9ma \u00fczeneteinek \u00e1raml\u00e1s\u00e1t \u00e9s az els\u0151 \u00fczenet kliensr\u0151l a szerverre val\u00f3 tov\u00e1bb\u00edt\u00e1s\u00e1t l\u00e1thatjuk:<\/p>\n<p><img decoding=\"async\" alt=\"\u00c1tkonvert\u00e1ljuk a t\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9kot C++-r\u00f3l webre a Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel\" src=\"\/wp-content\/uploads\/2019\/09\/7dc48e816c09e33daf28c307cad0c258.jpg\" style=\"display:block;margin: 0 auto;\" \/><br \/>\n<i>A kliens \u00e9s a szerver k\u00f6z\u00f6tti csatlakoz\u00e1si szakasz teljes s\u00e9m\u00e1ja<\/i><\/p>\n<h1>Z\u00e1r\u00e1s<\/h1>\n<p>\nHa v\u00e9gigolvastad, val\u00f3sz\u00edn\u0171leg \u00e9rdekelne, hogy a gyakorlatban is l\u00e1sd a te\u00f3ri\u00e1t. J\u00e1tszhatsz a <noindex><a rel=\"nofollow\" href=\"https:\/\/teeworlds.leaningtech.com\">teeworlds.leaningtech.com<\/a><\/noindex>, pr\u00f3b\u00e1ld ki!<\/p>\n<p><center><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/gfycat.com\/ifr\/newjaggedcoyote\" frameborder=\"0\" allowfullscreen><\/iframe><\/center><br \/>\n<i>Bar\u00e1ts\u00e1gos m\u00e9rk\u0151z\u00e9s a koll\u00e9g\u00e1k k\u00f6z\u00f6tt<\/i><\/p>\n<p>A h\u00e1l\u00f3zati k\u00f6nyvt\u00e1r k\u00f3dja szabadon hozz\u00e1f\u00e9rhet\u0151 a <noindex><a rel=\"nofollow\" href=\"https:\/\/github.com\/leaningtech\/cheerpnet\">Githubot<\/a><\/noindex>. Csatlakozz a k\u00f6z\u00f6ss\u00e9ghez a csatorn\u00e1nkon a <noindex><a rel=\"nofollow\" href=\"https:\/\/gitter.im\/leaningtech\/cheerp\">Gitter<\/a><\/noindex>!<br \/>\n<br \/>Forr\u00e1s: <a content=\"nofollow\" rel=\"nofollow\" href=\"https:\/\/habr.com\/ru\/post\/468031\/\">habr.com<\/a><\/p>","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"excerpt":{"rendered":"<p>\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Leaning Technologies \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0432\u0435\u0431. \u041d\u0430\u0448 \u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0442\u043e\u0440 C++ Cheerp \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u0435 WebAssembly \u0438 JavaScript, \u0447\u0442\u043e \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0432\u0430\u0435\u0442 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c, \u0438 \u0432\u044b\u0441\u043e\u043a\u0443\u044e \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u0430 \u0435\u0433\u043e \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u043c\u044b \u0440\u0435\u0448\u0438\u043b\u0438 \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0432\u0435\u0431\u0430 \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0438\u0433\u0440\u0443 \u0438 \u0432\u044b\u0431\u0440\u0430\u043b\u0438 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e Teeworlds. Teeworlds \u2014 \u044d\u0442\u043e \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0430\u044f \u0434\u0432\u0443\u0445\u043c\u0435\u0440\u043d\u0430\u044f \u0440\u0435\u0442\u0440\u043e-\u0438\u0433\u0440\u0430 [&hellip;]<\/p>\n","protected":false,"gt_translate_keys":[{"key":"rendered","format":"html"}]},"author":1,"featured_media":28801,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[688],"tags":[],"class_list":["post-38370","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-administrirovanie"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Leaning Technologies \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0432\u0435\u0431.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Yuri Gagarin\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"hu_HU\" \/>\n\t\t<meta property=\"og:site_name\" content=\"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"\ud83e\udd47\u041f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0438\u0433\u0440\u0443 \u0441 \u0421++ \u043d\u0430 \u0432\u0435\u0431 c Cheerp, WebRTC \u0438 Firebase | ProHoster\" \/>\n\t\t<meta property=\"og:description\" content=\"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Leaning Technologies \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0432\u0435\u0431.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg\" \/>\n\t\t<meta property=\"og:image:width\" content=\"350\" \/>\n\t\t<meta property=\"og:image:height\" content=\"350\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-31T19:23:18+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-31T19:23:18+00:00\" \/>\n\t\t<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/prohoster\" \/>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"\ud83e\udd47T\u00f6bbj\u00e1t\u00e9kos j\u00e1t\u00e9k port\u00e1l\u00e1sa C++-b\u0151l webre Cheerp, WebRTC \u00e9s Firebase seg\u00edts\u00e9g\u00e9vel | ProHoster","description":"Bevezet\u00e9s C\u00e9g\u00fcnk, a Leaning Technologies megold\u00e1sokat k\u00edn\u00e1l tradicion\u00e1lis asztali alkalmaz\u00e1sok webre port\u00e1l\u00e1s\u00e1ra.","canonical_url":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":null,"og:locale":"hu_HU","og:site_name":"ProHoster | \u041a\u0443\u043f\u0438\u0442\u044c \u043d\u0430\u0434\u0435\u0436\u043d\u044b\u0439 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 \u0434\u043b\u044f \u0441\u0430\u0439\u0442\u043e\u0432 \u0441 \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043e\u0442 DDoS, VPS VDS \u0441\u0435\u0440\u0432\u0435\u0440\u044b","og:type":"article","og:title":"\ud83e\udd47\u041f\u043e\u0440\u0442\u0438\u0440\u0443\u0435\u043c \u043c\u043d\u043e\u0433\u043e\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0443\u044e \u0438\u0433\u0440\u0443 \u0441 \u0421++ \u043d\u0430 \u0432\u0435\u0431 c Cheerp, WebRTC \u0438 Firebase | ProHoster","og:description":"\u0412\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u041d\u0430\u0448\u0430 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f Leaning Technologies \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u043f\u043e \u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044e \u0442\u0440\u0430\u0434\u0438\u0446\u0438\u043e\u043d\u043d\u044b\u0445 desktop-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0439 \u0432 \u0432\u0435\u0431.","og:url":"https:\/\/prohoster.info\/hu\/blog\/administrirovanie\/portiruem-mnogopolzovatelskuyu-igru-s-s-na-veb-c-cheerp-webrtc-i-firebase","og:image":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:secure_url":"https:\/\/prohoster.info\/wp-content\/uploads\/2021\/11\/logo-350.jpg","og:image:width":350,"og:image:height":350,"article:published_time":"2019-10-31T19:23:18+00:00","article:modified_time":"2019-10-31T19:23:18+00:00","article:publisher":"https:\/\/www.facebook.com\/prohoster","article:author":"https:\/\/www.facebook.com\/prohoster"},"aioseo_meta_data":{"post_id":"38370","title":null,"description":null,"keywords":null,"keyphrases":null,"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"local_seo":null,"seo_analyzer_scan_date":"2026-01-23 21:44:19","breadcrumb_settings":null,"limit_modified_date":false,"reviewed_by":null,"ai":null,"created":"2021-03-01 01:10:24","updated":"2026-01-23 21:44:19","focus_keyword":null,"additional_keywords":null,"truseo_locale":null},"gt_translate_keys":[{"key":"link","format":"url"}],"_links":{"self":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/38370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/comments?post=38370"}],"version-history":[{"count":0,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/posts\/38370\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media\/28801"}],"wp:attachment":[{"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/media?parent=38370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/categories?post=38370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/prohoster.info\/hu\/wp-json\/wp\/v2\/tags?post=38370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}