Cara Menggunakan Socket.IO dengan NodeJS, ExpressJS, MariaDB

Apa itu Socket.IO?

Socket.IO adalah sebuah library pada javascript yang mempunyai fungsi untuk membangun real-time antara client dan server, misalnya kita punya website yang menampilkan data pegawai dari sebuah perusahaan sebanyak lima orang lalu kita tambahkan satu orang, maka jumlah total pegawai akan menjadi enam orang. Nah pada saat menambahkan orang itulah jika kita menggunakan real-time maka data di website yang semula lima orang akan otomatis berubah menjadi enam orang tanpa perlu mereload website kita terlebih dahulu, kebanyakan sistem-sistem perusahaan sudah menerapkan real-time pada websitenya. Maka dari itu kali ini BapakNgoding akan membuat sebuah tutorial untuk belajar menggunakan Socket.io dan membuat real-time di datatabase menggunakan Socket.IO pada website kita, pada contoh kali ini saya akan menggunakan EJS dan MariaDB seperti tutorial saya sebelum-sebelumnya.

Socket.IO
sumber : https://miro.medium.com/max/2792/1*tWm33yhceKIL22QqOORu2w.png

Nah berikut langkah-langkahnya :

Buat folder baru lalu ketikan perintah pada CMD/Terminal berikut di dalam direktori yang barusan anda buat

npm init
Sekarang setelah mengetikan perintah diatas akan terdapat file package.json.
Masih didalam folder yang sama ketikan perintah berikut

npm install body-parser
npm install ejs
npm install express
npm install socket.io
npm install mariadb
Sekarang kita buat databasenya seperti tutorial-tutorial saya sebelumnya yaitu dengan membuat database sekolah dan di dalamnya terdapat table master_guru seperti gambar berikut

Gambar struktur database sekolah

Gambar field dari table master_guru
Setelah kita membuat database kita akan membuat file di dalam directory yang telah kalian buat tadi
Pertama-tama silahkan buat file db_config.js dan ketiken kode berikut

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "password",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }
Note : Seperti biasa ganti text bewarna merah dengan konfigurasi database anda

Setelah itu buat file app.js dan ketikan kode berikut

const express = require('express')
const app = express()
const bodyParser = require('body-parser')
const http = require('http')
const server = http.createServer(app)
const db = require('./db_config.js')

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')
.get(function (req, res) {
res.render("../views/home.ejs")
})
.post(async function (req, res) {
const result = await db.query('SELECT * FROM master_guru order by GuruID asc')
res.send(result)
})

app.route('/tambah_guru')
.get((req, res) => {
res.render("../views/add_guru.ejs")
})
.post(async (req, res) => {
const { name, mapel } = req.body
const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)
res.json(result)
})

server.listen(3000, () => console.log("Run at localhost:3000"))
Note : Pada contoh diatas saya membuat sebuah route untuk menambah guru dan menampilkannya tanpa socket.io yang artinya belum real-time

Setelah itu buat folder views dan buat folder home.ejs di dalamnya dimana isi file home.ejs adalah sebagai berikut :

<body>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div style="padding: 20">
<h1>Data Guru</h1>
<a href="/tambah_guru">+ Tambah Guru</a>
<table class="table" id="table_guru">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nama</th>
<th scope="col">Mapel</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</body>
<script>
$(document).ready(function () {
const url = "http://localhost:3000/"
$.ajax({
url: url,
method: "POST",
resultType: "JSON",
success: function (result) {
ApiToTable(result)
}
})
})

function ApiToTable(results) {
const table = document.getElementById("table_guru")
for (var t = table.rows.length - 1; t > 0; t--) {
table.deleteRow(t)
}
const result_data = results.data
for (var i = 0; i < result_data.length; i++) {
var data = result_data[i]
console.log()
var row = table.insertRow(i + 1)
var no = row.insertCell(0)
var nama = row.insertCell(1)
var mapel = row.insertCell(2)
no.innerHTML = i + 1
nama.innerHTML = data.Name
mapel.innerHTML = data.Mapel
}
}
</script>
Setelah selesai sekarang buat file lagi didalam folder views dan beri nama add_guru.ejs, lalu ketikan kode berikut

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<div style="padding: 20">
<h1>Tambah Guru +</h1>
<input type="text" placeholder="Nama Guru" id="input_name"> <br /><br />
<input type="text" placeholder="Mapel Guru" id="input_mapel"><br /><br />
<input type="button" id="save_btn" value="Simpan" onclick="tambah_guru()">
</div>
<script>
function tambah_guru() {
const name = document.getElementById("input_name").value
const mapel = document.getElementById("input_mapel").value
$.ajax({
url: 'http://localhost:3000/tambah_guru',
method: "POST",
data: {
name: name,
mapel: mapel,
},
success: function (result) {
if(result.success){
alert("Data berhasil dimasukan")
}else{
alert("Gagal")
}
}
})
}
</script>
Nah sekarang coba buka 2 browser dan jalankan localhost:3000 dan klik tambah guru pada salah satu browser anda lalu tambahkan data, selanjutnya masukan data guru dan klik Simpan setelah itu lihat pada browser satunya apakah data guru baru langsung otomatis tertambah tanpa kita reload terlebih dahulu? jelas tidak kan, maka dari itu kali ini kita akan menambahkan socket.io agar data tersebut langsung tertambah tanpa perlu kita restart

Gambar buka dua browser dan masukan data guru baru seperti gambar sebelah kanan
Sekarang tambahkan kode berikut ke dalam file app.js

