HN Rilis: Saya menyaksikan eksperimen yang menakjubkan dan membuat versi sederhana

 (github.com/Momciloo)
2 poin oleh GN⁺ 2023-11-26 | 1 komentar | Bagikan ke WhatsApp
  • Repositori ini adalah eksperimen kode sederhana yang terinspirasi dari karya Björn Staal, dan menyertakan tautan ke informasi tambahan tentang ide aslinya
  • Untuk menjalankannya secara lokal, jalankan npm i, lalu buka 2 terminal: satu untuk menjalankan server dan satu lagi untuk menjalankan server statis klien
  • Server dijalankan dengan node server/server.js, dan klien dijalankan dengan cd client && http-server
  • Untuk melihat eksperimen, buka 2 tab browser dan akses masing-masing localhost:8080?b=1 dan localhost:8080?b=2
  • Rencana ke depan mencakup mode khusus localStorage, dukungan untuk jumlah jendela tak terbatas sekaligus penghapusan query URL, serta transisi ke WebRTC

Gambaran Umum Proyek

  • Momciloo/fun-with-sockets adalah proyek eksplorasi kode sederhana yang terinspirasi dari karya Björn Staal
  • Informasi tambahan tentang ide aslinya ditautkan melalui postingan LinkedIn
  • README menyertakan gambar rekaman layar eksperimen

Cara Menjalankan Secara Lokal

  • Pertama, instal dependensi
    • npm i
  • Buka satu terminal lagi sehingga total menggunakan 2 terminal
  • Di terminal pertama, jalankan server
    • node server/server.js
  • Di terminal kedua, masuk ke direktori klien, lalu jalankan server statis
    • cd client && http-server
  • Di browser, buka dua tab dan gunakan nilai query yang berbeda untuk masing-masing
    • localhost:8080?b=1
    • localhost:8080?b=2

Ide ke Depan

  • Berencana menambahkan flag agar dapat menjalankan mode localStorage saja
  • Berencana menyediakan opsi untuk mendukung jumlah jendela tak terbatas dan menghilangkan kebutuhan query pada URL
  • Ada rencana untuk memindahkan arah implementasi ke WebRTC

Bacaan terkait

1 komentar

 
GN⁺ 2023-11-26
Komentar Hacker News

  • Demo yang keren. Penasaran bagaimana cara kerjanya di multi-monitor
    Saya suka karena ia dengan sukarela mengakui bahwa ini terinspirasi langsung dari orang lain dan memberi kredit pada sumbernya. Semoga ada lebih banyak orang seperti ini di industri software

  • Di program menggambar seperti Krita, Inkscape, dan Gimp, pendekatan seperti ini atau yang mirip tampaknya berguna untuk pengelolaan layer
    Ini bisa diimplementasikan dengan sederhana sebagai panel tab di dalam seluruh jendela aplikasi, dan layer dari tab yang dipilih bisa dijadikan layer aktif untuk pekerjaan pengeditan

  • Saya ingat dulu juga ada cukup banyak demo yang memanfaatkan posisi dan ukuran jendela. Ada juga demo simulasi fisika; saya tidak ingat apakah itu cairan atau beberapa benda padat, tetapi objek bisa dijatuhkan dari satu jendela ke jendela lain
    Sepertinya bahkan tidak perlu socket, cukup kanal pesan antarjendela. Jika sebuah jendela membuka jendela anak, biasanya ada hak akses khusus yang mereka miliki, tidak seperti tab/jendela yang terisolasi satu sama lain, jadi versi lokal saja pun tampaknya bisa dibuat dengan mudah

  • Kalau suka hal seperti ini, WindowKill juga mungkin seru. Ini video game mirip Asteroids yang dengan cerdik memakai beberapa jendela yang saling tumpang tindih dan berinteraksi
    Batas jendelanya juga harus ditembak, kalau tidak jendelanya akan menyusut. Di bagian akhir permainan, jendela tambahan yang berisi musuh bos juga muncul
    Video gameplay: https://youtu.be/7iP68FZWVxM

  • Tautan tweet asli Bjorn Staal sudah hilang, jadi penasaran apakah ada tautan untuk melihat sebenarnya ini apa

  • Ini mengingatkan saya pada demo keren bermain Pong dengan jendela browser: http://stewd.io/pong/

  • Penasaran apakah ada yang bisa menjelaskan arti semua ini. Saya juga tidak yakin apakah saya memahami GIF di halaman GitHub dengan benar; kelihatannya cuma seperti jendela-jendela yang berbagi data

    • Intinya bukan sekadar jendela bisa saling berkomunikasi, tetapi bahwa API browser menampilkan koordinat jendela sehingga bisa dimanfaatkan
    • Kelihatannya seperti arsitektur satu server dengan banyak klien. Tiap jendela adalah klien terpisah, lalu mengirimkan geometri layar ke server, dan server mengirim tata letak yang berbeda untuk tiap klien agar kontennya terlihat seperti satu objek yang membentang di beberapa jendela

  • Keren. Rasanya lebih alami kalau persegi panjang dari jendela yang sedang fokus digambar paling atas

    • Mungkin itu dilakukan untuk menunjukkan bahwa ini bukan sekadar memakai transparansi

  • Tapi saya tidak paham kenapa ada latensi. Bukankah ini seharusnya cukup sederhana untuk diproses seketika?

    • Karena ini berjalan di dalam browser. Bahkan antara gerakan mouse sederhana dan perubahan koordinat objek sederhana pun, ada banyak lapisan sistem dan aplikasi yang terlibat untuk meneruskan event ke kode yang diinterpretasikan atau dikompilasi, lalu mengirim perubahan status ke layar
      Bahkan jika native, membuat dua jendela berbeda bergerak identik secara instan juga tidak selalu sepele. Misalnya, pernah ada tulisan bahwa beberapa toolkit GUI membuat pengubahan ukuran jendela yang mulus menjadi mustahil. Bahkan jika semuanya dibuat sendiri, Anda tetap harus berharap sistem cukup cepat memberi tahu jendela dan mendorong bitmap ke layar. Cara yang lebih baik adalah memakai compositor software/hardware seluruh sistem, menambahkan layer per objek, lalu hanya mengubah koordinatnya; tetapi bahkan saat itu compositor harus cukup bagus untuk menangani pembaruan 60/120/144 kali per detik atau lebih bila diperlukan
    • Mengambil posisi jendela sayangnya memang lambat. Itu sifat dari fitur browser ini
    • Penasaran apakah akan lebih instan jika memakai API postMessage tanpa melewati jaringan
    • Penurunan prioritas pada jendela atau tab latar belakang juga bisa jadi salah satu faktor
    • Mungkin ini latensi jaringan WebSocket, dan saya pribadi juga pernah mengalami pembaruan posisi jendela yang sesekali terasa tersendat aneh

  • Ini contoh penggunaan LocalStorage yang menarik
    Saya pernah memakai teknik berbagi LocalStorage yang sama untuk memperbarui jendela target saat pengaturan berubah di jendela browser lain. Untuk pembaruannya, cukup dengarkan event storage.onChanged

    • Sepertinya ini tidak memakai local storage. Strukturnya tampak seperti server berbasis WebSocket yang mengirim ke klien setiap kali posisi kotak-kotak lain berubah