Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana membuat chat message real time menggunakan socket.io, redis, express dan nodejs di Laravel. socket.io melalui kita dapat membuat modul chat real time di aplikasi Laravel kita. saya tunjukkan dari awal karena Anda dapat menginstal nodejs dan paket-paketnya dll. Dalam posting ini Anda dapat memahami dan mempelajari langkah demi langkah istalling dan cara menulis kode. Anda harus mengikuti langkah dan mengimplementasikan modul chat real time di aplikasi Anda. Jadi pada dasarnya Anda dapat melihat pratinjau di bawah modul pesan obrolan kami.

Pratinjau:

Langkah 1: Instal nodejs

pada langkah pertama kita akan menginstal nodejs jika kita belum menginstal sebelumnya. Jadi, pastikan Anda dapat memeriksa apakah nodejs tidak diinstal maka Anda dapat menjalankan perintah berikut dan menginstal nodejs dengan mudah.

sudo apt-get update
sudo apt-get install nodejs

Langkah 2: Instal npm

kita juga harus menginstal npm karena kita akan menginstal lebih banyak socket.io, redis dan paket ekspres menggunakan perintah npm, jadi jika Anda belum menginstal perintah ini sebelumnya, instal dengan perintah berikut.

sudo apt-get install npm

Langkah 3: Instal Redis-server

kami juga perlu menginstal server redis karena kami akan mengelola token redis, jadi jika Anda belum menginstal perintah ini sebelumnya, instal dengan mengikuti perintah.

sudo apt-get install redis-server

Langkah 4: Instal express redis socket.io

kita juga perlu menginstal redis express redis socket.io, jadi jika Anda belum menginstal perintah ini sebelumnya, instal dengan perintah berikut.

npm install express redis socket.io --save

Langkah 5: Instal Laravel

composer create-project --prefer-dist laravel/laravel blog

Langkah 6: Buat file server.js

Sekarang buka direktori root aplikasi laravel dan buat folder nodejs dan juga buat file baru server.js di dalam folder nodejs, jadi letakkan kode di bawah ini di file server.js.

nodejs/server.js

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var redis = require('redis');
 
server.listen(8890);
io.on('connection', function (socket) {
 
  console.log("client connected");
  var redisClient = redis.createClient();
  redisClient.subscribe('message');
 
  redisClient.on("message", function(channel, data) {
    console.log("mew message add in queue "+ data['message'] + " channel");
    socket.emit(channel, data);
  });
 
  socket.on('disconnect', function() {
    redisClient.quit();
  });
 
});

Langkah 7: Instal paket predis

Pada langkah ini kita harus menginstal paket predis dari laravel. paket ini melalui kita dapat menetapkan pesan di redis. jadi api pertama perintah berikut:

sudo composer require predis/predis

sekarang kita harus menambahkan alias dari paket predis jadi buka config/app.php dan ganti baris berikut:

'Redis'     => Illuminate\Support\Facades\Redis::class,

Ganti Ke

'LRedis'    => 'Illuminate\Support\Facades\Redis'

Langkah 8: Tambahkan Auth dan Controller

kita harus membutuhkan modul otentikasi untuk sistem chat real time ini karena tanpa penggunaan login kita tidak dapat mengobrol satu sama lain, jadi pertama jalankan perintah berikut.

php artisan laravel/ui bootstrap --auth

Oke, sekarang jalankan migrasi dengan cara itu kita bisa membuat tabel users:

php artisan migrate

Dan kita juga perlu membuat controller chatController baru jadi, jalankan perintah di bawah ini untuk membuat chatController baru.

php artisan make:controller chatController

Letakkan kode di bawah ini di controller itu.

app/Http/Controllers/chatController

namespace App\Http\Controllers;
use App\Http\Requests;
use App\Http\Controllers\Controller;
use Request;
use LRedis;
 
class chatController extends Controller {
    public function __construct()
    {
        $this->middleware('guest');
    }
    public function sendMessage(){
        $redis = LRedis::connection();
        $data = ['message' => Request::input('message'), 'user' => Request::input('user')];
        $redis->publish('message', json_encode($data));
        return response()->json([]);
    }
}

Langkah 9: Tambahkan Route dan Layout Message

pada langkah terakhir ini, kita perlu mengikuti route, jadi buka file routes.php Anda dan tambahkan route berikut.

Route::group(['middleware' => 'web'], function () {
    Route::auth();
    Route::get('/home', 'HomeController@index');
});
Route::post('sendmessage', 'chatController@sendMessage');

selanjutnya, kita harus mengganti file resources/views/home.blade.php. jadi salin kode di bawah dan letakkan di file ini:

resources/views/home.blade.php

@extends('layouts.app')
@section('content')
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.4.js"></script>
<style type="text/css">
    #messages{
        border: 1px solid black;
        height: 300px;
        margin-bottom: 8px;
        overflow: scroll;
        padding: 5px;
    }
</style>
<div class="container spark-screen">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Chat Message Module</div>
                <div class="panel-body">
 
                <div class="row">
                    <div class="col-lg-8" >
                      <div id="messages" ></div>
                    </div>
                    <div class="col-lg-8" >
                            <form action="sendmessage" method="POST">
                                <input type="hidden" name="_token" value="{{ csrf_token() }}" >
                                <input type="hidden" name="user" value="{{ Auth::user()->name }}" >
                                <textarea class="form-control msg"></textarea>
                                <br/>
                                <input type="button" value="Send" class="btn btn-success send-msg">
                            </form>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var socket = io.connect('http://localhost:8890');
    socket.on('message', function (data) {
        data = jQuery.parseJSON(data);
        console.log(data.user);
        $( "#messages" ).append( "<strong>"+data.user+":</strong><p>"+data.message+"</p>" );
      });
    $(".send-msg").click(function(e){
        e.preventDefault();
        var token = $("input[name='_token']").val();
        var user = $("input[name='user']").val();
        var msg = $(".msg").val();
        if(msg != ''){
            $.ajax({
                type: "POST",
                url: '{!! URL::to("sendmessage") !!}',
                dataType: "json",
                data: {'_token':token,'message':msg,'user':user},
                success:function(data){
                    console.log(data);
                    $(".msg").val('');
                }
            });
        }else{
            alert("Please Add Message.");
        }
    })
</script>
@endsection

Ok, akhirnya kita siap menjalankan skrip ini, jadi pertama buka terminal Anda dan masuk ke direktori nodejs lalu jalankan perintah berikut.

node server.js

Sekarang jalankan aplikasi di browser Anda dan jalankan.