Install Pusher Dengan Node JS

Pusher duduk sebagai lapisan waktu nyata antara server Anda dan klien Anda. Pusher mempertahankan koneksi persisten ke klien — melalui WebSocket jika memungkinkan dan kembali ke konektivitas berbasis HTTP — sehingga segera setelah server Anda memiliki data baru yang ingin mereka dorong ke klien, mereka dapat melakukannya, langsung melalui Pusher.

Kita akan membuat aplikasi realtime dengan bantuan pusherJs dan NodeJs sebagai backend.

Menyiapkan proyek NPM Anda

# this will create a directory named nodeJs-pusherJS
mkdir nodeJs-pusherJS# this will change your directory to your newly created directory
cd nodeJs-pusherJS# this will initialize your NPM project with default rules
npm init -y

Kami sekarang telah berhasil membuat proyek NPM, Saatnya menambahkan beberapa dependensi untuk proyek kami.

Menambahkan Dependensi

Sekarang buka terminal Anda, ketik perintah di bawah ini:

npm install --save express body-parser pusher

express - It is to create the web server for the REST API that is going to use.
body-parser - It is a middleware for parsing the body of the request.
pusher - It is to publish changes in realtime.

Sekarang di terminal, ketik perintah di bawah ini:

npm install --save-dev nodemon

nodemon adalah alat yang membantu mengembangkan aplikasi berbasis node.js dengan secara otomatis memulai ulang aplikasi node ketika perubahan file dalam direktori terdeteksi.

Tambahkan skrip di file package.json sehingga kita tidak perlu me-restart server setelah perubahan.

"scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
}

File package.json terakhir akan mirip dengan:

{ "name": "pusherjs",
 "version": "1.0.0",
 "description": "",
 "main": "server.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "start": "node server.js",
 "dev": "nodemon server.js"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
  "body-parser": "^1.19.0",
  "express": "^4.17.1",
  "pusher": "^2.2.1"
 },
 "devDependencies": {
 "nodemon": "^1.19.1"
 }
 }

Menyiapkan Direktori Proyek

Sekarang kita akan mengatur struktur proyek kita untuk memiliki beberapa file awal. Direktori proyek kami akan terlihat mirip dengan:

|____node_modules
|____public
|______index.html
|______client.js
|____package-lock.json
|____package.json
|____server.js

Sesuai struktur proyek ini, Anda harus membuat folder dan file, jika tidak ada. Jangan khawatir jika Anda tidak mendapatkannya, setelah selesai, Anda akan mendapatkannya.

Pertama-tama, kita perlu membuat file server.js yang dapat menampung kode sisi server kita.

Jadi buat server.js di direktori root dan masukkan kode yang ditampilkan untuk membuat server ekspres dasar.

const express = require('express');
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.static('public'));app.get('/', (request, response) => {
  
});app.listen(3000, () => {
  console.log('Express intro running on localhost:3000');
});

Kemudian tambahkan middleware express.static ke bagian statis server dari server.

app.use(express.static('public'));

Sekarang buat folder baru di direktori root bernama public dan kemudian buat file baru bernama index.html dan letakkan kode yang ditunjukkan di bawah ini

<!DOCTYPE html>
<html>
<head>
   <title>PusherJs Application</title>
</head>
<body>
<h2>Add Book </h2>
   <form id="book-form" >
   Book name: <br>
   <input type="text" id="book-name" name="bookname"     placeholder="Book Name">
<br>
<input type="submit" value="Submit">
</form>
<h1> Books <h1>
<div class="book-list" id="books-list"></div>
<script src='./client.js'></script>
</body>
</html>

Sekarang mulai server dengan menulis kode ini di terminal

npm run dev

Kemudian buka localhost:3000 di browser Anda, dan Anda akan melihat:

Buat Kredensial Pendorong

Jika Anda belum melakukannya, buat akun pusher di Pusher.

Kemudian, buka dasbor Anda dan buat aplikasi Saluran, pilih nama, kluster yang paling dekat dengan lokasi Anda, dan secara opsional, Bereaksi sebagai teknologi frontend dan Node.js sebagai teknologi backend:

Ini akan memberi Anda beberapa kode contoh untuk memulai:

Simpan nilai id aplikasi, kunci, rahasia, dan cluster Anda. Kami akan membutuhkannya nanti.

