Sistem Berbasis Website

Contoh Aplikasi Chat Realtime dengan Ratchet, MySQL, Bootstrap, CSS, dan CodeIgniter 4

Tutorial membuat aplikasi chat realtime CodeIgniter 4 menggunakan Ratchet WebSocket, MySQL, Bootstrap, CSS, dan JavaScript lengkap dengan source code.

Contoh coding Contoh Aplikasi Chat Realtime dengan Ratchet, MySQL, Bootstrap, CSS, dan CodeIgniter 4
Langkah 9 dari 12

Menentukan Route dan Menampilkan Halaman Chat

Tambahkan route eksplisit:

$routes->get('/', 'Chat::index');
$routes->get('chat', 'Chat::index');
$routes->get('api/messages', 'Api\\Messages::index');

Controller halaman mengirim URL WebSocket dari konfigurasi ke View:

return view('chat/index', [
    'title' => 'Chat Realtime',
    'websocketUrl' => config('Chat')->websocketUrl,
]);

View lengkap menggunakan Bootstrap untuk form masuk, header chat, status koneksi, area pesan, dan form kirim. CSS tambahan mengatur bubble pesan, layout mobile, tinggi area chat, serta status online/offline.