HN'de Yayınlandı: Şaşırtıcı bir deneye tanık oldum ve basit bir sürümünü yaptım

 (github.com/Momciloo)
2 puan yazan GN⁺ 2023-11-26 | 1 yorum | WhatsApp'ta paylaş
  • Bu depo, Björn Staal'ın çalışmasından ilham alınarak oluşturulmuş basit bir kod deneyidir ve özgün fikir hakkında ek bilgi bağlantısı da sunar
  • Yerelde çalıştırma, npm i sonrasında 2 terminal açıp birinde sunucuyu, diğerinde istemci statik sunucusunu çalıştırma şeklindedir
  • Sunucu node server/server.js ile, istemci ise cd client && http-server ile çalıştırılır
  • Deneyi görmek için tarayıcıda 2 sekmede sırasıyla localhost:8080?b=1 ve localhost:8080?b=2 açılır
  • Gelecek planları arasında yalnızca localStorage modu, sınırsız sayıda pencere desteği ve URL sorgusunun kaldırılması, WebRTC'ye geçiş yer alır

Proje Özeti

  • Momciloo/fun-with-sockets, Björn Staal'ın çalışmasından ilham alan basit bir kod keşfi projesidir
  • Özgün fikir hakkında ek bilgi için LinkedIn gönderisi bağlantısı verilir
  • README'de deneyin ekran kaydı görseli yer alır

Yerelde Çalıştırma Yöntemi

  • Önce bağımlılıkları kurun
    • npm i
  • Bir terminal daha açarak toplam 2 terminal kullanın
  • İlk terminalde sunucuyu çalıştırın
    • node server/server.js
  • İkinci terminalde istemci dizinine geçip statik sunucuyu çalıştırın
    • cd client && http-server
  • Tarayıcıda iki sekme açıp her birinde farklı sorgu değerleri kullanın
    • localhost:8080?b=1
    • localhost:8080?b=2

Gelecek Fikirler

  • Yalnızca localStorage modunu çalıştırabilen bir bayrak eklenmesi planlanıyor
  • Sınırsız sayıda pencereyi destekleyen ve URL'de sorgu gereksinimini kaldıran bir seçenek planlanıyor
  • Uygulama yönünü WebRTC'ye taşıma planı var

İlgili okumalar

