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

Menghubungkan Browser dengan WebSocket

File public/assets/chat.js membuat koneksi:

socket = new WebSocket(config.websocketUrl);

socket.addEventListener('open', () => {
  socket.send(JSON.stringify({
    type: 'join',
    room,
    client_id: clientId,
    user_name: userName
  }));
});

Pesan baru dikirim dalam JSON:

socket.send(JSON.stringify({
  type: 'message',
  message: messageInput.value.trim()
}));

Saat menampilkan pesan, contoh menggunakan textContent, bukan innerHTML:

const body = document.createElement('div');
body.className = 'message-body';
body.textContent = item.message;

Hal ini penting agar isi pesan diperlakukan sebagai teks, bukan dieksekusi sebagai HTML. Pesan lama diambil melalui fetch() sebelum koneksi realtime dimulai.