Hướng dẫn tạo chat realtime sử dụng pusher trong Laravel!

Hướng dẫn tạo chat realtime sử dụng pusher trong Laravel!

Trong bài viết lần này, mình sẽ hướng dẫn các bạn tạo ra 1 ứng dụng chat realtime với chỉ 30’ thực hành ('Nhanh như cách dũng tán Hà Lan vậy! '). Các kiến thức mà bạn cần để chuần bị cho bài này không quá chuyên sâu như route, controller, view, event, broadcasting, 1 chút javaScript, html và 1 template cho ứng dụng chấm hết.

Việc đầu tiên các bạn cần làm là cài đặt môi trường và tạo 1 ứng dụng Laravel với template chat. các bạn có thể vào link mình để bên dưới để tham khảo source code mẫu.

Tiếp theo các bạn cần tạo Controller theo lệnh

php artisan make:controller SendMessageController

Code Controller

<?php

namespace App\Http\Controllers;

use App\Events\MyEvent;
use Illuminate\Http\Request;

class SendMessageController extends Controller
{
    public function index()
    {
        return view('pages.message');
    }

    public function sendMessage(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'content' => 'required'
        ]);

        $data['title'] = $request->input('title');
        $data['content'] = $request->input('content');

        event(new MyEvent($data));
        return redirect()->route('send');
    }
}

Tạo Event để xử lý sự kiện tạo message theo lệnh

php artisan make:event MyEvent

image

<?php
namespace App\Events;

use Illuminate\Queue\SerializesModels;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class MyEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    public function __construct($message)
    {
        $this->message = $message;
    }

    public function broadcastOn()
    {
        return ['my-channel'];
    }

    public function broadcastAs()
    {
        return 'my-event';
    }
}

2 router và 2 file blade 1 cái để các bạn submit message 1 cái để hiển thị message

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('pages.index');
});

Route::get('/send', 'SendMessageController@index')->name('send');
Route::post('/postMessage', 'SendMessageController@sendMessage')->name('postMessage');

file blade message để gửi tin nhắn

<form action="{{route('postMessage')}}" method="post">
     @csrf
      <input type="hidden" id="title" name="title" value="123">
             <div class="col-sm-12 d-flex" data-name="mail-send" data-code="f194">
              <textarea class="messages__reply__text" placeholder="Type a message..."
                                              name="content"></textarea>
              <button type="submit" class="float-right" style="background: none;border: none;width: 80px;cursor: pointer;">
                <span><i class="zmdi zmdi-mail-send zmdi-hc-fw" style="font-size: 1.7rem;vertical-align: bottom;color: white;float: right;"></i></span>
               </button>
      </div>
</form>

file blade để hiển thị tin nhắn

 <a href="#" class="listview__item">
        <img src="demo/img/profile-pics/1.jpg" class="listview__img" alt="">

          <div class="listview__content" id="test_message">
           <div class="listview__heading">David Belle</div>
           </div>
 </a>

@section('script')
    <script>
        var channel = window.Echo.channel('my-channel');
        channel.listen('.my-event', function(data) {
            $('#test_message').append('<p>'+data.message.content+'</p>')
        });
    </script>
@endsection

Tiếp theo các bạn cần phải cài đặt pusher qua composer như trên trang pusher hướng dẫn bằng lệnh

composer require pusher/pusher-php-server

image

Tiếp theo các bạn cần cài node module để sử dụng được laravel echo

npm install

image

Tiếp theo các bạn cần tạo 1 tài khoản trên pusher.com và tạo 1 channel trên đó, sau khi tạo xong các bạn vào các tab như trong ảnh bên dưới, trong ảnh bên dưới

Tiếp theo đến phần cấu hình pusher trong laravel

các bạn copy phần khung kia vào file .env như sau

Cấu hình file broadcast trong config/broadcasting.php như sau

'default' => env('BROADCAST_DRIVER', 'pusher'),

    /*
    |--------------------------------------------------------------------------
    | Broadcast Connections
    |--------------------------------------------------------------------------
    |
    | Here you may define all of the broadcast connections that will be used
    | to broadcast events to other systems or over websockets. Samples of
    | each available type of connection are provided inside this array.
    |
    */

    'connections' => [

        'pusher' => [
            'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => 'ap1',
                'useTLS' => true
            ],
        ],

        'redis' => [
            'driver' => 'redis',
            'connection' => 'default',
        ],

        'log' => [
            'driver' => 'log',
        ],

        'null' => [
            'driver' => 'null',
        ],

    ],

];

cấu hình cho file bootstrap.js trong resource/js/bootstrap.js như sau

import Echo from "laravel-echo";

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: 'f30c023d8b16bfd1c925', //key trong pusher
    cluster: 'ap1',
    forceTLS: true
});

tiếp theo các bạn chạy lệnh

npm run dev

để compile lại file bootstrap.js và app.js

image

các bạn đừng quên import file app.js vào trong file blade

<script src="{{ asset('js/app.js') }}"></script>

cuối cùng các bạn có thể tận hưởng thành quả!
Chúc các bạn thành công


link source code

https://gitlab.com/namnqptit/admin.git

1 Likes