Kabin Ateşi Kodlaması: Bir Node.js Arka Uç Eğitimi

Yayınlanan: 2022-03-11

COVID-19 karantinası çoğumuzu evde mahsur bıraktı, belki de sadece kabin ateşinin yaşayacağımız en kötü ateş türü olduğunu umarak. Birçoğumuz her zamankinden daha fazla video içeriği tüketiyoruz. Egzersiz şu anda özellikle önemli olsa da, bazen dizüstü bilgisayar kolay erişilemeyecek durumdayken iyi, eski moda bir uzaktan kumandanın lüksü için nostalji yaşanır.

İşte bu proje burada devreye giriyor: Herhangi bir akıllı telefonu, hatta güncelleme eksikliği nedeniyle işe yaramaz olan eski bir akıllı telefonu bile bir sonraki Netflix/YouTube/Amazon Prime Video/vb. için kullanışlı bir uzaktan kumandaya dönüştürme fırsatı. sık sık seyretmek. Aynı zamanda bir Node.js arka uç öğreticisidir: Express çerçevesini ve Pug (eski adıyla Jade) şablon motorunu kullanarak arka uç JavaScript'in temellerini öğrenme şansı.

Bu göz korkutucu geliyorsa, sonunda Node.js projesinin tamamı sunulacaktır; okuyucular, yalnızca öğrenmeye ilgi duydukları kadar öğrenmeye ihtiyaç duyarlar ve yol boyunca daha deneyimli okuyucuların atlayabileceği bazı temel bilgiler hakkında oldukça fazla sayıda nazik açıklama olacaktır.

Neden Sadece...?

Okuyucular, "Neden bir Node.js arka ucunu kodlamaya başlayasınız?" diye merak edebilirler. (Öğrenme fırsatı dışında tabii.) "Bunun için zaten bir uygulama yok mu?"

