Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Node.js

Cara Membuat Aplikasi Olahraga Real-Time Menggunakan Node.js

by
Read Time:17 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Dalam artikel hari ini saya akan mendemonstrasikan cara membuat aplikasi web yang akan menampilkan skor pertandingan langsung dari NHL. Skor akan diperbarui secara otomatis saat permainan berlangsung.

Ini adalah artikel yang sangat menarik bagi saya, karena ini memungkinkan saya berkesempatan untuk membawa dua gairah favorit saya bersama: pengembangan dan olahraga.

Teknologi yang akan digunakan untuk membuat aplikasi adalah:

  1. Node.js
  2. Socket.io
  3. MySportsFeed.com

Jika Anda belum menginstal Node.js, kunjungi halaman unduhan mereka sekarang dan konfigurasikan sebelum melanjutkan.

Apa itu Socket.io?

Socket.io adalah teknologi yang menghubungkan klien ke server. Dalam contoh ini, klien adalah browser web dan server adalah aplikasi Node.js. Server dapat memiliki beberapa klien yang terhubung dengannya pada waktu tertentu.

Setelah koneksi dibuat, server dapat mengirim pesan ke semua klien atau klien individu. Sebagai imbalannya, klien dapat mengirim pesan ke server, memungkinkan untuk komunikasi dua arah real-time.

Sebelum Socket.io, aplikasi web biasanya menggunakan AJAX, dan klien dan server akan saling mencari peristiwa. Misalnya, setiap 10 detik panggilan AJAX akan muncul untuk melihat apakah ada pesan yang harus ditangani.

Polling untuk pesan menyebabkan jumlah overhead yang signifikan pada klien dan server karena akan terus mencari pesan ketika tidak ada.

Dengan Socket.io, pesan diterima secara instan, tanpa perlu mencari pesan, mengurangi biaya overhead.

Contoh Aplikasi Socket.io

Sebelum kita menggunakan data olahraga real-time, mari kita buat contoh aplikasi untuk menunjukkan bagaimana Socket.io bekerja.

Untuk memulai, saya akan membuat aplikasi Node.js baru. Di jendela konsol, saya akan menavigasi ke C:\GitHub\NodeJS, buat folder baru untuk aplikasi saya, dan buat aplikasi baru:

Saya menggunakan semua pengaturan default.

Karena kami membuat aplikasi web, saya akan menggunakan paket NPM yang disebut Express untuk menyederhanakan pengaturan. Pada prompt perintah, instal sebagai berikut: npm install express --save

Dan tentu saja kita perlu menginstal paket Socket.io: npm install socket.io --save

Mari kita mulai dengan membuat server web. Buat file baru bernama index.js dan tempatkan kode berikut di dalamnya untuk membuat server web menggunakan Express:

Jika Anda tidak terbiasa dengan Express, contoh kode di atas menyertakan pustaka Express dan membuat server HTTP baru. Dalam contoh ini, server HTTP mendengarkan pada port 3000, mis. http://localhost:3000. Rute dibuat di akar situs "/". Hasil rute mengembalikan file HTML: index.html.

Sebelum kita membuat file index.html, mari kita selesaikan server dengan mengatur Socket.io. Tambahkan yang berikut ini ke file index.js Anda untuk membuat server Socket:

Mirip dengan Express, kode dimulai dengan mengimpor perpustakaan Socket.io. Ini disimpan dalam variabel yang disebut io. Selanjutnya, menggunakan variabel io, pengendali event dibuat dengan fungsi on. Acara yang disimak adalah koneksi. Peristiwa ini disebut setiap kali klien terhubung ke server.

Sekarang mari kita ciptakan klien dasar kita. Buat file baru bernama index.html dan tempatkan kode berikut dalam:

HTML di atas memuat klien Socket.io JavaScript dan menginisialisasi koneksi ke server. Untuk melihat contoh, mulai aplikasi Node Anda: node index.js

Kemudian, di browser Anda, arahkan ke http://localhost:3000. Tidak ada yang akan muncul di halaman; namun, jika Anda melihat konsol tempat aplikasi Node berjalan, dua pesan dicatat:

  1. Server HTTP yang dimulai pada port 3000
  2. Koneksi klien diterima

Sekarang kita memiliki koneksi socket yang sukses, mari kita gunakan. Mari kita mulai dengan mengirim pesan dari server ke klien. Kemudian, ketika klien menerima pesan, itu dapat mengirim balasan kembali ke server.

Mari kita lihat file index.js yang disingkat:

Fungsi io.on sebelumnya telah diperbarui untuk menyertakan beberapa baris kode baru. Yang pertama, socket.emit, mengirim pesan ke klien. SendToClient adalah nama acara. Dengan menamai acara, Anda dapat mengirim berbagai jenis pesan sehingga klien dapat menafsirkannya secara berbeda. Penambahan kedua adalah socket.on, yang juga berisi nama acara: receivedFromClient. Ini menciptakan fungsi yang menerima data dari klien. Dalam hal ini, data dicatat ke jendela konsol.

Itu melengkapi amandemen sisi server; sekarang dapat mengirim dan menerima data dari klien yang terhubung.

Mari lengkapi contoh ini dengan memperbarui klien untuk menerima peristiwa sendToClient. Ketika menerima acara, ia dapat merespon dengan event receivedFromClient yang diterima kembali ke server.

Ini dilakukan dalam bagian JavaScript dari HTML, jadi di file index.html, saya telah memperbarui JavaScript sebagai berikut:

Menggunakan variabel soket instantiated, kami memiliki logika yang sangat mirip pada server dengan fungsi socket.on. Untuk klien, itu mendengarkan acara sendToClient. Begitu klien terhubung, server mengirim pesan ini. Ketika klien menerimanya, itu login ke konsol di browser. Klien kemudian menggunakan socket.emit yang sama. Itu adalah server yang digunakan untuk mengirim acara asli. Dalam hal ini, klien mengirimkan kembali acara receivedFromClient ke server. Ketika server menerima pesan, itu login ke jendela konsol.

Mencobanya untuk diri sendiri. Pertama, di konsol, jalankan aplikasi Node: node index.js. Kemudian memuat http://localhost:3000 di browser Anda.

Lihat konsol browser web dan Anda harus melihat data JSON berikut login: {hello: "world"}

Kemudian, pada prompt perintah di mana aplikasi Node sedang berjalan, Anda akan melihat yang berikut:

Baik klien dan server dapat menggunakan data JSON yang diterima untuk melakukan tugas-tugas tertentu. Kami akan mempelajari lebih lanjut tentang hal itu setelah kami terhubung ke data olahraga waktu nyata.

Data Olahraga

Sekarang setelah kami menguasai cara mengirim dan menerima data ke dan dari klien dan server, ini dapat dimanfaatkan untuk menyediakan pembaruan waktu nyata. Saya memilih untuk menggunakan data olahraga, meskipun teori yang sama tidak terbatas pada olahraga. Sebelum saya memulai proyek ini, saya meneliti data olahraga yang berbeda. Yang saya setujui, karena mereka menawarkan akun pengembang gratis, adalah MySportsFeeds (saya tidak berafiliasi dengan mereka dengan cara apa pun). Untuk mengakses data real-time, saya mendaftar untuk sebuah akun dan kemudian membuat sumbangan kecil. Sumbangan mulai dari $1 untuk memperbarui data setiap 10 menit. Ini akan baik untuk contoh.

Setelah akun Anda disiapkan, Anda dapat melanjutkan untuk mengatur akses ke API mereka. Untuk membantu ini, saya akan menggunakan paket NPM mereka: npm install mysportsfeeds-node --save

Setelah paket telah diinstal, panggilan API dapat dibuat sebagai berikut:

Dalam contoh di atas, pastikan untuk mengganti panggilan ke fungsi otentikasi dengan nama pengguna dan kata sandi Anda.

Kode berikut mengeksekusi panggilan API untuk mendapatkan papan skor NHL untuk hari ini. Variabel fordate adalah yang menentukan hari ini. Saya juga telah menetapkan force to true sehingga respons selalu dikembalikan, bahkan ketika data tidak berubah.

Dengan pengaturan saat ini, hasil panggilan API ditulis ke file teks. Dalam contoh terakhir, ini akan diubah; Namun, untuk tujuan demonstrasi, file hasil dapat ditinjau dalam editor teks untuk memahami isi dari respons. Hasilnya berisi objek papan skor. Objek ini berisi larik yang disebut gameScore. Objek ini menyimpan hasil dari setiap game. Setiap objek berisi objek anak yang disebut game. Objek ini memberikan informasi tentang siapa yang bermain.

Di luar objek permainan, ada beberapa variabel yang menyediakan kondisi permainan saat ini. Perubahan data berdasarkan keadaan permainan. Misalnya, ketika gim belum dimulai, hanya ada beberapa variabel yang memberi tahu kami gim tidak sedang berlangsung dan belum dimulai.

Saat gim berlangsung, disediakan data tambahan tentang skor, periode permainan, dan berapa lama waktu yang tersisa. Kami akan melihat ini dalam tindakan ketika kami sampai ke HTML untuk menunjukkan permainan di bagian berikutnya.

Real-Time Update

Kami memiliki semua potongan teka-teki, jadi sekarang saatnya untuk mengumpulkan teka-teki untuk mengungkapkan gambar terakhir. Saat ini, MySportsFeeds memiliki dukungan terbatas untuk mendorong data ke kami, jadi kami harus mengumpulkan data dari mereka. Untungnya, kami tahu bahwa data hanya berubah setiap 10 menit, jadi kami tidak perlu menambahkan overhead dengan polling untuk perubahan terlalu sering. Setelah kami mengumpulkan data dari mereka, kami dapat mendorong pembaruan tersebut dari server ke semua klien yang terhubung.

Untuk melakukan polling, saya akan menggunakan fungsi JavaScript setInterval untuk memanggil API (dalam kasus saya) setiap 10 menit untuk mencari pembaruan. Ketika data diterima, acara dikirim ke semua klien yang terhubung. Ketika klien menerima acara, skor pertandingan akan diperbarui dengan JavaScript di browser web.

MySportsFeeds juga akan dipanggil ketika aplikasi Node pertama dijalankan. Data ini akan digunakan untuk setiap klien yang terhubung sebelum interval 10 menit pertama. Ini disimpan dalam variabel global. Variabel global yang sama ini diperbarui sebagai bagian dari jajak pendapat interval. Ini akan memastikan bahwa ketika ada klien baru yang terhubung setelah polling, mereka akan memiliki data terbaru.

Untuk membantu dengan beberapa kebersihan kode di file index.js utama, saya telah membuat file baru bernama data.js. File ini akan berisi fungsi yang diekspor (tersedia di file index.js) yang melakukan panggilan sebelumnya ke API MySportsFeeds. Berikut ini isi lengkap file itu:

Fungsi getData diekspor dan mengembalikan hasil panggilan, yang dalam hal ini adalah Janji yang akan diselesaikan dalam aplikasi utama.

Sekarang mari kita lihat isi akhir index.js file:

Tujuh baris pertama kode di atas instantiate perpustakaan yang diperlukan dan variabel global latestData. Daftar pustaka terakhir yang digunakan adalah: Express, Http Server dibuat dengan Express, Socket.io, dan file data.js yang baru saja dibuat.

Dengan kebutuhan diurus, aplikasi mengisi latestData untuk klien yang akan terhubung ketika server pertama kali dimulai:

Beberapa baris berikutnya mengatur rute untuk halaman root website (http://localhost:3000/) dan mulai server HTTP untuk mendengarkan pada port 3000.

Selanjutnya, Socket.io diatur untuk mencari koneksi. Ketika koneksi baru diterima, server memancarkan suatu kejadian yang disebut data dengan isi dari variabel latestData.

Dan akhirnya, bagian terakhir dari kode menciptakan interval polling. Ketika interval terjadi, variabel latestData diperbarui dengan hasil panggilan API. Data ini kemudian memancarkan acara data yang sama ke semua klien.

Anda mungkin memperhatikan bahwa ketika klien terhubung dan suatu peristiwa diemisikan, itu memancarkan peristiwa dengan variabel soket. Pendekatan ini akan mengirim peristiwa hanya kepada klien yang terhubung. Di dalam interval, global io digunakan untuk memancarkan acara. Ini akan mengirim acara ke semua klien.

Itu melengkapi server. Mari bekerja di bagian depan klien. Dalam contoh sebelumnya, saya membuat file index.html dasar yang mengatur koneksi klien yang akan mencatat peristiwa dari server dan mengirimnya kembali. Saya akan memperluas file yang berisi contoh yang sudah selesai.

Karena server mengirimkan objek JSON kepada kami, saya akan menggunakan jQuery dan memanfaatkan ekstensi jQuery bernama JsRender. Ini adalah perpustakaan templating. Ini akan memungkinkan saya untuk membuat template dengan HTML yang akan digunakan untuk menampilkan isi setiap pertandingan NHL dengan cara yang mudah digunakan, konsisten. Sebentar lagi, Anda akan melihat kekuatan perpustakaan ini. Kode terakhir lebih dari 40 baris kode, jadi saya akan memecahnya menjadi potongan yang lebih kecil, dan kemudian menampilkan HTML lengkap bersama di bagian akhir.

Bagian pertama ini membuat template yang akan digunakan untuk menampilkan data game:

Template didefinisikan menggunakan tag skrip. Ini berisi id template dan jenis skrip khusus yang disebut text/x-jsrender. Template mendefinisikan div kontainer untuk setiap game yang berisi permainan kelas untuk menerapkan beberapa gaya dasar. Di dalam div ini, template dimulai.

Di div berikutnya, tim tamu dan tuan rumah ditampilkan. Ini dilakukan dengan menggabungkan nama kota dan tim bersama-sama dari objek permainan dari data MySportsFeed.

{{:game.awayTeam.City}} adalah cara saya mendefinisikan objek yang akan diganti dengan nilai fisik saat template dirender. Sintaks ini didefinisikan oleh pustaka JsRender.

Setelah tim ditampilkan, potongan kode berikutnya melakukan beberapa logika kondisional. Ketika permainan unPlayed, string akan dikeluarkan bahwa permainan akan dimulai pada {{:game.time}}.

Ketika permainan tidak selesai, skor saat ini ditampilkan: Skor Current Score: {{:awayScore}} - {{:homeScore}}. Dan akhirnya, beberapa logika kecil yang sulit untuk mengidentifikasi periode apa permainan hoki berada atau jika sedang istirahat.

Jika variabel currentIntermission disediakan dalam hasil, maka saya menggunakan fungsi yang saya tetapkan disebut ordinal_suffix_of, yang akan mengubah nomor periode untuk dibaca: 1 (2, 3, dll.) Intermission.

Ketika tidak dalam istirahat, saya mencari currentPeriod. Ini juga menggunakan ordinal_suffix_of untuk menunjukkan bahwa permainan berada di periode 1 (2, 3, dll.).

Di bawah ini, fungsi lain yang saya definisikan disebut time_left digunakan untuk mengonversi jumlah detik yang tersisa menjadi jumlah menit dan detik yang tersisa dalam periode tersebut. Misalnya: 10:12.

Bagian terakhir dari kode menampilkan skor akhir karena kita tahu permainan telah selesai.

Berikut ini adalah contoh dari apa yang terlihat ketika ada campuran game yang sudah selesai, dalam game yang sedang berlangsung, dan game yang belum dimulai (saya bukan desainer yang sangat baik, sehingga terlihat seperti yang Anda harapkan ketika pengembang membuat Antarmuka Pengguna mereka sendiri).

An example of finished gamesAn example of finished gamesAn example of finished games

Selanjutnya adalah sepotong JavaScript yang menciptakan soket, fungsi pembantu ordinal_suffix_of dan time_left, dan variabel yang merujuk ke template jQuery yang dibuat.

Potongan terakhir dari kode adalah kode untuk menerima kejadian socket dan membuat template:

Saya memiliki div placeholder dengan id data. Hasil dari template rendering (tmpl.render) menulis HTML ke wadah ini. Yang benar-benar rapi adalah bahwa pustaka JsRender dapat menerima berbagai data, dalam hal ini data.scoreboard.gameScore, yang mengiterasi setiap elemen dalam larik dan membuat satu gim per elemen.

Berikut ini adalah HTML dan JavaScript final bersama-sama:

Jalankan aplikasi Node dan browse ke http://localhost:3000 untuk melihat hasilmu!

Setiap X menit, server akan mengirim acara ke klien. Klien akan menggambar ulang elemen permainan dengan data yang diperbarui. Jadi ketika Anda meninggalkan situs terbuka dan secara berkala melihatnya, Anda akan melihat penyegaran data game saat game sedang berlangsung.

Kesimpulan

Produk akhir menggunakan Socket.io untuk membuat server yang terhubung dengan klien. Server mengambil data dan mengirimkannya ke klien. Ketika klien menerima data, ia dapat memperbarui tampilan secara mulus. Ini mengurangi beban di server karena klien hanya melakukan pekerjaan ketika menerima acara dari server.

Soket tidak terbatas pada satu arah; klien juga dapat mengirim pesan ke server. Ketika server menerima pesan, ia dapat melakukan beberapa pemrosesan.

Aplikasi obrolan biasanya bekerja dengan cara ini. Server akan menerima pesan dari klien dan kemudian disiarkan ke semua klien yang terhubung untuk menunjukkan bahwa seseorang telah mengirim pesan baru.

Semoga Anda menikmati artikel ini karena saya memiliki ledakan menciptakan aplikasi olahraga real-time ini untuk salah satu olahraga favorit saya!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.