Koduma aşyk boldum, soň öldürmeli boldum

Düýn ýazan ýüzlerçe setirimi pozdum we ýerine 32 setir täze kod çalyşdym. Bu, sesiň çalynýandygyny ýa-da ýokdugyny görkezmek üçin ulanylýan TheOpenPresenter üçin aýratynlykdy.

Everyygy-ýygydan, durmuşa geçirmek gaty gönümel görünýän bir funksiýanyň üstünde işleýärdim. Bu ýagdaýda diňe ses çalynanda bu nyşany görkezmeli boldum.

Enougheterlik ýönekeý. Bularyň hersi birnäçe plagini öz içine alýan sahna. Her bir pluginiň isPlaying ýaly öz aýratynlygy bar. Plaginleriň arasynda bahalary birleşdirip bileris, baýdak dogry bolsa, nyşany görkezip bileris.

Çözüw gurmak

Esasy mesele, bu maglumatlary nädip almaly. Serediň, maglumatlara göni girip bilerdik. Emma her bir pluginiň öz shemasy bolup biler. Käbir pluginlerde ýönekeý isPlaying häsiýeti bolup bilse-de, käbirlerine oýun ýagdaýyny görkezmek üçin has çylşyrymly bir zat gerek bolup biler.

Pleönekeý, näme üçin pluginiň ýagdaýy yzyna gaýtarýan / funksiýany hasaba almagyna rugsat bermeli däl?

Bu, TheOpenPresenter-iň köp pluginleri üçin ulanýan nagşy. Şonda-da, ony SceneState obýektine abstrakt edip bileris. Şonuň üçin bize başga bir döwlet gerek bolsa, ony şu ýere goşup bileris. Plagin üçin nähili bolup biljekdigi:

 // The pattern we use for plugins serverPluginApi.onPluginDataCreated(pluginName, onPluginDataCreated); serverPluginApi.onPluginDataLoaded(pluginName, onPluginDataLoaded); serverPluginApi.registerRemoteViewWebComponent( pluginName, remoteWebComponentTag, ); // Example of how the new API might look like serverPluginApi.registerSceneState( pluginName, (_, rendererData) => { return { audioIsPlaying: !!rendererData.find((x) => x.isPlaying), } }, );

Serwer bilen işlemek

Aboveokardaky kody serwerde işleýändigine üns beriň. Sebäbi TheOpenPresenter 3 aýry komponentden durýar:

1. Uzakdan - bu ses görkezijisi görkezilen ýerde

2. Renderer - ses çalýar

3. Serwer - ikisini birleşdirýär

   
   

Iň gowusy, serwere goşmaça ýük goşmazlyk üçin muny öň tarapda (uzakda) çözmeli. Şeýle-de bolsa, bu funksiýany hasaba almak bulaşyk bolup biler. Biziň öňümizde web komponentleri ýüklenen mikro-frontend arhitekturasy ulanylýar.

Aşakdaky gyzyl meýdan React gabygydyr. Greenaşyl meýdan web bölekleri arkaly ýüklenýär we her bir plugin tarapyndan dolandyrylýar.

Ses nyşanynyň gabygyň çep tarapynda ýerleşýändigine üns beriň. Gabykda zerur funksiýany nädip üpjün etmeli? JS komponentini web komponent bukjasyna goşup bileris, ýöne bu uzak möhletde bulaşyk ýaly bolup görünýär.

Muny serwerde dolandyrmak muny etmegiň dogry usuly ýaly bolup görünýär.

Maglumatlaryň üsti bilen

Bu karar bilen durmuşa geçirmegiň wagty geldi. Edilmeli birnäçe zat bar:

1. Plagin API dörediň
2. Bu maglumatlary öň tarapa beriň
3. UI-ni sarp ediň we täzeläň

Erine ýetirmek

Jikme-jiklikler bilen size jogap bermerin, şonuň üçin umumy syn. API gaty gönümel däldi, sebäbi maglumatlarymyz gaty bulaşyk bolup biler. Gysgaça: Bir sahnada birnäçe plugin bolup biler. Birnäçe görkeziji bolup biler, hersi bir sahnany başgaça görýär. Şeýlelik bilen, bir plugin ony dürli görnüşde görkezýän birnäçe görkeziji bolup biler. Dataöne birneme maglumat manipulýasiýasy bilen mesele çözüldi.

UI sarp etmek we täzelemek

Bahany sarp etmek gönümeldi. Yjs-yň habar beriş protokolyny maglumatlary bermek üçin ulanmagy göz öňünde tutdum, sebäbi real wagt we çarçuwasy eýýäm bar. Döwlet şeýle saklanýar. Şeýle-de bolsa, serwerden bu maglumatlary goşmak öz meselesi. Şonuň üçin ýerine GraphQL ulanmagy makul bildim - platformadaky beýleki zatlar üçin ulanýan teswirnamamyz.

Şonuň üçin etmeli zadymyz ahyrky nokada jaň etmek, GraphQL abunalygy bilen diňlemek we nyşany zerur bolanda görkezmek. Boldy.

Bu maglumatlary öň tarapda bermek

