HN पर साझा: एक हैरान कर देने वाला प्रयोग देखा, इसलिए उसका एक सरल संस्करण बनाया

 (github.com/Momciloo)
2 पॉइंट द्वारा GN⁺ 2023-11-26 | 1 टिप्पणियां | WhatsApp पर शेयर करें
  • यह repository Björn Staal के काम से प्रेरित एक सरल code experiment है, और इसमें मूल आइडिया के बारे में अतिरिक्त जानकारी का लिंक भी दिया गया है
  • इसे local में चलाने के लिए npm i के बाद 2 terminal खोलने होते हैं, जिनमें एक में server और दूसरे में client static server चलाया जाता है
  • server को node server/server.js से चलाया जाता है, और client को cd client && http-server से चलाया जाता है
  • प्रयोग देखने के लिए browser की 2 tabs में क्रमशः localhost:8080?b=1 और localhost:8080?b=2 खोले जाते हैं
  • आगे की योजनाओं में localStorage-only mode, अनंत संख्या में windows का support और URL query हटाना, तथा WebRTC पर जाना शामिल है

प्रोजेक्ट अवलोकन

  • Momciloo/fun-with-sockets Björn Staal के काम से प्रेरित एक सरल code exploration प्रोजेक्ट है
  • मूल आइडिया के बारे में अतिरिक्त जानकारी LinkedIn पोस्ट में दी गई है
  • README में प्रयोग की screen recording image शामिल है

लोकल में चलाने का तरीका

  • पहले dependencies install करें
    • npm i
  • एक और terminal खोलें ताकि कुल 2 terminal इस्तेमाल हों
  • पहले terminal में server चलाएँ
    • node server/server.js
  • दूसरे terminal में client directory में जाएँ, फिर static server चलाएँ
    • cd client && http-server
  • browser में 2 tabs खोलें और हर एक में अलग query value इस्तेमाल करें
    • localhost:8080?b=1
    • localhost:8080?b=2

