Mengawal laman web dengan javascript dan {x} - sitepoint

Takeaways Key

Penulis menunjukkan cara menggunakan peranti Android untuk menghantar arahan jauh ke laman web secara langsung, menggunakan contoh mengawal persembahan HTML dari jauh.
Stack Tech yang digunakan termasuk peranti Android, pada {x} app, node.js, express, socket.io, deck.js, dan heroku.
socket.io, perpustakaan JavaScript, membolehkan komunikasi masa nyata antara pelayan dan pelanggan, yang penting untuk respons masa nyata kepada isyarat dari peranti Android.
App {x}, yang mempunyai API JavaScript, membolehkan kawalan peranti Android dan tindak balas kepada peristiwa seperti mesej teks masuk, lokasi GPS, hayat bateri, dan banyak lagi. Ini digunakan untuk menghantar permintaan pelayan apabila nudges berlaku.
Penulis memberi amaran bahawa kaedah itu tidak selamat dan mengesyorkan menambah lapisan keselamatan untuk apa -apa yang terlalu generik.

Saya telah kehilangan telefon saya. Saya meninggalkannya di sofa di pusat membeli -belah dan kembali untuk mendapati ia hilang. Seseorang telah berbakat telefon baru melalui seni yang mengerikan. Saya menghantar kod JavaScript dari jauh ke telefon saya melalui web yang menghantar saya koordinat peranti pada bila -bila masa saya menghantar mesej. Saya mengesannya ke restoran Sizzler sehingga mereka mematikan telefon dan hilang selama -lamanya. Saya membeli sendiri telefon baru tetapi melihat potensi baru dalam aplikasi yang kuat yang saya hampir tidak digunakan sehingga titik itu dipanggil {x}.

Dalam artikel ini saya akan berkongsi penggunaan aplikasi yang sangat berbeza berbanding dengan kisah seram telefon saya yang hilang. Saya ingin menunjukkan kepada anda bagaimana anda boleh menggunakan peranti Android anda untuk menghantar arahan jauh ke laman web langsung. Saya akan menggunakan contoh jarak jauh yang mengawal persembahan HTML tetapi konsep -konsepnya dapat diperluas untuk melakukan beberapa perkara yang menarik.

Kami akan menggunakan bit teknologi berikut:

peranti Android

• on {x}
• node.js
• Express
• socket.io
• deck.js
• Heroku
Jika anda tidak mempunyai telefon Android, jangan risau! Anda secara teorinya boleh menggunakan mana -mana peranti lain yang boleh membuat panggilan HTTP berfungsi dengan jenis sihir nod/socket.io yang sama yang akan kami lepaskan. Artikel ini menganggap pembaca mempunyai pengetahuan tentang Node.js dan JavaScript, namun kod sumber disediakan untuk rujukan anda.

Apa itu Socket.io?

Sebelum kita terlalu jauh ke dalam ini, saya akan menerangkan apa yang dilakukan Socket.io, kerana ia akan muncul dalam beberapa coretan kod yang akan datang. Socket.io adalah perpustakaan JavaScript yang membolehkan komunikasi masa nyata antara pelayan dan pelanggan. Ia membolehkan anda menentukan peristiwa di kedua -dua pelayan dan klien. Contohnya io.sockets.emit ('EventThePhappened') mencipta satu peristiwa baru yang boleh bertindak balas. Untuk bertindak balas terhadap peristiwa itu, hanya sediakan pengendali acara seperti ini - socket.on ('eventTheAppened', function () {}).

Program sembang adalah aplikasi socket.io contoh biasa. Pelayan mendengar mesej masuk dari mana -mana pelanggan dan memaparkannya dengan serta -merta pada semua pelanggan yang menjalankan aplikasi sembang. Kami akan menggunakannya untuk segera bertindak balas terhadap isyarat dari peranti Android semasa halaman itu naik.

menyediakan pelayan

