Membuat aplikasi realtime dengan Node.js dan MySQL

Pada contoh sebelumnya, Membuat aplikasi real time dengan Node.js data tidak tersimpan secara permanen. Artinya setiap kali server Node.js kita restart, data akan kembali kosong. Untuk bisa menyimpan data yang diinput, kita harus menggunakan database.

Pada artikel kali ini, kita akan menggunakan database MySQL yang sudah cukup terkenal. Teknik yang sama bisa anda gunakan jika anda menggunakan database yang lain.

Proyek yang akan kita buat merupakan kelanjutan dari proyek pada Membuat aplikasi real time dengan Node.js. Jika belum memiliki, silahkan ikuti pada artikel tersebut.

Langkah-langkah membuat aplikasi realtime dengan Node.js dan MySQL

1. Download dan install MySQL.
2. Buat database MySQL seperti script berikut

CREATE TABLE `voting` (
  `id` INTEGER(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(12) COLLATE utf8mb4_general_ci NOT NULL,
  `time` DATETIME NOT NULL DEFAULT current_timestamp(),
  PRIMARY KEY USING BTREE (`id`)
) ENGINE=InnoDB
AUTO_INCREMENT=1 ROW_FORMAT=DYNAMIC CHARACTER SET 'utf8mb4' COLLATE 'utf8mb4_general_ci'
;

3. Setelah kita memiliki database MySQL, yang kita butuhkan selanjutnya adalah driver yang menghubungkan Node.js dengan MySQL.
   Buka CMD pada folder proyek yang kita buat (“C:bardimin), kemudian ketikkan perintah

npm install mysql

4. Langkah berikutnya yang kita lakukan adalah melakukan edit file “server.js
5. Selanjutnya kita tambahkan script untuk koneksi ke MySQL pada file server.js

// Creating MySQL connection.
var sqlCon = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'myDatabase', //Change to your database name
});

6. Ketika server pertama kali di jalankan, kita perlu melakukan query ke tabel voting sebagai data awal dan menetapkan nilai dari variabel “myData.

//Create initial data
var initData = function (_callback) {
    sqlCon.getConnection(function (err, connection) {
        if (err) {
            _callback(false)
        }
        connection.query('SELECT `name`, COUNT(`name`) AS `total` FROM `voting` GROUP BY `name` ORDER BY `name`', function (error, result) {
            connection.release();
            if (!error) {
                myData.akbar = result[0].total;
                myData.goldie = result[1].total;
                _callback(true);
            }
            if (error) {
                _callback(false);
            }
        });
    });
};

7. Dan ketika user melakukan submit, kita melakukan proses penyimpanan pada tabel voting dan melakukan update pada variabel “myData

var addData = function (data, _callback) {
    sqlCon.getConnection(function (err, connection) {
        if (err) {
            _callback(false)
        }
        connection.query('INSERT INTO voting SET name= ?', [data], function (error) {
            connection.release();
            if (!error) {
                if (data === "akbar") {
                    myData.akbar++;
                }
                if (data === "goldie") {
                    myData.goldie++;
                }
                _callback(true);
            }
            if (error) {
                _callback(false);
            }
        });
    });
};

8. Script lengkap dari file server.js adalah sebagai berikut

var app = require("express")();
var http = require('http').Server(app);
var io = require("socket.io")(http);
var mysql = require("mysql");

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

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

// Creating MySQL connection.
var sqlCon = mysql.createPool({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'yii2.socket', //Change to your database name
});

//Global Variable
var myData = {akbar: 0, goldie: 0};
var isInitData = false;

//Create initial data
var initData = function (_callback) {
    sqlCon.getConnection(function (err, connection) {
        if (err) {
            _callback(false)
        }
        connection.query('SELECT `name`, COUNT(`name`) AS `total` FROM `voting` GROUP BY `name` ORDER BY `name`', function (error, result) {
            connection.release();
            if (!error) {
                myData.akbar = result[0].total;
                myData.goldie = result[1].total;
                _callback(true);
            }
            if (error) {
                _callback(false);
            }
        });
    });
};

var addData = function (data, _callback) {
    sqlCon.getConnection(function (err, connection) {
        if (err) {
            _callback(false)
        }
        connection.query('INSERT INTO voting SET name= ?', [data], function (error) {
            connection.release();
            if (!error) {
                if (data === "akbar") {
                    myData.akbar++;
                }
                if (data === "goldie") {
                    myData.goldie++;
                }
                _callback(true);
            }
            if (error) {
                _callback(false);
            }
        });
    });
};

//  This is auto initiated event when Client connects to Your Machien.
io.on("connection", (socket) => {
    console.log("A user is connected");

    if (!isInitData) {
        initData(function (res) {
            if (res) {
                socket.emit('newData', myData);
                isInitData = true;
            } else {
                console.log("Initial data error");
            }
        });
    } else {
        socket.emit('newData', myData);
    }

    socket.on('addData', (data) => {
        addData(data, function (res) {
            if (res) {
                io.emit('newData', myData);
                console.log("Add new data success");
            } else {
                console.log("Add new data error");
            }

        });
    })
});

Selamat mencoba….