आगे के आइडिया

  • सिर्फ localStorage mode चलाने के लिए एक flag जोड़ने की योजना है
  • अनंत संख्या में windows को support करने और URL में query की ज़रूरत हटाने वाले विकल्प की योजना है
  • implementation को WebRTC की ओर ले जाने की योजना है

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2023-11-26
Hacker News टिप्पणियाँ

  • बढ़िया डेमो है। मल्टी-मॉनिटर पर यह कैसे काम करेगा, यह जानने की जिज्ञासा है
    यह भी अच्छा लगा कि उन्होंने खुलकर बताया कि उन्हें सीधे किसी और से प्रेरणा मिली, और स्रोत को श्रेय दिया। काश software industry में ऐसे लोग और हों

  • Krita, Inkscape, Gimp जैसे paint programs में layer management के लिए ऐसा या इससे मिलता-जुलता तरीका उपयोगी हो सकता है
    इसे पूरे application window के भीतर tab panels के रूप में आसानी से लागू किया जा सकता है, और चुने गए tab की layer को edit work की active layer बनाया जा सकता है

  • याद है पहले भी window की position और size का उपयोग करने वाले कई डेमो थे। एक physics simulation डेमो भी था; याद नहीं liquid था या कई solid objects, लेकिन एक window से दूसरी window में objects गिराए जा सकते थे
    शायद sockets की भी जरूरत न पड़े, windows के बीच message channels से ही यह संभव हो सकता है। जब एक window child window खोलती है, तो आम तौर पर अलग-थलग रहने वाले tabs/windows के विपरीत उसके पास खास access permissions होती हैं, इसलिए local-only version भी आसानी से बनाया जा सकता है

  • अगर आपको ऐसी चीज़ें पसंद हैं, तो WindowKill भी मज़ेदार लग सकता है। यह Asteroids जैसा video game है, जो चतुराई से एक-दूसरे पर चढ़ने और interact करने वाली कई windows का उपयोग करता है
    आपको window borders पर भी शूट करना होता है, नहीं तो window सिकुड़ जाती है। गेम के बाद के हिस्से में boss enemy वाली अतिरिक्त windows भी दिखाई देती हैं
    gameplay video: https://youtu.be/7iP68FZWVxM

  • मूल Bjorn Staal वाले ट्वीट का लिंक गायब है; सोच रहा हूँ क्या कहीं ऐसा लिंक है जहाँ देखा जा सके कि वह क्या था

  • इससे browser windows में Pong खेलने वाला एक शानदार डेमो याद आता है: http://stewd.io/pong/

  • जानना चाहता हूँ कि इसका मतलब क्या है। GitHub page का GIF भी ठीक से समझ नहीं आया; बस ऐसा लग रहा है जैसे windows data share कर रही हों

    • मुख्य बात यह नहीं है कि windows आपस में communicate करती हैं, बल्कि यह है कि browser API के जरिए window coordinates को उजागर करके उनका उपयोग किया जा रहा है
    • यह कई clients और एक single server वाली संरचना जैसा लगता है। हर window एक अलग client है, और screen geometry की जानकारी server को भेजती है, फिर server हर client के लिए अलग layout भेजता है ताकि content कई windows में फैली एक ही object जैसा दिखे

  • बढ़िया। focused window का rectangle सबसे ऊपर draw होना ज़्यादा natural लगेगा

    • शायद ऐसा इसलिए किया गया होगा ताकि दिखाया जा सके कि इसमें सिर्फ transparency का इस्तेमाल नहीं हुआ है

  • लेकिन समझ नहीं आता कि lag क्यों है। यह तो इतना simple लग रहा है कि तुरंत process हो जाना चाहिए, है न?

    • क्योंकि यह browser के अंदर चल रहा है। साधारण mouse movement और साधारण object coordinate change के बीच भी, event को interpreted या compiled code तक पहुँचाने और state change को screen तक भेजने वाली system-application layers की लंबी शृंखला बीच में आती है
      Native में भी दो अलग windows को बिल्कुल तुरंत एक जैसा move कराना हमेशा trivial नहीं होता। उदाहरण के लिए, कुछ GUI toolkits smooth window resizing को असंभव बना देती हैं, ऐसा भी लिखा गया है। भले ही सब कुछ खुद बनाया जाए, फिर भी उम्मीद करनी पड़ती है कि system windows को जल्दी notify करे और bitmap को screen पर push करने लायक performance दे। बेहतर तरीका यह होगा कि पूरे system का software/hardware compositor इस्तेमाल किया जाए, object-wise layers जोड़ी जाएँ, और सिर्फ coordinates बदले जाएँ; लेकिन तब भी compositor इतना अच्छा होना चाहिए कि ज़रूरत पड़ने पर 60/120/144 updates प्रति सेकंड से ज़्यादा संभाल सके
    • window position query करना दुर्भाग्य से धीमा है। यह browser feature की प्रकृति है
    • सोच रहा हूँ कि network से गुज़रे बिना postMessage API इस्तेमाल करने पर यह ज़्यादा immediate होगा या नहीं
    • background windows या tabs की priority कम हो जाना भी एक कारण हो सकता है
    • शायद WebSocket network latency की वजह से, और मैंने भी व्यक्तिगत रूप से window position updates को कभी-कभी अजीब तरह से अटकते देखा है

  • LocalStorage का मज़ेदार उपयोग है
    मैंने भी कभी वही LocalStorage sharing technique इस्तेमाल की थी, ताकि अलग browser window में settings बदलने पर target window को update किया जा सके। Update के लिए बस storage.onChanged event सुनना होता है

    • यह local storage का उपयोग करता हुआ नहीं लगता। संरचना ऐसी दिखती है कि WebSocket-based server clients को हर बार दूसरे boxes की positions बदलने पर जानकारी भेजता है