Membuat Notifikasi Real Time Sederhana Menggunakan Nodejs dan Yii2

ByYusuf Ayuba

Membuat Notifikasi Real Time Sederhana Menggunakan Nodejs dan Yii2

Sebenarnya sudah banyak artikel-artikel yang membahas tentang bagaimana cara membuat notifikasi secara real time menggunakan nodejs ataupun library-library lainnya. Hanya saja kebanyakan artikel tersebut masih terdapat kekurangan yaitu pesan-pesan yang dikirim tidak tersimpan permanen sehingga ketika user offline dan online kembali, pesan-pesan tersebut hilang.
Oleh karenanya, dalam artikel ini saya mencoba membuat aplikasi serupa tetapi pesan-pesan yang dikirim akan tersimpan dalam database. Sehingga walaupun user offline dan online di kembali, pesan-pesan yang dikirim sebelumnya tetap bisa dilihat. Database yang saya gunakan adalah Postgres. Silahkan disesuaikan dengan database yang digunakan masing-masing.

FYI, walaupun dalam artikel ini saya menggunakan Yii2, tapi dengan cara yang sama kita juga bisa menerapkan artikel ini di framework lainnya ataupun PHP natif.

Next, berikut langkah-langkah membuatnya
1. Install Yii2 (bisa menggunakan basic template ataupun advancend template).

composer create-project yiisoft/yii2-app-basic yii2-nodejs 2.0.9
  1. Install NodeJS. Download file installasi NodeJS di website ini . Silahkan pilih dan sesuai dengan OS yang digunakan.
  2. Buatlah tabel bernama history (nama tabel menyesuaikan). Tabel ini nantinya akan digunakan untuk menyimpan history/log dari setiap aktifitas. Untuk mempercepat, jalankan perintah migration dari command prompt.
<?php

use yii\db\Schema;

class m160804_160101_history extends \yii\db\Migration
{
    public function up()
    {
        $tableOptions = null;
        if ($this->db->driverName === 'mysql') {
            $tableOptions = 'CHARACTER SET utf8 COLLATE utf8_general_ci ENGINE=InnoDB';
        }
        
        $this->createTable('history', [
            'id' => Schema::TYPE_PK,
            'users' => Schema::TYPE_STRING . '(10) NOT NULL',
            'message' => Schema::TYPE_TEXT . ' NOT NULL',
            'tanggal' => Schema::TYPE_TIMESTAMP,
        ], $tableOptions);
    }

    public function down()
    {
        $this->dropTable('history');
    }
}

Note: saya menggunakan Migration Tools buatan om MDMunir untuk menghasilkan script migration table diatas.

  1. Membuat script NodeJS

Buatlah folder kosong bernama nodejs (nama folder menyesuaikan) yang digunakan untuk menyimpan script nodejs. Folder ini bisa berada di dalam folder root projek kita ataupun berada di luar folder/folder projek lain. Setelah itu, masuk ke  folder tersebut, dan ketikkan perintah berikut lewat command prompt/cli.

npm install express
npm install socket.io

Setelah itu masih dalam folder yang sama, buat file baru bernama server.js (nama file menyesuaikan) yang isinya:

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