Struktur direktori demo ini ditunjukkan dalam angka berikut. Semua kod sampingan pelayan disimpan dalam fail JavaScript utama, index.js. HTML, CSS, dan JS akhir depan disimpan dalam folder awam.

Fail Package.json mentakrifkan kebergantungan dan maklumat meta lain mengenai aplikasi nod. Kandungan fail ini ditunjukkan di bawah. Perhatikan bahawa modul Express dan Socket.io diperlukan dalam kebergantungan.

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

Oleh kerana demo ini dimaksudkan untuk dihoskan di Heroku, kami memerlukan procfile, yang kandungannya ditunjukkan di bawah (cukup mudah!).

Web: Node Index.js

pelayan nod

pelayan nod, disimpan dalam index.js ditunjukkan di bawah.

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

baris berikut dari index.js digunakan untuk mengimport socket.io dan menetapkan port pelayan.

io <span>= require("socket.io").listen(server),
</span>port <span>= process.env.PORT || 5000;</span>

Agar Socket.io bekerja di Heroku, saya mendapati saya terpaksa menambah garis tambahan ini untuk mengkonfigurasi XHR-Polling daripada bergantung pada WebSockets (anda mungkin tidak memerlukannya untuk persekitaran anda). Barisan ini memberitahu pelayan untuk menunggu selama 10 saat sebelum menjawab dengan respons kosong jika tidak mempunyai respons khusus untuk permintaan mendapatkan atau pos.

io<span>.configure(function () {
</span>  io<span>.set("transports", ["xhr-polling"]);
</span>  io<span>.set("polling duration", 10);
</span><span>});</span>

Mengawal slaid persembahan

Demo ini menggunakan deck.js, tetapi berasa bebas untuk menggantikan mana -mana template persembahan HTML yang lain selagi ia mempunyai panggilan JS untuk bergerak di antara slaid. Untuk deck.js, hanya muat turun dan unzip ke folder awam.

Laluan yang paling penting dalam pelayan nod ialah permintaan pos yang membolehkan kami berinteraksi dengan slaid persembahan kami. Laluan ini ditunjukkan di bawah.

app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});</span>

Kod sebelumnya memanggil io.sockets.emit ('nudgeleft') atau io.sockets.emit ('nudGeright') bergantung kepada data JSON yang dihantar dengan permintaan. Satu perkara penting untuk membuat di sini ialah laluan itu bertindak balas dengan JSON. Jika anda tidak melakukan ini, permintaan anda akan tamat tempoh kerana mereka akan duduk, menunggu respons dari pelayan. Pada ketika ini, anda boleh menjalankan pelayan secara tempatan, atau menolaknya ke Heroku untuk digunakan.

Mengkonfigurasi socket.io

JavaScript tambahan telah ditambah kepada persembahan di awam/js/magic.js seperti yang ditunjukkan di bawah:

<span>(function() {
</span>  <span>var socket = io.connect(window.location.hostname);
</span>
  socket<span>.on('nudgeleft', function() {
</span>    $<span>.deck('next');
</span>  <span>});
</span>
  socket<span>.on('nudgeright', function() {
</span>    $<span>.deck('prev');
</span>  <span>});
</span><span>}());</span>

Baris pertama menyambung ke pelayan Socket.io kami di window.location.hostname. Untuk tujuan demo ini, kami akan memastikan ia mudah dan mempunyai segala -galanya di satu domain. Kedua -dua pengendali acara mendengar apa -apa permintaan untuk menjatuhkan slaid kiri atau kanan. Jika ia memperhatikan ini, maka kami menjalankan fungsi sebelumnya atau seterusnya untuk menggerakkan slaid.

pada {x} sos rahsia

pada {x} adalah aplikasi Android yang membolehkan anda mengawal peranti Android anda dan bertindak balas terhadap peristiwa seperti mesej teks masuk, lokasi GPS, hayat bateri, dan banyak lagi melalui API JavaScript. Dalam demo ini, kami akan menggunakannya untuk menghantar permintaan pelayan tersebut apabila berlaku.

Bermula dengan {x}

Muat turun aplikasi ke peranti anda: https://www.onx.ms/#!DownloadApppage.
Walaupun itu memuat turun, pergi ke https://www.onx.ms pada penyemak imbas desktop anda dan log masuk ke {x} menggunakan akaun Facebook anda (jangan bimbang, ini hanya digunakan untuk menyegerakkan kod antara peranti anda dan pada {x}).
anda akan dibawa ke papan pemuka pada {x}. Anda boleh pergi ke resipi untuk meneroka coretan kod yang menarik yang sudah tersedia jika anda berminat, kami akan menyelidiki terus ke kod tersuai untuk tutorial ini.
Klik pautan Kod Tulis di sudut kiri atas halaman untuk memaparkan editor kod.
Tinggalkan tetingkap itu terbuka, kami akan menambah beberapa kod di sana.

pengekodan pada {x}

Seperti yang disebutkan di atas, pada {x} mempunyai API JavaScript yang membolehkan anda memanggil dan mengesan banyak peristiwa pada peranti Android anda. Untuk demo ini, kami memberi tumpuan kebanyakannya pada kaedah.gestures.on kaedah.

Perkara pertama yang perlu dilakukan ialah kembali ke tetingkap itu dengan editor kod dibuka pada {x} dan anda akan melihat "Nama Peraturan:", menamakan semula itu kepada sesuatu yang lebih mesra seperti "Kawalan Penyampaian Nudge". Kod {x} saya ditunjukkan di bawah. Perhatikan bahawa anda akan mahu menggantikan http://androidremotecontrol.herokuapp.com dengan pelayan anda sendiri.

<span>{
</span>  <span>"name": "androidremotecontrol",
</span>  <span>"version": "0.0.1",
</span>  <span>"dependencies": {
</span>    <span>"express": "3.1.x",
</span>    <span>"socket.io": "latest"
</span>  <span>},
</span>  <span>"engines": {
</span>    <span>"node": "0.10.x",
</span>    <span>"npm": "1.2.x"
</span>  <span>}
</span><span>}</span>

Komponen peranti.gestures.on digunakan untuk penyediaan pengendali acara. Bila -bila masa di {x} mengesan nudge yang tersisa, pengendali Nudgeleft dipanggil. Kami mempunyai garis kod yang pada dasarnya memaparkan pemberitahuan pada telefon anda yang menunjukkan telefon itu ditinggalkan kiri. Anda tidak memerlukan ini tetapi saya menggunakannya untuk ujian untuk memastikan nudge dikesan. Barisan kod itu ditunjukkan di bawah.

<span>var http = require('http'),
</span>    express <span>= require('express'),
</span>    app <span>= express(),
</span>    server <span>= require('http').createServer(app),
</span>    io <span>= require('socket.io').listen(server),
</span>    port <span>= process.env.PORT || 5000;
</span>
app<span>.use(express.bodyParser());
</span>
app<span>.get('/', function(request<span>, response</span>) {
</span>  response<span>.sendfile('public/index.html');
</span><span>});
</span>
app<span>.post('/nudging', function(request<span>, response</span>) {
</span>  io<span>.sockets.emit('nudge'+ request.body.nudged);
</span>  response<span>.json({success: true});
</span><span>});
</span>
app<span>.get(<span>/<span>^(.+)$</span>/</span>, function(req<span>, res</span>) {
</span>  res<span>.sendfile('public/' + req.params[0]);
</span><span>});
</span>
server<span>.listen(port, function() {
</span>  <span>console.log('Listening on ' + port);
</span><span>});
</span>
io<span>.configure(function() {
</span>  io<span>.set('transports', ['xhr-polling']);
</span>  io<span>.set('polling duration', 10);
</span><span>});</span>

Seterusnya, kami menggunakan kaedah peranti {x}. Untuk menghantar data JSON ke pelayan. Perhatikan bahawa jenis data secara jelas ditakrifkan sebagai JSON. Tanpa ini data tidak dihantar dengan betul.

Pada masa ini, fungsi panggil balik OnSuccess hanya digunakan untuk log bahawa respons HTTP berjaya. Peta ini ke response.json ({success: true}) Kami menetapkan lebih awal dalam pelayan nod. Anda boleh menambah lebih banyak lagi panggilan kejayaan ini untuk menyediakan {x} dengan lebih banyak data jika anda merasa begitu cenderung. Begitu juga, panggilan balik OneRor digunakan untuk log sebarang kesilapan yang berlaku.

Seterusnya, kita menghidupkan pengesanan untuk gerak isyarat ini untuk 900,000 milisaat. Ini akan dijalankan apabila anda mula -mula mengaktifkan kod pada peranti anda. Kemungkinan anda mahu kod ini berjalan lebih lama daripada 900,000 milisaat. Cara yang saya buat pada masa ini, adalah untuk menghidupkan ini setiap kali skrin peranti datang. Oleh itu, jika anda ingin mengawal slaid anda, cuma hidupkan skrin anda dan anda mempunyai 900 saat untuk pergi liar. Dari apa yang saya dapati semasa berkembang, anda perlu menyediakan had masa dengan fungsi ini. Jika anda mencari cara lain, sila beritahu saya dalam komen. Saya suka mengemas kini.

Sebaik sahaja anda telah mengemas kini kod untuk memadankan alamat pelayan anda dan semuanya bersedia untuk pergi, klik "Simpan dan Hantar ke Telefon" untuk dihantar melalui web ke telefon anda. Dari sana, buka URL anda dengan persembahan, putar skrin peranti Android anda dan cuba nudging kiri dan kanan. Jika semuanya berjalan lancar, anda akan melihat slaid anda beralih ke belakang dan sebagainya!

Melihat pada {x} logs

Jika anda ingin melihat fail log untuk {x}, anda boleh membuka aplikasi pada telefon Android anda, pilih peraturan yang telah anda tambahkan dan pilih "Lihat Log". Sebagai alternatif, anda dapat melihatnya di laman web {x} apabila anda log masuk dengan pergi ke halaman Peraturan anda, memilih peraturan dan mengklik tab "Log".

bagaimana dengan keselamatan?

Kaedah ini tidak selamat dalam apa cara sekalipun. Sekiranya orang lain membuat alamat persembahan anda dan permintaan pos yang anda hantar, mereka dapat dengan mudah menukar slaid anda dari mana -mana sahaja di seluruh dunia. Untuk ini dan apa -apa idea lain yang anda fikirkan berkaitan dengan Socket.io dan pada {x}, ingatlah bahawa anda akan mahu menambah lapisan keselamatan di suatu tempat untuk apa -apa yang terlalu generik seperti ini.

Kesimpulan

Idea di sebalik demo ini adalah untuk menunjukkan bahawa dengan JavaScript, Socket.io, dan aplikasi Android yang cantik, anda boleh menggunakan telefon anda untuk mempengaruhi laman web dalam beberapa cara. Slaid persembahan yang tersentuh ke kiri dan kanan hanya permulaan. Anda boleh mengubah apa yang dipaparkan laman web berdasarkan lokasi anda, sama ada anda mempunyai aplikasi yang berjalan, jika bateri anda habis, dan lain -lain. Jika anda membuat percubaan sedikit dengan {x} dan socket.io, saya ' D suka mendengarnya. Pergi dan kodkan sesuatu!

kod

Semua kod untuk demo ini ada dan boleh didapati di GitHub. Versi berjalan saya juga boleh didapati di Heroku.

Soalan Lazim (Soalan Lazim) Mengenai Kawalan Laman Web Dengan JavaScript