const io = require('socket.io')(server)
app.use(function (req, res, next) {
req.io = io;
next();
})
io.on('connection', function (socket) {
console.log('connect')
socket.on('change',async function(socket){
const result = await db.query('SELECT * FROM master_guru order by GuruID asc')
io.emit('new_data',{
data : result.data
})
})
})
Note : Bisa dilihat disana kita mengimport package socket.io yang akan digunakan saat pengimplementasian real-time nanti lalu kita juga membuat perintah kalau saat server menerima parameter change maka socket.io akan langsung mengirim data terbaru. Perlu diingat bahwa emit di socket.io artinya adalah mengirim parameter socket dan on pada socket.io berfungsi sebagai penerima yang artinya jika kita menerima sesuatu maka server harus .....

Lalu sekarang tambahkan juga kode berikut ke dalam file home.ejs

<script src="/socket.io/socket.io.js"></script>
const socket = io();
socket.on('new_data', function (socket_result) {
console.log(socket_result)
ApiToTable(socket_result)
})
Note: Disana kita mengimport package socket.io dengan perintah <script src="/socket.io/socket.io.js"></script> lalu kita memberi fungsi kalau saat kita menerima parameter berupa new_data dari server maka kita akan memanggil fungsi ApiToTable() untuk memasukan data terbaru.

Yang terakhir adalah tambahkan juga kode berikut pada file add_guru.ejs

<script src="/socket.io/socket.io.js"></script>
const socket = io();
socket.emit('change','data')
Note: Tambahkan text bewarna merah ke dalam fungsi tambah_guru() {}, disana kita menyuruh socket.io untuk mengirim parameter berupa change yang nantinya akan direspon oleh server pada penjelasan nomor 10

Setelah selesai sekarang coba buka lagi localhost:3000 dan buka dua browser persis seperti pada nomor 9, lalu masukan data dan tara data akan otomatis menambah tanpa perlu kita reload.

Berikut adalah source code lengkap :

app.js

const express = require('express')

const app = express()

const bodyParser = require('body-parser')

const http = require('http')

const server = http.createServer(app)

const db = require('./db_config.js')

const io = require('socket.io')(server)

app.use(bodyParser.urlencoded({ extended: true }))

app.set('view engine', 'ejs')

app.route('/')

.get(function (req, res) {

res.render("../views/home.ejs")

})

.post(async function (req, res) {

const result = await db.query('SELECT * FROM master_guru order by GuruID asc')

res.send(result)

})

app.route('/tambah_guru')

.get((req, res) => {

res.render("../views/add_guru.ejs")

})

.post(async (req, res) => {

const { name, mapel } = req.body

const result = await db.query(`INSERT INTO master_guru(name,mapel)VALUES('${name}','${mapel}')`)

res.json(result)

})

io.on('connection', function (socket) {

console.log('connect')

socket.on('change', async function (socket) {

const result = await db.query('SELECT * FROM master_guru order by GuruID asc')

io.emit('new_data', {

data: result.data

})

server.listen(3000, () => console.log("Run at localhost:3000"))

home.ejs

<body>

<a href="/tambah_guru">+ Tambah Guru</a>

<thead>

<tr>

<th scope="col">Mapel</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</body>

$(document).ready(function () {

const url = "http://localhost:3000/"

const socket = io();

socket.on('new_data', function (socket_result) {

console.log(socket_result)

ApiToTable(socket_result)

})

$.ajax({

url: url,

method: "POST",

resultType: "JSON",

success: function (result) {

ApiToTable(result)

}

})

function ApiToTable(results) {

const table = document.getElementById("table_guru")

for (var t = table.rows.length - 1; t > 0; t--) {

table.deleteRow(t)

}

const result_data = results.data

for (var i = 0; i < result_data.length; i++) {

var data = result_data[i]

console.log()

var row = table.insertRow(i + 1)

var no = row.insertCell(0)

var nama = row.insertCell(1)

var mapel = row.insertCell(2)

no.innerHTML = i + 1

nama.innerHTML = data.Name

mapel.innerHTML = data.Mapel

}

</script>

add_guru.ejs

<h1>Tambah Guru +</h1>

</div>

function tambah_guru() {

const socket = io();

socket.emit('change','data')

const name = document.getElementById("input_name").value

const mapel = document.getElementById("input_mapel").value

$.ajax({

url: 'http://localhost:3000/tambah_guru',

method: "POST",

data: {

name: name,

mapel: mapel,

success: function (result) {

if(result.success){

alert("Data berhasil dimasukan")

}else{

alert("Gagal")

}

})

}

</script>

db_config.ejs

const mariadb = require('mariadb')
const conn = mariadb.createConnection({
host: "localhost",
user: "root",
database: "sekolah",
password: "rafael",
port: 3307,
});

const query = function (params) {
return new Promise(function (resolve, reject) {
conn.then(async (conn) => {
try {
const result = await conn.query(params)
resolve({
success: true,
data: result
})
} catch (e) {
console.log(e)
reject({
success: false
})
}
})
})
}

module.exports = { query }

Nah itulah beberapa cara untuk membuat real-time pada database dengan menggunakan socket.io pada NodeJS, ExpressJS, dan Database

Sekian dari BapakNgoding dan mohon maaf bila ada kesalahan kata atau apapun itu dan jangan lupa share artikel ini ya, karena dengan begitu kalian telah mensupport blog ini untuk selalu membuat konten-konten yang baru.

BapakNgoding

Monday, December 16, 2019

Cara Menggunakan Socket.IO dengan NodeJS, ExpressJS, MariaDB

Related Posts