Gunakan Pendorong Di Sisi Server dan Klien

Sekarang tambahkan kode ini di server.js untuk membuat instance Pusher

var Pusher = require('pusher');//create a instance of pusher using your credentials
var pusher = new Pusher({
  appId: API_ID,
  key: API_KEY,
  secret: API_SECRET,
  cluster: 'ap2',
  encrypted: true
});

Sekarang juga tambahkan pendorong di sisi klien dengan menambahkan skrip ini di file html

<script src="https://js.pusher.com/4.4/pusher.min.js"></script>

Setelah ini buat file client.js di direktori publik dan tulis kode untuk membuat instance pusher di sisi klien. Karena kita sudah menambahkan skrip pendorong di html sehingga kita bisa menggunakan di client.js

//  To make Channels a bit more chatty about what is coming in via // the socket connection
Pusher.logToConsole = true;var pusher = new Pusher(api_key, {
      cluster: 'ap2',
    });

Setelah ini buat rute permintaan posting baru "/ post" di server untuk menangani permintaan penambahan buku baru. Sebelum itu buatlah array kosong bernama books untuk menyimpan nama-nama buku.

//create a variable to store books name
var books = [] ;//create a new route to update books name 
app.post('/post',(req,res)=>{
//add new book from body to array of books
   books.push(req.body.book);
//trigger  a event in a channel with json object
   pusher.trigger('channel-name', 'event-name', {
       data: books
  });//send respone for this route 
   res.json({
       message : "Book added succesfully"})
  })

Setiap kali rute ini mendapatkan panggilan pusher akan memicu acara yang disebut tambahkan di pos saluran dengan objek buku dan mengirim objek pesan JSON.

Sekarang tambahkan pendengar acara pada pengiriman formulir di client.js. Saat mengirimkan formulir, ini akan memanggil rute '/ post' menggunakan fetch api dan metodenya adalah POST. kami juga akan mengirimkan nama buku dengan api di badan.

var bookForm = document.getElementById("book-form");//add a event Listener on form submit bookForm.addEventListener("submit",addbook);const addbook =(e)=>{
e.preventDefault();//store name of new book in a variable 
const newBook = document.getElementById('book-name').value; //call route '/post' to trigger event with new book fetch("http://localhost:3000/post",{
    method:"POST",
    headers: {
        Content-Type: 'application/json'
       },
   body :JSON.stringify({
        book : newBook
       })
   })
  .then(res=>res.json())
  .then(json=>{
    console.log(json.message)
   })
}

Sekarang pada pengajuan pendorong buku baru memicu peristiwa dengan objek yang berisi daftar buku yang diperbarui di saluran yang disebut pos. Jadi kita harus berlangganan saluran itu. Untuk mendapatkan buku dari saluran itu, kita harus mengikat saluran itu dengan acara oleh saluran.bind() dan menggunakan fungsi panggilan balik untuk menggunakan data yang dilampirkan dengan acara. Untuk memeriksa apakah data itu benar atau salah, kami akan mengkonsol data tersebut.

//subscribe the channel to bind events of channel
var channel = pusher.subscribe('channel-name');//bind the event of the presence channel to get the data attched //with it channel.bind('add', function(data) {
       console.log(data.books)
});

Setelah ini tambahkan skrip jquery di akhir file html kami sehingga kami dapat merender nama buku kami di daftar buku kelas.

<script src='https://code.jquery.com/jquery-2.2.1.min.js', integrity='sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00=', crossorigin='anonymous'></script>

Sekarang di fungsi channel.bind() merender elemen terakhir sehingga setiap kali sebuah buku baru akan ditambahkan, kita dapat melihatnya di bawah bagian Buku.

//render the data of a event in division using jQuery
var length = data.books.length;
$('#books-list').append($('<li>').html('<b>'+data.books[length-1]+'</b>'));

Pratinjau

Untuk melihat pratinjau aplikasi, Cukup buka terminal Anda di direktori proyek dan ketik perintah di bawah ini-

npm run dev

Jika semuanya berjalan dengan baik, aplikasi akan dijalankan di localhost:3000 (port Anda mungkin berbeda, untuk itu periksa log konsol server Anda).

Jika Anda menyukai artikel ini, Silakan share dan jika Anda memiliki pertanyaan tentang PusherJs, NodeJS, dan pengaturan ini, silakan tulis di kolom Komentarya!