Bagtymyza, GraphQL shemasyny giňeltmegi aňsatlaşdyrýan Postgraphile ulanýarys. Şeýle hem, GraphQL shemasyna @pgSubscription goşmak arkaly abuna edip bileris. Soňra bir mowzuga tomaşa eder we şol mowzukda pg_notify jaň edenimizde bahany täzelär. Mysal üçin:

 await pgPool.query( `select pg_notify('graphql:sceneState:${id}','{}');`, [], );

Maglumatlary dolandyrmak bizar etdi, ýöne biraz sabyr etdi we gutardy!

Enigma iň soňky bölegi, gerek wagty pg_notify diýip atlandyrýar.

Munuň üçin döwlete (Yjs) diňleýji goşup bileris we haýsydyr bir zat üýtgese habarnamany çagyryp bileris:

 state.observeDeep(async () => { // Call pg_notify here });

Doeke-täk zat, öndürijiligi gowulandyrmak. Häzirki wagtda bu funksiýa her bir ownuk üýtgeşiklige çagyrylýar, öň hatarda täzelenýär. Netijäni hasaplap bileris we täzelenmä basmazdan ozal bir zat üýtgese, deňeşdirip bileris.

Has gowy çözgüt

Indi bu çözgüt elbetde işleýär. Everyöne her üýtgeşmäni diňleýändigimizi ýigrenýärdim. Gerek däl we ýerine ýetirişiň nähili ulaljagyna ynanamok. Has gowy çözgüt barmy?

Şeýdip, bir sekunt yza çekildim we bir pikir geldi: Esasy zatlara gidip, Yjs-dan maglumatlary nädip ulanmaly?

Mesele, her bir plugin oýnamagyň ýagdaýyny görkezmek üçin dürli usullary ulanyp bilerdi. Şeýlelik bilen, emele gelen ýagdaýy özümiz nädip hasaplamalydygyny bilmegiň usuly gerekdi. Useröne ulanyja bir funksiýa geçmäge rugsat bermegiň ýerine, muny görkezmek üçin ulanyp boljak emlägini näme üçin saklamaly däl?

Döwleti hasaplamak funksiýasyny ýerine ýetirmegiň ýerine, her bir plugin ätiýaçlandyrylan ýagdaýy __audioIsPlaying ýaly häsiýetleri bilen bar bolan maglumatlary bilen gönüden-göni düzüp biler. Bu bahany gönüden-göni ulanyp bilerler ýa-da bar bolan häsiýetleri bilen sinhron saklap bilerler:

 const onRendererDataLoaded = ( rendererData, ) => { watchYjs( // Watch the isPlaying property (x) => x.isPlaying, () => { // And if it changes, sync the __audioIsPlaying property rendererData.set("__audioIsPlaying", rendererData.get("isPlaying")); }, ); };

Köne kody pozmak

Täze usul ajaýyp. Goşmaça diňleýji ýok, goşmaça API ýok, diňe ýönekeý ätiýaçlyk emläk.

Bahasy? Dogrusy, ilkinji durmuşa geçirmegiň 95% -ini eýýäm ýazdym 🫣

“Şunça wagtlap işlänimde muny pozmak gaty utanç bolar. Bu bir zatdan başga hemme zat ajaýyp! ” - Meniň pikirim

Bu meniň ilkinji gezek däl. Ikinji ýa-da üçünji däl. Bu gezek bary-ýogy birnäçe sagat iş boldy. Durmuşa geçirmek üçin näçe wagt gerek bolsa, goýbermek şonça-da kyn. Seröne serwerlere birikdirilmesek, ýazýan kodumyz bilen hem baglanyşmaly däldiris.

Ikinji durmuşa geçirmegiň has gowudygy äşgärdir. Has çalt, az hereket edýän bölekler, az API üstü we saklamak üçin az kod. Birinji ýerine ýetiriş 289 täze setir goşdy, ikinji ýerine ýetiriş diňe 32 täze setir goşdy.

Onda näme öwrenmeli?

Bolýar, belki ilki bilen iň ýönekeý çözgüdi tapyň. Sometimesöne käwagt diňe bu hakda pikirlenip iň oňat çözgüt tapyp bilmeris. Eger şeýle bolsa, koduňyzy söýmäň we ony zyňmakdan gorkmaň . Belki, ondan bir zat çykarmak üçin blog ýazyň!

Şu wagta çenli okaýan bolsaňyz, TheOpenPresenter-i synap görüp bilersiňiz! Ekranyňyzyň islendik birini uzakdan dolandyrmaga mümkinçilik berýän açyk çeşme görkeziş ulgamy.

Slaýdşowlary görkeziň, wideo oýnaň, dolandyryş paneli hökmünde ulanyň we başgalar. Bu ýazgydan aýdyşyňyz ýaly programma üpjünçiligi entek gaty ir, ýöne yzygiderli ulanmak üçin durnukly. Men muny her hepde duşuşmak üçin ulanýaryn.

Islendik sorag beriň. Ora-da Github reposynda meseleler barada habar bermäge arkaýyn boluň.