Elbette - bir sürü. Ancak bunun arzu edilmemesinin iki ana nedeni vardır:

  1. Eski bir telefonu yeniden kullanmak isteyenler için bu, kullanmak istediğim Windows Phone 8.1 cihazında olduğu gibi artık bir seçenek olmayabilir. (Uygulama mağazası resmi olarak 2019'un sonlarında kapatıldı.)
  2. Güven (veya eksikliği). Herhangi bir mobil platformda bulunabilecek pek çok uygulama gibi, genellikle kullanıcıların, uygulamanın yapması gereken şey için ihtiyaç duyduğundan çok daha fazla izin verme gereksinimi ile birlikte gelirler. Ancak bu yön uygun şekilde sınırlandırılmış olsa bile, bir uzaktan kumanda uygulamasının doğası, kullanıcıların uygulama geliştiricilerinin casus yazılım veya diğer kötü amaçlı yazılımları dahil ederek çözümün masaüstü ucundaki ayrıcalıklarını kötüye kullanmadığına güvenmeleri gerektiği anlamına gelir.

Bu sorunlar uzun zamandır var ve hatta 2014'ten GitHub'da bulunan benzer bir projenin motivasyonuydu. nvm , Node.js'nin eski sürümlerini yüklemeyi kolaylaştırır ve birkaç bağımlılığın yükseltilmesi gerekse bile Node.js, geriye dönük uyumlu olmasıyla büyük bir üne sahipti.

Ne yazık ki, bitrot kazandı. İnatçı bir yaklaşım ve Node.js arka uç uyumluluğu, Grunt, Bower ve düzinelerce başka bileşenin eski sürümleri arasındaki sonsuz kullanımdan kaldırmalar ve imkansız bağımlılık döngüleriyle eşleşemezdi. Saatler sonra, sıfırdan başlamanın çok daha kolay olacağı açıktı - bu yazarın, tekerleği yeniden icat etmeye karşı kendi tavsiyesine rağmen.

Eskiden Yeni Gizmos: Bir Node.js Arka Uç Kullanarak Telefonları Uzaktan Kumanda Olarak Yeniden Kullanıma Alma

Öncelikle, bu Node.js projesinin şu anda Linux'a özel olduğunu, özellikle Linux Mint 19 ve Linux Mint 19.3 üzerinde geliştirilmiş ve test edildiğini unutmayın, ancak diğer platformlar için destek kesinlikle eklenebilir. Zaten bir Mac üzerinde çalışabilir.

Node.js'nin modern bir sürümünün kurulu olduğunu ve proje kökü olarak hizmet edecek yeni bir dizinde bir komut isteminin açık olduğunu varsayarsak, Express'i kullanmaya başlamaya hazırız:

 npx express-generator --view=pug

Not: Burada npx , Node.js ile birlikte gelen Node.js paket yöneticisi npm ile birlikte gelen kullanışlı bir araçtır. Bunu, Express'in uygulama iskeleti oluşturucusunu çalıştırmak için kullanıyoruz. Bu yazı itibariyle, üreteç, Jade projesinin adını sürüm 2.0'dan itibaren "Pug" olarak değiştirmiş olmasına rağmen, varsayılan olarak Jade adlı bir şablon motorunu çeken bir Express/Node.js projesi yapıyor. Bu nedenle, güncel olmak ve Pug'ı hemen kullanmak için—artı, kullanımdan kaldırma uyarılarından kaçının— npx tarafından çalıştırılan express-generator oluşturucu komut dosyası için bir komut satırı seçeneği olan --view=pug üzerinde çalışıyoruz.

Bu yapıldıktan sonra, Node.js projemizin yeni doldurulan bağımlılık listesinden package.json içindeki bazı paketleri kurmamız gerekiyor. Bunu yapmanın geleneksel yolu, npm i ("kurulum" için i ) çalıştırmaktır. Ancak bazıları hala İplik hızını tercih ediyor, bu yüzden eğer onu kurduysanız, yarn parametresiz çalıştırın.

Bu durumda, erişim yerel ağda gerektiği gibi tutulduğu sürece, Pug'ın alt bağımlılıklarından birindeki (umarım yakında düzeltilecektir) kullanımdan kaldırma uyarısını yok saymak güvenli olmalıdır.

Hızlı bir thread yarn start veya npm start , ardından bir tarayıcıda localhost:3000 gidilmesi, temel Express tabanlı Node.js arka uçumuzun çalıştığını gösterir. Ctrl+C ile öldürebiliriz.

Node.js Arka Uç Eğitimi, 2. Adım: Ana Makinede Tuş Vuruşları Nasıl Gönderilir

Uzaktan kumanda kısmı zaten yarılanmışken, dikkatimizi kontrol kısmına çevirelim. Node.js arka ucunu çalıştıracağımız makineyi programlı olarak kontrol edebilecek, klavyedeki tuşlara basıyormuş gibi davranacak bir şeye ihtiyacımız var.

Bunun için resmi talimatlarını kullanarak xdotool . Bir terminalde örnek komutlarının hızlı bir testi:

 xdotool search "Mozilla Firefox" windowactivate --sync key --clearmodifiers ctrl+l

...Mozilla Firefox'un o sırada açık olduğunu varsayarsak, tam olarak ne diyorsa onu yapmalıdır. Bu iyi! Yakında göreceğimiz gibi, Node.js projemizin xdotool gibi komut satırı araçlarını çağırmasını sağlamak kolaydır.

Node.js Arka Uç Eğitimi, Adım 3: Özellik Tasarımı

Bu herkes için doğru olmayabilir, ancak kişisel olarak, birçok modern fiziksel uzaktan kumandanın benim kullanacağımdan yaklaşık beş kat daha fazla düğmeye sahip olduğunu görüyorum. Dolayısıyla bu proje için, üçe üç ızgaralı hoş, büyük, kolay hedeflenen düğmelerle tam ekran bir düzene bakıyoruz. Bu dokuz düğmenin ne olabileceği kişisel tercihinize kalmış.

En basit işlevlerin bile klavye kısayollarının Netflix, YouTube ve Amazon Prime Video'da aynı olmadığı ortaya çıktı. Bu hizmetler, yerel bir müzik çalar uygulaması gibi genel medya anahtarlarıyla da çalışmaz. Ayrıca, belirli işlevler tüm hizmetlerde kullanılamayabilir.

Yani yapmamız gereken, her hizmet için farklı bir uzaktan kumanda düzeni tanımlamak ve bunlar arasında geçiş yapmanın bir yolunu sağlamak.

Uzaktan Kumanda Düzenlerini Tanımlama ve Bunları Klavye Kısayollarıyla Eşleştirme

Bir avuç ön ayar ile çalışan hızlı bir prototip alalım. Bunları common/preset_commands.js —“common” içine koyacağız çünkü bu verileri birden fazla dosyadan dahil edeceğiz:

 module.exports = { // We could use ️ but some older phones (eg, Android 5.1.1) won't show it, hence ️ instead 'Netflix': { commands: { '-': 'Escape', '+': 'f', '': 'Up', '⇤': 'XF86Back', '️': 'Return', '': 'Down', '': 'Left', '': 'Right', '': 'm', }, }, 'YouTube': { commands: { '⇤': 'shift+p', '⇥': 'shift+n', '': 'Up', 'CC': 'c', '️': 'k', '': 'Down', '': 'j', '': 'l', '': 'm', }, }, 'Amazon Prime Video': { window_name_override: 'Prime Video', commands: { '⇤': 'Escape', '+': 'f', '': 'Up', 'CC': 'c', '️': 'space', '': 'Down', '': 'Left', '': 'Right', '': 'm', }, }, 'Generic / Music Player': { window_name_override: '', commands: { '⇤': 'XF86AudioPrev', '⇥': 'XF86AudioNext', '': 'XF86AudioRaiseVolume', '': 'r', '️': 'XF86AudioPlay', '': 'XF86AudioLowerVolume', '': 'Left', '': 'Right', '': 'XF86AudioMute', }, }, };

Anahtar kodu değerleri xev kullanılarak bulunabilir. (Benim için, “ses kapatma” ve “ses çalma” bu yöntemle keşfedilemezdi, bu yüzden bir medya anahtarları listesine de başvurdum.)

Okuyucular space ve Return arasındaki farkı görebilirler — bunun nedeni ne olursa olsun, xdotool doğru çalışması için bu ayrıntıya saygı gösterilmelidir. Bununla ilgili olarak, sadece niyetimizi açıklığa kavuşturmak için açıkça yazılmış birkaç tanımımız var - örneğin, shift+p , P de işe yarasa da-.

Node.js Arka Uç Eğitimi, 4. Adım: API'mizin "Anahtar" Uç Noktası (Pardon the Pun)

POST için bir uç noktaya ihtiyacımız olacak, bu da xdotool kullanarak tuş vuruşlarını simüle edecek. Gönderebileceğimiz farklı anahtar gruplarımız olacağından (her hizmet için bir tane), belirli bir group için uç noktayı arayacağız. route/users.js dosyasını routes/group.js routes/users.js olarak yeniden adlandırarak ve app.js dosyasında ilgili değişiklikleri yaparak, oluşturulan users uç noktasını yeniden amaçlayacağız:

 // ... var indexRouter = require('./routes/index'); var groupRouter = require('./routes/group'); // ... app.use('/', indexRouter); app.use('/group', groupRouter); // ...

Temel işlev, routes/group.js içindeki bir sistem kabuğu çağrısı aracılığıyla xdotool kullanmaktır. YouTube şu an için yalnızca test amacıyla tercih edilen menü olarak kodlayacağız.

 const express = require('express'); const router = express.Router(); const debug = require('debug')('app'); const cp = require('child_process'); const preset_commands = require('../common/preset_commands'); /* POST keystroke to simulate */ router.post('/', function(req, res, next) { const keystroke_name = req.body.keystroke_name; const keystroke_code = preset_commands['YouTube'].commands[keystroke_name]; const final_command = `xdotool \ search "YouTube" \ windowactivate --sync \ key --clearmodifiers ${keystroke_code}`; debug(`Executing ${final_command}`); cp.exec(final_command, (err, stdout, stderr) => { debug(`Executed ${keystroke_name}`); return res.redirect(req.originalUrl); }); }); module.exports = router;

Burada, POST isteğinin gövdesinden ( req.body ) istenen “name” anahtarını keystroke_name adlı parametre altında alıyoruz. gibi bir şey olacak. Daha sonra bunu, preset_commands['YouTube'] 'un commands nesnesinden karşılık gelen kodu aramak için kullanırız.

Son komut birden fazla satırdadır, bu nedenle her satırın sonundaki \ s tüm parçaları tek bir komutta birleştirir:

  • search "YouTube" , başlığında "YouTube" olan ilk pencereyi getirir.
  • windowactivate --sync getirilen pencereyi etkinleştirir ve bir tuş vuruşu almaya hazır olana kadar bekler.
  • key --clearmodifiers ${keystroke_code} , tuş vuruşunu gönderir ve Caps Lock gibi, gönderdiklerimizi engelleyebilecek değiştirici tuşların geçici olarak temizlendiğinden emin olur.

Bu noktada kod, ona geçerli girdi sağladığımızı varsayar; bu, daha sonra daha dikkatli olacağımız bir şeydir.

Kolaylık sağlamak için, kod ayrıca başlığında "YouTube" yazan tek bir uygulama penceresinin açık olduğunu varsayar; birden fazla eşleşme varsa, istenen pencereye tuş vuruşlarını göndereceğimizin garantisi yoktur. Bu bir sorunsa, pencere başlıklarının uzaktan kumanda edilecek pencerenin yanı sıra tüm pencerelerde tarayıcı sekmeleri değiştirilerek değiştirilebilmesine yardımcı olabilir.

Bu hazır olduğunda, sunucumuzu yeniden başlatabiliriz, ancak bu sefer hata ayıklama etkin, böylece debug çağrılarımızın çıktısını görebiliriz. Bunu yapmak için, DEBUG=old-fashioned-remote:* thread DEBUG=old-fashioned-remote:* yarn start veya DEBUG=old-fashioned-remote:* npm start . Çalıştığında, YouTube'da bir video oynatın, başka bir terminal penceresi açın ve bir cURL araması deneyin:

 curl --data "keystroke_name=️" http://localhost:3000/group

Bu, 3000 numaralı bağlantı noktasındaki yerel makinemize, gövdesinde istenen tuş vuruşu adıyla bir POST isteği gönderir, arka ucumuzun dinlediği bağlantı noktası. Bu komutu çalıştırmak, Executed penceresinde Executing ve Yürütme hakkında notlar vermeli ve daha da önemlisi, tarayıcıyı npm ve videosunu duraklatmalıdır. Bu komutu tekrar çalıştırmak aynı çıktıyı vermeli ve devam ettirmeli.

Node.js Arka Uç Eğitimi, Adım 5: Birden Çok Uzaktan Kontrol Düzeni

Arka ucumuz tam olarak bitmedi. Ayrıca şunları yapabilmek için de ihtiyacımız olacak:

  1. preset_commands uzaktan kontrol düzenlerinin bir listesini oluşturun.
  2. Belirli bir uzaktan kumanda düzenini seçtikten sonra, tuş vuruşu "adlarının" bir listesini oluşturun. (Ayrıca common/preset_commands.js doğrudan ön uçta kullanmayı seçebilirdik, çünkü bu zaten JavaScript'tir ve orada filtrelenmiştir. Bu, Node.js arka ucunun potansiyel avantajlarından biridir, sadece burada kullanmıyoruz. .)

Bu özelliklerin her ikisi de, Node.js arka uç öğreticimizin, oluşturacağımız Pug tabanlı ön uçla kesiştiği yerdir.

Uzaktan Kumandaların Listesini Sunmak için Pug Şablonunu Kullanma

Denklemin arka uç kısmı, routes/index.js aşağıdaki gibi görünecek şekilde değiştirmek anlamına gelir:

 const express = require('express'); const router = express.Router(); const preset_commands = require('../common/preset_commands'); /* GET home page. */ router.get('/', function(req, res, next) { const group_names = Object.keys(preset_commands); res.render('index', { title: 'Which Remote?', group_names, portrait_css: `.group_bar { height: calc(100%/${Math.min(4, group_names.length)}); line-height: calc(100vh/${Math.min(4, group_names.length)}); }`, landscape_css: `.group_bar { height: calc(100%/${Math.min(2, group_names.length)}); line-height: calc(100vh/${Math.min(2, group_names.length)}); }`, }); }); module.exports = router;

Burada, Object.keys preset_commands uzaktan kumanda yerleşim isimlerimizi ( group_names ) alıyoruz. Daha sonra bunları ve ihtiyacımız olan diğer bazı verileri res.render() aracılığıyla otomatik olarak çağrılan Pug şablon motoruna göndeririz.

Buradaki keys anlamını, gönderdiğimiz tuş vuruşlarıyla karıştırmamaya dikkat edin: Object.keys bize JavaScript'te bir nesne oluşturan anahtar/değer çiftlerinin tüm anahtarlarını içeren bir dizi (sıralı bir liste) verir:

 const my_object = { 'a key' : 'its corresponding value' , 'another key' : 'its separate corresponding value' , };

common/preset_commands.js , yukarıdaki kalıbı görürüz ve anahtarlarımız (nesne anlamında) gruplarımızın adlarıdır: 'Netflix' , 'YouTube' vb. Bunların karşılık gelen değerleri değildir. my_object yukarıda olduğu gibi basit dizeler—bunlar kendi anahtarları, yani commands ve muhtemelen window_name_override ile nesnelerin tamamıdır.

Burada geçirilen özel CSS, kuşkusuz, biraz hack. Modern, flexbox tabanlı bir çözüm kullanmak yerine buna ihtiyaç duymamızın nedeni, mobil tarayıcıların harika dünyasıyla daha da harika eski enkarnasyonlarında daha iyi uyumluluk içindir. Bu durumda, dikkat edilmesi gereken en önemli şey, yatay modda, ekran başına en fazla iki seçenek göstererek düğmeleri büyük tutuyoruz; portre modunda, dört.

Ancak bu, tarayıcıya gönderilmek üzere gerçekte HTML'ye nerede dönüştürülür? İşte burada views/index.pug giriyor, ki biz de şöyle görünmek isteriz:

 extends layout block header_injection style(media='(orientation: portrait)') #{portrait_css} style(media='(orientation: landscape)') #{landscape_css} block content each group_name in group_names span(class="group_bar") a(href='/group/?group_name=' + group_name) #{group_name}

İlk satır önemlidir: extends layout , Pug'ın bu dosyayı burada ve ayrıca başka bir görünümde yeniden kullanacağımız bir tür üst şablon olan views/layout.pug bağlamında alacağı anlamına gelir. Son dosyanın şöyle görünmesi için link satırından sonra birkaç satır eklememiz gerekecek:

 doctype html html head title= title link(rel='stylesheet', href='/stylesheets/style.css') block header_injection meta(name='viewport', content='user-scalable=no') body block content

Burada HTML'nin temellerine girmeyeceğiz, ancak bunlara aşina olmayan okuyucular için, bu Pug kodu hemen hemen her yerde bulunan standart ücretli HTML kodunu yansıtır. Şablon oluşturma yönü, title= title ile başlar, bu, HTML başlığını res.render aracılığıyla res.render nesnenin title anahtarına karşılık gelen değere ayarlar.

header_injection adını verdiğimiz bir block iki satırı daha sonra şablonlamanın farklı bir yönünü görebiliriz. Bunun gibi bloklar, mevcut olanı genişleten şablonlarla değiştirilebilen yer tutuculardır. (İlgili değil, meta satır, mobil tarayıcılar için hızlı bir geçici çözümdür, bu nedenle kullanıcılar ses kontrollerine art arda birkaç kez dokunduğunda, telefon yakınlaştırma veya uzaklaştırma yapmaktan kaçınır.)

block s'mize geri dönelim: Bu nedenle, views/index.pug , views/ views/layout.pug bulunan aynı adlarla kendi block tanımlar. Bu header_injection durumunda, bu, telefonun içinde olacağı dikey veya yatay yönlere özel CSS kullanmamıza izin verir.

content , web sayfasının görünen ana bölümünü koyduğumuz yerdir, bu durumda:

  1. group_names dizisi boyunca döngüler geçiriyoruz,
  2. kendisine uygulanan CSS sınıfı group_bar ile her biri için bir <span> öğesi oluşturur ve
  3. group_name temelinde her <span> içinde bir bağlantı oluşturur.

views/layout.pug aracılığıyla alınan dosyada tanımlayabileceğimiz CSS sınıfı group_bar , yani public/stylesheets/style.css :

 html, body, form { padding: 0; margin: 0; height: 100%; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } .group_bar, .group_bar a, .remote_button { box-sizing: border-box; border: 1px solid white; color: greenyellow; background-color: black; } .group_bar { width: 100%; font-size: 6vh; text-align: center; display: inline-block; } .group_bar a { text-decoration: none; display: block; }

Bu noktada, npm start hala çalışıyorsa, bir masaüstü tarayıcısında http://localhost:3000/ gitmek Netflix ve YouTube için çok büyük iki düğme göstermelidir, geri kalanı aşağı kaydırarak kullanılabilir.

Netflix ve YouTube için çok büyük iki düğmeyi gösteren, bir masaüstü tarayıcı kullanan uzaktan kumanda düzeni seçicisinin testi.

Ancak bu noktada onlara tıklarsak çalışmazlar, çünkü bağlandıkları rotayı henüz tanımlamadık ( /group 'ın GET tingi.)

Seçilen Uzaktan Kumanda Düzenini Gösterme

Bunu yapmak için bunu routes/group.js son module.exports satırından hemen önce ekleyeceğiz:

 router.get('/', function(req, res, next) { const group_name = req.query.group_name || ''; const group = preset_commands[group_name]; return res.render('group', { keystroke_names: Object.keys(group.commands), group_name, title: `${group_name.match(/([AZ])/g).join('')}-Remote` }); });

Bu, uç noktaya gönderilen grup adını alır (örneğin, ?group_name=Netflix /group/ öğesinin sonuna koyarak) ve bunu karşılık gelen gruptan commands değerini almak için kullanır. Bu değer ( group.commands ) bir nesnedir ve bu nesnenin tuşları, uzaktan kumanda düzenimizde görüntüleyeceğimiz isimlerdir ( keystroke_names ).

Not: Deneyimsiz geliştiricilerin nasıl çalıştığının ayrıntılarına girmelerine gerek yoktur, ancak title değeri, grup/düzen adlarımızı kısaltmalara dönüştürmek için biraz normal ifade kullanır; örneğin, YouTube uzaktan kumandamız tarayıcı başlığına sahip olacaktır. YT-Remote . Bu şekilde, bir telefonda bir şeyler denemeden önce ana makinemizde hata ayıklıyorsak, xdotool kontrol etmeye çalıştığımız pencere yerine uzaktan kumanda tarayıcı penceresini yakalamasına sahip olmayacağız. Bu arada, telefonlarımızda, uzaktan kumandayı işaretlemek istersek, başlık güzel ve kısa olacak.

res.render ile daha önceki karşılaşmamızda olduğu gibi, bu sefer verilerini views/group.pug şablonuyla karışması için gönderiyor. Bu dosyayı oluşturacağız ve bununla dolduracağız:

 extends layout block header_injection script(type='text/javascript', src='/javascript/group-client.js') block content form(action="/group?group_name=" + group_name, method="post") each keystroke_name in keystroke_names input(type="submit", name="keystroke_name", value=keystroke_name, class="remote_button")

views/index.pug ile olduğu gibi, iki blogu da views/layout.pug geçersiz kılıyoruz. Bu sefer başlığa koyacağımız şey CSS değil, birazdan ele alacağımız bazı istemci tarafı JavaScript. (Ve evet, bir anlık titizlik içinde, yanlış çoğul hale getirilmiş javascripts yeniden adlandırdım…)

Buradaki ana content , her bir keystroke_name için bir tane olmak üzere bir dizi farklı gönderme düğmesinden oluşan bir HTML formudur. Her düğme, formla birlikte gönderdiği değer olarak görüntülediği tuş vuruşu adını kullanarak formu gönderir ( POST isteğinde bulunur).

Ayrıca ana stil sayfası dosyamızda biraz daha CSS'ye ihtiyacımız olacak:

 .remote_button { float: left; width: calc(100%/3); height: calc(100%/3); font-size: 12vh; }

Daha önce, uç noktayı kurduğumuzda, isteği şu şekilde işlemeyi bitirdik:

 return res.redirect(req.originalUrl);

Bu, tarayıcı formu gönderdiğinde, Node.js arka ucunun tarayıcıya formun gönderildiği sayfaya, yani ana uzaktan kumanda düzenine geri dönmesini söyleyerek yanıt verdiği anlamına gelir. Sayfa değiştirmeden daha şık olurdu; ancak, eskimiş mobil tarayıcıların tuhaf ve harika dünyası ile maksimum uyumluluk istiyoruz. Bu şekilde, herhangi bir ön uç JavaScript çalışmasa bile, Node.js arka uç projemiz çalışmaya devam etmelidir .

Ön Uç JavaScript'in Bir Çizgisi

Tuş vuruşlarını göndermek için bir form kullanmanın dezavantajı, tarayıcının beklemesi ve ardından fazladan bir gidiş-dönüş gerçekleştirmesidir: Sayfa ve bağımlılıkları daha sonra Node.js arka uçumuzdan istenmeli ve teslim edilmelidir. Ardından, tarayıcı tarafından yeniden oluşturulmaları gerekir.

Okuyucular bunun ne kadar etkisi olabileceğini merak edebilirler. Ne de olsa sayfa küçük, bağımlılıkları son derece düşük ve son Node.js projemiz yerel bir wifi bağlantısı üzerinden çalışacak. Düşük gecikmeli bir kurulum olmalı, değil mi?

Görünen o ki -en azından Windows Phone 8.1 ve Android 4.4.2 çalıştıran daha eski akıllı telefonlarda test yaparken-bu etki, ne yazık ki, çalma sesini birkaç çentik artırmak veya azaltmak için hızlı bir şekilde dokunma durumunda oldukça belirgindir. HTML formları aracılığıyla manuel POST zarif geri dönüşünden uzaklaşmadan JavaScript'in yardımcı olabileceği yer burasıdır.

Bu noktada, son istemci JavaScript'imizin ( public/javascript/group-client.js ) eski, artık desteklenmeyen mobil tarayıcılarla uyumlu olması gerekiyor. Ama buna çok ihtiyacımız yok:

 (function () { function form_submit(event) { var request = new XMLHttpRequest(); request.open('POST', window.location.pathname + window.location.search, true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); request.send('keystroke_name=' + encodeURIComponent(event.target.value)); event.preventDefault(); } window.addEventListener("DOMContentLoaded", function() { var inputs = document.querySelectorAll("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].addEventListener("click", form_submit); } }); })();

Burada, form_submit işlevi yalnızca verileri eşzamansız bir çağrı yoluyla gönderir ve son satır, tarayıcıların normal gönderme davranışını engeller, böylece sunucu yanıtına dayalı olarak yeni bir sayfa yüklenir. Bu parçacığın ikinci yarısı, sayfa yüklenene kadar bekler ve ardından form_submit kullanmak için her gönder düğmesini bağlar. Her şey bir IIFE'ye sarılır.

Son dokunuşlar

Node.js arka uç öğretici kodumuzun son sürümünde, çoğunlukla daha iyi hata işleme amacıyla yukarıdaki parçacıklarda bir dizi değişiklik vardır:

  • Node.js arka ucu şimdi, var olduklarından emin olmak için kendisine gönderilen grupların ve tuş vuruşlarının adlarını kontrol eder. Bu kod, routes/group.js hem GET hem de POST işlevleri için yeniden kullanılan bir işlevdedir.
  • Kullanmıyorlarsa Pug error şablonunu kullanırız.
  • Ön uç JavaScript ve CSS artık düğmeleri sunucudan yanıt beklerken geçici olarak gri, sinyal xdotool sorunsuz bir şekilde geçer geçmez yeşil ve herhangi bir şey beklendiği gibi çalışmadıysa kırmızı olarak ana hatlarını çiziyor .
  • Node.js arka ucu, ölürse bir yığın izi yazdıracaktır; bu, yukarıda verilenlere daha az olasıdır.

Okuyucular, GitHub'daki eksiksiz Node.js projesini inceleyebilir (ve/veya klonlayabilir).

Node.js Arka Uç Eğitimi, Adım 5: Gerçek Dünya Testi

Bunu, npm start çalıştıran ana bilgisayar ve bir film veya müzik çalarla aynı wifi ağına bağlı gerçek bir telefonda denemenin zamanı geldi. Bu, yalnızca bir akıllı telefonun web tarayıcısını ana bilgisayarın yerel IP adresine (son ekinde :3000 ile) yönlendirmek meselesidir, bu muhtemelen en kolay hostname -I | awk '{print $1}' hostname -I | awk '{print $1}' ana bilgisayardaki bir terminalde.

Windows Phone 8.1 kullanıcılarının fark edebileceği bir sorun, 192.168.2.5:3000 gibi bir şeye gitmeye çalışmanın bir hata açılır penceresi vermesidir:

"Desteklenmeyen adres" başlıklı bir Windows Phone hata mesajının ekran görüntüsü, "Internet Explorer Mobile bu tür adresleri desteklemiyor ve bu sayfayı görüntüleyemiyor.

Neyse ki, cesaretinizin kırılmasına gerek yok: Sadece http:// ile önek eklemek veya sonuna / eklemek, daha fazla şikayet olmadan adresi getirmesini sağlar.

Uzaktan kumanda düzeni seçim ekranı.

Orada bir seçenek seçmek, bizi çalışan bir uzaktan kumandaya götürmelidir.

"Genel/Müzik Çalar" uzaktan kumanda ekranı.

Daha fazla rahatlık için, kullanıcılar yönlendiricilerinin DHCP ayarlarını ana bilgisayara her zaman aynı IP adresini atayacak ve düzen seçim ekranını ve/veya herhangi bir favori düzeni işaretleyecek şekilde ayarlamak isteyebilirler.

Çekme İsteklerine Hoş Geldiniz

Muhtemelen herkes bu projeyi olduğu gibi sevmeyecek. Kodu daha derinlemesine incelemek isteyenler için iyileştirmeler için bazı fikirler:

  • Disney Plus gibi diğer hizmetler için düzenleri değiştirmek veya yenilerini eklemek kolay olmalıdır.
  • Belki bazıları "hafif mod" düzenini ve aralarında geçiş yapma seçeneğini tercih eder.
  • Geri dönüşü olmadığı için Netflix'ten çıkmak, gerçekten "emin misiniz?" bir nevi onay.
  • Proje kesinlikle Windows desteğinden faydalanacaktır.
  • xdotool belgeleri OSX'ten bahsediyor—bu (veya bu) proje modern bir Mac'te işe yarıyor mu?
  • Gelişmiş uzanma için, bilgisayarda tek bir Netflix/Amazon Prime Video filmi seçmek veya bir YouTube oynatma listesi oluşturmak yerine filmleri aramanın ve bunlara göz atmanın bir yolu.
  • Önerilen değişikliklerden herhangi birinin orijinal işlevselliği bozması durumunda otomatik bir test paketi.

Umarım bu Node.js arka uç eğitiminden ve sonuç olarak iyileştirilmiş medya deneyiminden keyif almışsınızdır. Mutlu akış ve kodlama!

İlgili: Node.js/TypeScript REST API Oluşturma, Bölüm 1: Express.js