Membangun aplikasi Real-Time chatting dengan Modulus dan Laravel 5

Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

() translation by (you can also view the original English article)

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana untuk menerapkan aplikasi real-time chatting dengan Laravel 5, PostgreSQL, dan pendorong. Kemudian kita akan mengerahkan aplikasi ini untuk Modulus bersama-sama.

Kami akan menggunakan Laravel 5 untuk layanan back-end, HTML5 dan jQuery untuk front-end aplikasi sederhana, PostgreSQL database, dan pendorong untuk real-time komunikasi antara server dan klien. Arsitektur keseluruhan akan seperti ini:

Skenario

Pengguna membuka aplikasi chatting di browser dan memberikan julukan untuk melanjutkan chat.
Pengguna memasuki beberapa teks dan klik tombol kirim.
Pesan akan ditangani oleh sebuah layanan yang ditulis menggunakan Laravel 5, dan ia akan tetap ke database.
Bertahan pesan akan dikirim ke pendorong untuk memicu peristiwa pesan baru untuk menyiarkan pesan kepada klien terhubung.
Pesan baru akan dapat diperoleh dengan klien, dan daftar pesan chat akan disegarkan untuk semua klien yang terhubung.

Kami akan mencakup topik-topik yang sangat berguna dengan skenario ini, bahkan jika ini adalah aplikasi yang sangat sederhana.

Persiapan lingkungan

Setup proyek Laravel

Mari kita Instal Laravel pertama, sehingga kita dapat menulis layanan obrolan untuk aplikasi kita. Kami akan menggunakan komposer untuk menginstal Laravel dan paket yang terkait dengan mudah. Silakan merujuk ke komposer website untuk mempelajari lebih lanjut tentang instalasi komposer. Setelah menginstal komposer, membuka sebuah baris perintah prompt dan jalankan perintah berikut untuk menginstal Laravel 5:

komposer global memerlukan "laravel/installer = ~ 1.1"

Anda akan melihat output seperti berikut:

Kami siap untuk menghasilkan sebuah proyek Laravel. Jalankan kode berikut untuk menghasilkan sebuah proyek struktur untuk aplikasi chatting.

laravel baru RealtimeChatLaravel

Ini akan menghasilkan sebuah boilerplate Laravel proyek, dan Anda akan melihat struktur folder berikut:

Database

Aplikasi kita akan berinteraksi dengan database, dan itu akan PostgreSQL. Dalam proyek ini, kami akan menggunakan ElephantSQL, yang merupakan sebuah perusahaan yang menyediakan PostgreSQL sebagai layanan. Anda dapat menggunakan beberapa jenis database dengan Laravel, seperti SQLite, MySQL, PostgreSQL, dan SQL Server. Aku telah memilih PostgreSQL karena bila kita menggunakan proyek kami untuk Modulus, Anda tidak akan dapat menggunakan basis data internal seperti jenis database di atas. Saya lebih suka menggunakan database yang menyediakan sebagai layanan. ElephantSQL memungkinkan Anda untuk mencoba beberapa fitur baik PostgreSQL dengan rencana gratis.

Anda dapat pergi dan ambil rencana gratis dari ElephantSQL digunakan untuk kebutuhan Anda. Ketika Anda selesai Anda account dan database penciptaan, Anda akan tahu informasi database seperti nama host, nama Database, Username, dan Password. Harap catat informasi bahwa untuk penggunaan di Laravel untuk konfigurasi database.

Pendorong

Perusahaan ini menyediakan layanan untuk memicu peristiwa untuk real-time komunikasi. Anda dapat pergi website ambisius untuk mendapatkan satu. Setelah akun berhasil dan penciptaan aplikasi, Anda akan bisa mendapatkan beberapa kredensial seperti App ID, App rahasia dan App kunci. Kita akan berbicara tentang penggunaan mereka di bagian mendatang.

Nginx

Untuk menjalankan aplikasi PHP di Modulus, Anda perlu memiliki web server dikonfigurasi untuk melayani aplikasi Anda. Kita akan menggunakan konfigurasi Nginx sebagai berikut:

server {
  listen 8080;

  server_name modulus_app_url;

  root /mnt/app/public;
  index index.html index.php;

  location / {
    try_files $uri $uri/ /index.php?$query_string;
  }

  location ~ \.php$ {

    fastcgi_split_path_info ^(.+\.php)(/.+)$;
    fastcgi_pass unix:/mnt/home/php-fpm.sock;
    fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    fastcgi_index index.php;

    include fastcgi_params;

  }
}