io.on('connection', function(socket){
    console.log('new client connected');
    socket.on('disconnet', function(){
        console.log('a client disconnect'); 
    })
    socket.on('notif',function(msg){
        console.log('message: '+msg.name+ ': ' + msg.message);
        io.emit('notif', {name: msg.name, message: msg.message});
    })
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

Lakukan tes dengan cara menjalankan script tersebut dengan mengetikkan perintah berikut di command prompt/cli. Dan jika tidak error tampilannya akan seperti gambar dibawah ini. Tekan tombol CTRL+C untuk exit.

node server.js

  1. Edit file config/db.php sesuai dengan konfigurasi database masing-masing.
return [
    'class' => 'yii\db\Connection',
    'dsn' => 'pgsql:host=localhost;dbname=test',
    'username' => 'user_database',
    'password' => 'password_database',
    'charset' => 'utf8',
];
  1. Buat file baru di web/js/notif.js yang isinya seperti berikut
$( document ).ready(function() {
    var socket = io.connect('http://localhost:3000');
    socket.on('notif', function (data) {
        $( "#notifikasi" ).prepend( "<p><strong>" + data.name + "</strong>: " + data.message + "</p>" );
        $.notify("<strong>" + data.name + "</strong>: " + data.message);
    });
});
  1. Edit file assets/AppAsset, tambahkan baris berikut:
public $js = [
  'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js',
  'js/bootstrap-notify.min.js',
];
  1. Edit fungsi actionIndex di file controllers/SiteController.php dan tambahkan fungsi actionHistory seperti berikut:
public function actionIndex()
{
  $model = new \app\models\History();
  if (Yii::$app->request->post()) {
    $model->users = Yii::$app->request->post('nick_name');
    $model->message = Yii::$app->request->post('message');
    $model->tanggal = date('Y-m-d H:i:s');
    $model->save();
  }
  return $this->render('index');
}

public function actionHistori()
{
   $temp = \app\models\History::find()
               ->orderBy(['id' => SORT_DESC])
               ->all();
   foreach ($temp as $value) {
      echo "<p><strong>".$value->users."</strong>: ".$value->message."</p>";
   }
}
  1. Edit file views/site/index.php menjadi seperti berikut:
<?php

use yii\helpers\Html;
use yii\helpers\Url;

$this->title = 'Yii2::NodeJS';
$url = [
    'histori' => Url::to(['histori'])
];

$this->registerJs('var url = '.json_encode($url).';');
$js = <<<JS
var socket = io.connect( 'http://localhost:3000');
    $('#chat-form').submit(function() {
        var nama = $("#nick_name").val();
        var msg = $("#message-field").val();
        var form = $(this);
        $.ajax({
            url: form.attr('action'),
            type: 'post',
            data: form.serialize(),
            success: function (response) {
                $("#message-field").val("");
            }
        });
        socket.emit('notif',{ name: nama, message: msg});
        return false;
    });
JS;
$this->registerJs($js, \yii\web\View::POS_READY)
?>
<div class="site-index">
    <div class="body-content">
        <div class="well col-lg-8 col-lg-offset-2">
            <div class="row">
                <?php echo Html::beginForm(['/site/index'], 'POST', [
                                'id' => 'chat-form'
                            ]) ?>
                    <div class="row">
                        <div class="col-xs-3">
                            <div class="form-group">
                                <?php echo Html::textInput('nick_name', null, [
                                            'class' => 'form-control',
                                            'id' => 'nick_name',
                                            'placeholder' => 'Nick Name'
                                        ]); ?>
                            </div>
                        </div>
                        <div class="col-xs-7">
                            <div class="form-group">
                                <?php echo Html::textInput('message', null, [
                                            'id' => 'message-field',
                                            'class' => 'form-control',
                                            'placeholder' => 'Message'
                                        ]) ?>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            <div class="form-group">
                                <?php echo Html::submitButton('Send', [
                                'class' => 'btn btn-block btn-success'
                                ]) ?>
                            </div>
                        </div>
                    </div>
                <?= Html::endForm() ?>
                <div id="notifikasi" ></div>
            </div>  
        </div>      
    </div>
</div>

  1. Download library Bootstrap Notify dari website ini. Kemudian extact file JS-nya ke folder web/js
  2. Setelah selesai semuanya, maka sekarang waktunya kita test aplikasi kita apakah berhasil atau tidak. Yang pertama aktifkan script server.js. Setelah itu buka browser dan jalan aplikasi. Jika tidak terdapat error, maka tampilannya akan seperti berikut.

Sekian tutorial kali ini.

Demo

Referensi

About the author

Yusuf Ayuba administrator

2 Comments so far

fuadPosted on5:43 pm - Oct 21, 2016

can u show how to send to a specific user ?

Leave a Reply

%d bloggers like this: