Membuat aplikasi real time dengan Node.js

5 September 2021

Home » Blog » Teknologi » Membuat aplikasi real time dengan Node.js

adalah runtime environment untuk JavaScript yang bersifat open-source dan cross-platform. Dengan kita dapat menjalankan kode JavaScript di mana pun, tidak hanya terbatas pada lingkungan .

Node.js pertama kali diciptakan dan diperkenalkan untuk pengguna pada sistem pada tahun 2009. dikembangkan oleh Ryan Dahl dan disponsori oleh Joyent, perusahaan tempat ia bekerja.

Dengan Node.js kita bisa membuat real time dengan mudah. Bagaimana caranya???

Pada artikel kali ini, kita akan membuat pemilihan untuk memilih ketua, bisa ketua kelas, ketua RT?RW atau terserah apa aja deh…… Hasil pemilihan akan tampil secara real time, dimana setiap ada anggota yang meberikan pilihan akan melakukan update ke semua halaman hasil pemilihan yang sedang dibuka oleh pengguna.

TOP TUTORIALS:  Cara rename file Windows secara massal

Langka-langkah membuat aplikasi real time dengan Node.j

  1. Download dan instal Node.js. Pilih dan sesuaikan dengan OS yang anda gunakan.
  2. Buat folder kosong untuk menyimpan proyek.
    Folder ini akan kita gunakan untuk meyimpan script node.js dan juga sebagai root dari proyek kita.
    Sebagai contoh, kita buat folder dengan nama “bardimin” pada dive “C”.
  3. Buat file dengan nama “package.json” pada “C:bardimin” dan salin kode berikut
{
  "name": "Belajar_aplikasi_realtime",
  "description": "Belajar aplikasi realtime dengan Node.JS",
  "version": "1.0.0",
  "license": "MIT",
  "repository": "https://github.com/",
  "dependencies": {
    "express": "latest",
    "socket.io": "latest"
  }
}
  1. Kemudian buka command promt/ dan masuk ke “C:bardimin”. Ketikkan perintah sebagai berikut
npm install

Setelah proses selesai, akan terlihat struktur direktori seperti gambar berikut ini

TOP TUTORIALS:  Cara Menambahkan debug symbol ke build.gradle
nodejs 01
  1. Langkah berikutnya, buat file “server.js” pada folder yang telah anda buat dan salin kode berikut
var app = require("express")();
var http = require('http').Server(app);
var io = require("socket.io")(http);

//Listening port
http.listen(3000, function () {
    console.log("Listening on 3000");
});

//html file
app.get("/", function (req, res) {
    res.sendFile(__dirname + '/index.html');
});

//Global Variable
const myData = {akbar: 0, goldie: 0};

/*  This is auto initiated event when Client connects to Your Machien.  */
io.on("connection", (socket) => {
    console.log("A user is connected");
    socket.emit('newData', myData);
    socket.on('addData', (data) => {
        if (data === "akbar") {
            myData.akbar++;
        } else {
            myData.goldie++;
        }
        io.emit('newData', myData);
    })
});
  1. Selanjutnya, anda buka kembali dan ketikkan perintah “node server.js”. Jika semua sudah benar akan tampil seperti ini
nodejs 02
  1. Langkah terakhir adalah anda buat file “index.html”, masih dalam folder yang sama dan salin kode berikut


    Pemilihan Ketua
    
    
    
    


Pemilihan Ketua
Calon Ketua Hasil Voting
Akbar
Goldie
Pilih Calon Anda:
  1. Pembuatan sudah selesai. Sekarang saatnya untuk menguji apakah sudah berjalan.
TOP TUTORIALS:  Cara Menjalankan Aplikasi Dengan Prioritas Tinggi di Windows

Pengujian Aplikasi

  • Aktifkan kembali server seperti pada langkah ke 6, dengan perintah “node server.js” pada .
  • Selanjutnya buka anda dan akses url “http://localhost:3000/”.
  • Buka lagi url “http://localhost:3000/” pada tab baru atau lain.
nodejs 03
  • Anda akan melihat ketika salah satu melakukan submit data, maka semua jendela yang terbuka akan melakukan update secara otomatis. Dan pada console CMD anda dapat membuat notifikasi sesuai dengan yang anda perlukan.

Terimakasih telah membaca…Semoga bermanfaat……

0 Komentar