Apakah peranan JavaScript dalam mengawal laman web? Ia adalah bahasa pengaturcaraan yang membolehkan anda melaksanakan ciri -ciri kompleks di laman web. Apabila laman web adalah statik, iaitu, memaparkan maklumat statik, JavaScript boleh digunakan untuk menjadikan halaman lebih interaktif. Ia boleh bertindak balas terhadap tindakan pengguna, membuat kandungan dinamik, mengawal multimedia, imej bernyawa, dan banyak lagi. JavaScript dijalankan pada komputer pengguna, membuat beban halaman lebih cepat dan mengurangkan beban pada pelayan.

Bagaimana saya boleh menggunakan JavaScript dalam laman web? Tag atau dihubungkan secara luaran menggunakan atribut SRC dalam tag . Skrip boleh diletakkan di bahagian kepala atau badan dokumen HTML anda, tetapi secara amnya disyorkan untuk meletakkan skrip di bahagian bawah bahagian badan untuk mengelakkan menyekat penyerahan halaman. JavaScript Mengawal laman web?

JavaScript boleh mengawal laman web dalam pelbagai cara. Sebagai contoh, ia boleh mengubah kandungan dan gaya elemen HTML, mengesahkan data borang sebelum diserahkan kepada pelayan, memanipulasi kuki, membuat tingkap pop timbul, dan banyak lagi. JavaScript juga boleh digunakan untuk membuat aplikasi yang kompleks seperti permainan dalam talian, peta interaktif, dan grafik 2D/3D. Buat laman web dinamik dan interaktif. HTML digunakan untuk struktur laman web, CSS untuk gaya, dan JavaScript untuk fungsi. JavaScript boleh mengakses dan mengubah semua elemen dan atribut dalam dokumen HTML. Ia juga boleh mengubah semua gaya CSS dalam laman web. Walau bagaimanapun, ia memberi manfaat untuk mempunyai pemahaman asas tentang HTML dan CSS kerana mereka bekerjasama dengan JavaScript untuk membuat laman web interaktif. Terdapat banyak sumber yang tersedia dalam talian, termasuk tutorial, video, dan platform pengekodan interaktif, untuk membantu anda mempelajari JavaScript dari awal. Untuk pembangunan web, penggunaannya tidak terhad kepada itu. Ia juga boleh digunakan untuk pengaturcaraan sisi pelayan menggunakan Node.js, untuk pembangunan aplikasi mudah alih menggunakan kerangka seperti React Native dan Ionic, dan untuk membuat aplikasi desktop dengan rangka kerja seperti Electron.

Betapa selamatnya JavaScript?

JavaScript adalah selamat, tetapi seperti mana -mana bahasa pengaturcaraan lain, ia boleh dieksploitasi jika tidak digunakan dengan betul. Adalah penting untuk mengikuti amalan terbaik untuk pengekodan selamat untuk mencegah isu keselamatan yang berpotensi. Ini termasuk mengesahkan dan membersihkan input pengguna, mengelakkan penggunaan eval (), dan mengemas kini dan memeriksa kod anda secara kerap. digunakan untuk membuat animasi di laman web. Ia boleh mengubah sifat CSS elemen HTML dari masa ke masa, mewujudkan kesan animasi. JavaScript juga menyediakan kaedah RequestAnimationFrame, yang direka khusus untuk mewujudkan animasi yang dioptimumkan, pelayar yang licin. antara muka pengaturcaraan untuk dokumen HTML dan XML. Ia mewakili struktur dokumen dan membolehkan bahasa pengaturcaraan seperti JavaScript untuk memanipulasi kandungan, struktur, dan gaya dokumen. daripada percubaan, menangkap, dan akhirnya kenyataan. Blok percubaan mengandungi kod yang mungkin berpotensi membuang ralat, blok tangkapan mengendalikan ralat, dan blok akhirnya mengandungi kod yang dilaksanakan tanpa mengira ralat yang dilemparkan atau tidak.

Atas ialah kandungan terperinci Mengawal laman web dengan javascript dan {x} - sitepoint. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!