1 yorum

 
GN⁺ 2023-11-26
Hacker News yorumları

  • Harika bir demo. Çoklu monitörde nasıl çalışacağını merak ediyorum.
    Ayrıca başka birinden doğrudan ilham aldığını gönüllü olarak belirtip kaynak göstermesi hoşuma gitti. Yazılım sektöründe böyle insanların daha çok olmasını isterdim.

  • Krita, Inkscape, Gimp gibi çizim programlarında katman yönetimi için bunun ya da benzer bir yöntemin faydalı olabileceğini düşünüyorum.
    Tüm uygulama penceresinin içinde sekmeli bir panel olarak basitçe uygulanabilir; seçili sekmenin katmanı da düzenleme işlemlerinin aktif katmanı yapılabilir.

  • Eskiden de pencerelerin konumunu ve boyutunu kullanan epey demo olduğunu hatırlıyorum. Bir fizik simülasyonu demosu da vardı; sıvı mıydı yoksa birkaç katı cisim mi hatırlamıyorum ama nesneleri bir pencereden diğerine düşürebiliyordunuz.
    Soketlere bile gerek olmayabilir; pencereler arasındaki bir mesaj kanalıyla da yapılabilir gibi. Bir pencere alt pencere açtığında, genelde birbirinden yalıtılmış sekme/pencerelerin aksine özel erişim izinleri oluyor; bu yüzden yalnızca yerel bir sürüm de kolayca yapılabilir gibi görünüyor.

  • Böyle şeyleri seviyorsanız WindowKill de eğlenceli gelebilir. Asteroids'e benzeyen bir video oyunu; üst üste binen ve etkileşen birden fazla pencereyi akıllıca kullanıyor.
    Pencere sınırlarına da ateş etmeniz gerekiyor; aksi halde pencere küçülüyor. Oyunun ilerleyen bölümlerinde, içinde boss düşmanı olan ek bir pencere de beliriyor.
    Oynanış videosu: https://youtu.be/7iP68FZWVxM

  • Orijinal Bjorn Staal tweet'inin bağlantısı kaybolmuş; bunun ne olduğunu görebileceğimiz bir link var mı merak ediyorum.

  • Tarayıcı pencereleriyle Pong oynanan harika bir demo aklıma geldi: http://stewd.io/pong/

  • Bunun ne anlama geldiğini açıklayabilecek var mı merak ediyorum. GitHub sayfasındaki GIF'i de doğru anlayıp anlamadığımdan emin değilim; bana sadece pencereler veri paylaşıyormuş gibi görünüyor.

    • Asıl mesele pencerelerin birbiriyle iletişim kurmasından çok, tarayıcı API'siyle pencere koordinatlarının açığa çıkarılıp kullanılması.
    • Birden çok istemci ve tek sunuculu bir yapı gibi görünüyor. Her pencere ayrı bir istemci; ekran geometrisi bilgisini sunucuya gönderiyor, sunucu da her istemciye farklı bir yerleşim döndürüyor. Böylece içerik, birden fazla pencereye yayılmış tek bir nesne gibi görünüyor.

  • Güzel. Odaklanmış pencerenin dikdörtgeninin en üstte çizilmesi daha doğal görünür gibi.

    • Bunu, sadece saydamlık kullanılmadığını göstermek için yapmış olabilirler diye düşünüyorum.

  • Ama neden gecikme oluştuğunu anlamıyorum. Bu kadar basit bir şey anında işlenecek kadar hafif olmamalı mı?

    • Çünkü tarayıcı içinde çalışıyor. Basit bir fare hareketiyle basit bir nesne koordinatı değişikliği arasında bile, olayı yorumlanan ya da derlenmiş koda ileten ve durum değişikliğini ekrana taşıyan pek çok sistem ve uygulama katmanı var.
      Native'e geçseniz bile iki farklı pencereyi anında ve birebir aynı şekilde hareket ettirmek her zaman önemsiz bir iş değildir. Örneğin bazı GUI toolkit'lerinin akıcı pencere yeniden boyutlandırmayı imkânsız hale getirdiğini anlatan bir yazı vardı. Her şeyi kendiniz yapsanız bile, sistemin pencereye hızlıca haber verecek ve bitmap'i ekrana itecek kadar performanslı olmasını ummanız gerekir. Daha iyi yöntem, sistem genelindeki yazılım/donanım compositor'ını kullanmak, nesne başına katmanlar eklemek ve yalnızca koordinatları değiştirmektir; ama bu durumda da compositor'ın gerektiğinde saniyede 60/120/144 veya daha fazla yenilemeyi kaldıracak kadar iyi olması gerekir.
    • Pencere konumunu sorgulamak ne yazık ki yavaş. Tarayıcı özelliğinin doğası böyle.
    • Ağ üzerinden geçmek yerine postMessage API kullanılsa daha anlık olur mu merak ediyorum.
    • Arka plandaki pencere veya sekmelerin önceliğinin düşürülmesi de bir etken olabilir.
    • Muhtemelen WebSocket ağ gecikmesindendir; kişisel olarak ben de pencere konumu güncellemelerinin ara sıra tuhaf şekilde takıldığı durumlar yaşamıştım.

  • LocalStorage'ın eğlenceli bir kullanımı.
    Ayrı bir tarayıcı penceresinde ayar değiştiğinde hedef pencereyi güncellemek için aynı LocalStorage paylaşım tekniğini kullanmıştım. Güncelleme için yalnızca storage.onChanged olayını dinlemek yeterli.

    • Bu, yerel depolamayı kullanıyor gibi görünmüyor. WebSocket tabanlı bir sunucunun, diğer kutuların konumları her değiştiğinde bunları istemcilere gönderdiği bir yapı.