Kami telah menyelesaikan pengaturan lingkungan diperlukan untuk melanjutkan pembangunan. Mari kita pergi ke bagian desain.

Desain proyek dari awal

Model

Jika Anda belum pernah menggunakan kerangka ORM sebelum, Anda akan sangat akrab dengan topik ini. Dalam proyek Laravel, domain model ditempatkan di app / folder secara default. Dalam aplikasi ini, kita akan melakukan operasi CRUD pada pesan, dan ini berarti kita perlu menciptakan model pesan.

Jika Anda ingin membuat model, hanya membuat kelas yang meluas kelas Model, yang merupakan kelas abstrak dalam paket inti Laravel Illuminate\Database\Eloquent. Buat file bernama Message.php di bawah app / folder, dan meletakkan berikut konten di dalam file:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Message extends Model
{
    protected $table = 'messages';
    
}

Model ini akan memungkinkan kita untuk melakukan beberapa operasi terkait-database dengan mudah. Sebagai contoh, ketika Anda melakukan query berikut:

1	<?php
2	.....
3	Message::all();
4	...
5	?>

ini akan memberi Anda semua pesan dari database. Namun, bagaimana ia memutuskan pada nama tabel itu akan mengambil di hasilnya? Menggunakan nilai $table dalam kelas model. Bila Anda membuat pesan baru, itu akan langsung menyimpan model pesan Anda ke tabel pesan. Kita akan pergi ke detail tentang model di bagian Controller.

Controller

Controller adalah tempat di mana perilaku aplikasi Anda didefinisikan. Kami akan melakukan beberapa pesan yang berhubungan dengan operasi jika ChatController di aplikasi kita. Kita akan memiliki empat Endpoint untuk aplikasi kita:

Dapatkan /login: untuk render halaman login
Dapatkan /chat: untuk render halaman obrolan
Dapatkan /messages: untuk daftar pesan terakhir lima menampilkan pada halaman obrolan ketika pengguna pertama kali membuka itu
POSTING /messages: untuk menyimpan pesan baru

Untuk membuat controller, cukup membuat sebuah kelas di bawah App\Http\Controllers dan membuat kelas memperpanjang khusus Laravel kelas Controller yang ada di App\Http\Controllers. Ketika Anda meminta akhir /login atau /chat, mereka akan membuat sendiri template di bawah sumber daya dilihat. Anda dapat melakukannya dengan menggunakan tindakan berikut.

class ChatController extends Controller
{
    public function getLogin()
    {
        return view("login");
    }

    public function getChat()
    {
        return view("chat");
    }

    public function saveMessage()
    {
        if(Request::ajax()) {
            $data = Input::all();
            $message = new Message;
            $message->author = $data["author"];
            $message->message = $data["message"];
            $message->save();

            Pusher::trigger('chat', 'message', ['message' => $message]);
        }

    }

    public function listMessages(Message $message) {
        return response()->json($message->orderBy("created_at", "DESC")->take(5)->get());
    }
}

Tindakan pertama dan kedua akan membuat halaman tertentu. Tindakan ketiga adalah untuk menyimpan pesan. Dalam aksi ini, jenis permintaan pertama dicentang. Jika permintaan AJAX, ia mendapat semua permintaan tubuh sebagai array asosiatif. Array yang digunakan untuk mengisi model baru pesan.

Kemudian, save() method langsung dilakukan pada model untuk menyimpan data. Setiap kali pesan baru disimpan ke database, pesan yang sama akan dikirim ke ambisius dengan memicu acara pesan. Ketika Anda memicu suatu peristiwa, semua klien terhubung akan diberitahu. Untuk menggunakan kelas pendorong dalam proyek-proyek Laravel Anda, Anda dapat melakukan hal berikut:

Memerlukan pendorong yang berhubungan dengan paket via komposer memerlukan vinkla pendorong.
Menambah paket yang ambisius, yang Vinkla\Pusher\PusherServiceProvider::class, config/app.php.
Gunakan pendorong kelas controller Anda, seperti Vinkla\Pusher\Facades\Pusher; di atas kelas controller.

Anda adalah OK dengan paket, tapi bagaimana dengan konfigurasi pendorong? Anda perlu untuk menerbitkan vendor dalam proyek Anda dengan menggunakan perintah berikut:

1	php artisan vendor:publish

Perintah ini akan membuat config file config/pusher.php, dan Anda perlu memberikan mandat yang diperlukan yang dapat Anda temukan di dashboard pendorong Anda. File konfigurasi akan seperti di bawah ini:

'connections' => [

        'main' => [
            'auth_key' => 'auth_key',
            'secret' => 'secret',
            'app_id' => 'app_id',
            'options' => [],
            'host' => null,
            'port' => null,
            'timeout' => null,
        ],

        'alternative' => [
            'auth_key' => 'your-auth-key',
            'secret' => 'your-secret',
            'app_id' => 'your-app-id',
            'options' => [],
            'host' => null,
            'port' => null,
            'timeout' => null,
        ],

    ]

Akhir keempat adalah untuk daftar pesan terakhir lima menampilkan pada halaman obrolan untuk pengguna baru bergabung. Kode ajaib ini:

1	public function listMessages(Message $message) {
2	return response()->json($message->orderBy("created_at", "DESC")->take(5)->get());
3	}

Dalam kode ini, model pesan disuntikkan ke tindakan atau database melakukan pengoperasian terkait dengan menggunakan $message. Pertama memesan pesan dengan created_at dalam urutan, dan kemudian mengambil lima terakhir. Hasilnya dikembalikan dalam JSON format menggunakan response()-> json(...).

Kami telah disebutkan tentang controller dan action, tapi bagaimana aksi-aksi ini dieksekusi ketika pengguna masuk ke URL tertentu? Anda dapat menambahkan rute konfigurasi file app/Http/routes.php. Anda dapat melihat contoh di bawah ini:

<?php

Route::get('/chat', '\App\Http\Controllers\Chat\ChatController@getChat');

Route::get('/login', '\App\Http\Controllers\Chat\ChatController@getLogin');

Route::get('/messages', '\App\Http\Controllers\Chat\ChatController@listMessages');

Route::post('/messages', '\App\Http\Controllers\Chat\ChatController@saveMessage');

Dalam penggunaan ini, permintaan metode URI dan permintaan yang dipetakan ke Controller dan nama tindakan.

Itulah semua dengan controller. Mari kita beralih ke bagian lihat.

Pemandangan

Dalam bagian ini, kami telah menggunakan pisau mesin template yang disediakan oleh Laravel. Sebenarnya, ada hal-hal mesin template tidak ada dalam proyek-proyek kami, tetapi jika Anda ingin mengirimkan nilai dari controller ke pemandangan, Anda dapat langsung menggunakan proyek ini.

Kami memiliki dua tampilan halaman: login.blade.php dan chat.blade.php. Seperti yang Anda lihat, ada pisau kata kunci dalam nama file tampilan untuk menyatakan bahwa ini akan digunakan untuk mesin template Blade.

Yang pertama adalah hanya untuk operasi login, jadi mari kita bicara tentang halaman obrolan. Dalam file pandangan ini, ada beberapa pihak ketiga perpustakaan JavaScript yang disajikan dari CDN seperti jQuery, jQuery Cookie, Bootstrap, dan pendorong. Kami memiliki obrolan formulir untuk mengirim pesan, dan Laravel menempatkan meta deskripsi di Halaman:

1	<meta name="_token" value="token">

Namun, kami mengirimkan pesan chat melalui AJAX, dan ada bukti ada dalam header permintaan AJAX. Kami memberikan solusi dengan menggunakan kode snippet berikut:

1	$.ajaxSetup({
2	headers: { 'X-CSRF-Token' : $('meta[name=_token]').attr('content') }
3	});

Setiap kali Anda mengirim permintaan AJAX, token ini akan diletakkan di dalam header.

Untuk mendengarkan pesan saluran secara real time, kami telah digunakan sebagai berikut:

var pusher = new Pusher('app_id');
var channel = pusher.subscribe('chat');
channel.bind('message', function(data) {
    var message = data.message;
    $(".media-list li").first().remove();
    $(".media-list").append('<li class="media"><div class="media-body"><div class="media"><div class="media-body">'
    + message.message + '<br/><small class="text-muted">' + message.author + ' | ' + message.created_at + '</small><hr/></div></div></div></li>');
});

Pertama-tama, kami memiliki sebuah objek ambisius dengan app_id konstruktor. Dan kemudian, klien berlangganan ke saluran. Setiap kali peristiwa baru dengan nama pesan tiba, fungsi panggilan balik akan dijalankan di dalam fungsi bind(). Bidang daftar pesan akan disegarkan dengan pesan baru.

Akhirnya, setiap kali pengguna baru membuka halaman obrolan, pesan terakhir lima akan ditampilkan dalam bidang daftar pesan dengan kode berikut:

1	$.get("/messages", function (messages) {
2	refreshMessages(messages)
3	});

Anda dapat merujuk ke kode sumber untuk menganalisis kode sumber lengkap halaman tampilan.

Penggunaan

Kami akan menggunakan Modulus untuk hosting aplikasi kita.

Modulus adalah salah satu PaaS terbaik untuk menggelar, scaling dan pemantauan aplikasi Anda dalam bahasa pilihan Anda. Sebelum melanjutkan dengan penggunaan, silahkan pergi ke Modulus dan membuat account.

Prasyarat

Penggunaan ini sangat mudah dalam Modulus. Satu-satunya hal yang perlu Anda lakukan adalah menginstal modul Node.js dan menjalankan perintah. Juga Anda dapat zip proyek Anda dan meng-upload ke Modulus. Kita akan lebih suka pilihan pertama dalam tutorial ini.

Saya berasumsi bahwa Anda telah menginstal Node.js dan npm pada komputer Anda. Cukup membuka alat baris perintah dan melakukan npm menginstal -g modulus. Setelah instalasi berhasil, log in ke account Modulus dengan Modulus CLI: modulus login. Jika Anda ingin untuk login dengan GitHub, Anda dapat menggunakan modulus login--github.

Setelah Anda telah login, membuat sebuah proyek dengan perintah ini: modulus proyek membuat "RealtimeChatLaravel". Anda telah membuat sebuah aplikasi di sisi Modulus.

Hal terakhir yang perlu Anda lakukan adalah membuat folder dalam folder akar proyek yang disebut situs-diaktifkan, dan meletakkan Nginx konfigurasi yang disebutkan di bagian Nginx di atas di dalam folder berkemampuan situs ini.

Mari kita menyebarkan proyek Anda ke Modulus di bawah aplikasi ini. Melakukan modulus menyebarkan untuk memulai penyebaran, dan hal itu dilakukan! Perintah ini akan meng-upload file proyek untuk Modulus, dan itu juga akan mengkonfigurasi server web menggunakan Nginx konfigurasi Anda meletakkan di dalam folder situs-enabled.

Setelah penyebaran yang sukses, Anda akan mendapatkan pesan RealtimeChatLaravel berjalan pada realtime-chat-46792.onmodulus.net. Pergi ke URL ini untuk melihat demo kerja.

Modulus CLI memiliki perintah sangat membantu dalam penyebaran dan run-time. Misalnya, Anda dapat ekor log dari proyek Anda berjalan dengan modulus proyek log ekor, menetapkan variabel lingkungan dengan modulus env set <key> <value>dll</value> </key> Anda dapat melihat daftar lengkap perintah dengan menggunakan modulus bantuan.

Kesimpulan

Jika Anda membangun aplikasi web PHP, Anda pasti akan perlu untuk menangani server web seperti Apache NGINX; Namun, jika Anda menggunakan Modulus, Anda hanya dapat fokus pada proyek PHP Anda. Modulus memungkinkan Anda untuk menempatkan konfigurasi server web Anda dalam proyek Anda sedemikian rupa sehingga akan mempengaruhi bila Anda menggunakan kode Anda.

Dalam tutorial ini, kita fokus pada aplikasi real-time chatting dan melihat aspek-aspek lain dari aplikasi yang sangat mudah untuk menangani berkat Modulus.

1	server {
2	listen 8080;
3
4	server_name modulus_app_url;
5
6	root /mnt/app/public;
7	index index.html index.php;
8
9	location / {
10	try_files $uri $uri/ /index.php?$query_string;
11	}
12
13	location ~ \.php$ {
14
15	fastcgi_split_path_info ^(.+\.php)(/.+)$;
16	fastcgi_pass unix:/mnt/home/php-fpm.sock;
17	fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
18	fastcgi_index index.php;
19
20	include fastcgi_params;
21
22	}
23	}

1	class ChatController extends Controller
2	{
3	public function getLogin()
4	{
5	return view("login");
6	}
7
8	public function getChat()
9	{
10	return view("chat");
11	}
12
13	public function saveMessage()
14	{
15	if(Request::ajax()) {
16	$data = Input::all();
17	$message = new Message;
18	$message->author = $data["author"];
19	$message->message = $data["message"];
20	$message->save();
21
22	Pusher::trigger('chat', 'message', ['message' => $message]);
23	}
24
25	}
26
27	public function listMessages(Message $message) {
28	return response()->json($message->orderBy("created_at", "DESC")->take(5)->get());
29	}
30	}