SSE vs WebSocket, Mana yang Kamu Butuhkan

Keduanya memungkinkan server mengirim data ke browser tanpa browser harus terus-menerus minta update. Bedanya:

SSE (Server-Sent Events) itu satu arah, dari server ke browser saja, dan jalan di atas HTTP biasa. Setup-nya lebih sederhana dan pas banget untuk kebutuhan kita menampilkan teks AI yang mengalir.
WebSocket itu dua arah dan butuh koneksi yang terus terbuka, setup-nya lebih ribet (seperti Laravel Reverb atau Pusher), dan lebih cocok untuk hal seperti chat room multi-user atau kolaborasi real-time.

Karena chatbot kita cuma perlu kirim teks hasil AI ke satu user dalam satu waktu, SSE adalah pilihan yang tepat di sini. Kita baru butuh WebSocket nanti kalau bikin fitur multi-user atau broadcast.

Cara Kerja Streaming, dengan Bahasa Sederhana

Daripada provider AI-nya kirim satu respons besar di akhir, dia kirim potongan-potongan teks kecil (chunk) terus-menerus seiring proses generate-nya jalan. Aplikasi Laravel-mu menerima tiap chunk dan langsung meneruskannya ke browser, bukannya nunggu kumpulin dulu seluruh respons.

Langkah 1: Streaming Pakai HTTP Client Laravel

Kalau kamu manggil API OpenAI langsung, kamu perlu bilang ke API-nya supaya stream responsnya, lalu baca chunk-chunk yang datang:

ChatStreamController.phpphp

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Http;

class ChatStreamController extends Controller

{

    public function stream(Request $request)

{

        $message = $request->query('message');

        return response()->stream(function () use ($message) {

            $response = Http::withToken(config('services.openai.key'))

                ->withOptions(['stream' => true])

                ->post('https://api.openai.com/v1/chat/completions', [

                    'model' => config('services.openai.model'),

                    'stream' => true,

                    'messages' => [

                        ['role' => 'user', 'content' => $message],

],

]);

            $body = $response->toPsrResponse()->getBody();

            while (!$body->eof()) {

                $line = $this->readLine($body);

                if (str_starts_with($line, 'data: ')) {

                    $data = substr($line, 6);

                    if (trim($data) === '[DONE]') {

                        break;

}

                    $decoded = json_decode($data, true);

                    $text = $decoded['choices'][0]['delta']['content'] ?? '';

                    if ($text !== '') {

                        echo "data: " . json_encode(['text' => $text]) . "\n\n";

                        ob_flush();

                        flush();

}

        }, 200, [

            'Cache-Control' => 'no-cache',

            'Content-Type' => 'text/event-stream',

            'X-Accel-Buffering' => 'no',

]);

}

    private function readLine($body): string

{

        $line = '';

        while (!$body->eof()) {

            $char = $body->read(1);

            $line .= $char;

            if ($char === "\n") {

                break;

}

        return trim($line);

}

69 baris•1950 chars

UTF-8•Spaces: 4

Detail penting di sini adalah

PLAINTEXT Snippetplaintext

'X-Accel-Buffering' => 'no'

1 baris•27 chars

UTF-8•Spaces: 4

. Tanpa ini, Nginx (dan beberapa setup hosting) akan buffer seluruh respons dulu sebelum dikirim, yang malah menghilangkan tujuan dari streaming. Perhatikan juga

PLAINTEXT Snippetplaintext

ob_flush()

1 baris•10 chars

UTF-8•Spaces: 4

dan

PLAINTEXT Snippetplaintext

flush()

1 baris•7 chars

UTF-8•Spaces: 4

setelah tiap chunk, ini memaksa PHP untuk benar-benar kirim data secara langsung, bukan menahannya di buffer.

Langkah 2: Streaming Pakai Prism PHP

Kalau kamu pakai Prism dari Part 4, streaming-nya jauh lebih sederhana karena sudah built-in:

script.phpphp

use Prism\Prism\Facades\Prism;

use Prism\Prism\Enums\Provider;

Route::get('/chat/stream', function (Request $request) {

    return response()->stream(function () use ($request) {

        $stream = Prism::text()

            ->using(Provider::OpenAI, 'gpt-4o-mini')

            ->withPrompt($request->query('message'))

            ->asStream();

        foreach ($stream as $chunk) {

            echo "data: " . json_encode(['text' => $chunk->text]) . "\n\n";

            ob_flush();

            flush();

}

    }, 200, [

        'Cache-Control' => 'no-cache',

        'Content-Type' => 'text/event-stream',

        'X-Accel-Buffering' => 'no',

]);

});

21 baris•662 chars

UTF-8•Spaces: 4

Prism juga punya

PLAINTEXT Snippetplaintext

asEventStreamResponse()

1 baris•23 chars

UTF-8•Spaces: 4

, yang otomatis mengurus format SSE-nya untuk kamu:

script.phpphp

Route::get('/chat/stream', function (Request $request) {

    return Prism::text()

        ->using(Provider::OpenAI, 'gpt-4o-mini')

        ->withPrompt($request->query('message'))

        ->asEventStreamResponse();

});

6 baris•218 chars

UTF-8•Spaces: 4

Ini versi paling sederhana dan sudah cukup untuk kebanyakan kasus. Pakai versi manual di atas kalau kamu butuh format custom atau logika tambahan di antara chunk-chunk-nya.

Langkah 3: Menerima Stream di Browser

Di frontend, pakai API

PLAINTEXT Snippetplaintext

EventSource

1 baris•11 chars

UTF-8•Spaces: 4

bawaan browser untuk mendengarkan chunk yang masuk:

HTML Snippethtml

<div id="chat-output"></div>

<input type="text" id="message-input" placeholder="Ketik pesan...">

<button onclick="sendMessage()">Kirim</button>

<script>

function sendMessage() {

    const message = document.getElementById('message-input').value;

    const output = document.getElementById('chat-output');

    output.innerText = '';

    const eventSource = new EventSource(`/chat/stream?message=${encodeURIComponent(message)}`);

    eventSource.onmessage = (event) => {

        const data = JSON.parse(event.data);

        output.innerText += data.text;

};

    eventSource.onerror = () => {

        eventSource.close();

};

}

</script>

22 baris•645 chars

UTF-8•Spaces: 4

Setiap kali chunk datang, kita tambahkan ke elemen output, sehingga terbentuk efek kata-demi-kata.

Jebakan yang Sering Terjadi

1. Buffering di server memblokir streaming Meski kode PHP-nya sudah benar, beberapa setup server tetap buffer output secara default. Kalau streaming-nya kelihatan nggak jalan, cek config Nginx-mu untuk

PLAINTEXT Snippetplaintext

proxy_buffering

1 baris•15 chars

UTF-8•Spaces: 4

dan matikan itu untuk route streaming-nya, dan pastikan

PLAINTEXT Snippetplaintext

zlib.output_compression

1 baris•23 chars

UTF-8•Spaces: 4

PLAINTEXT Snippetplaintext

php.ini

1 baris•7 chars

UTF-8•Spaces: 4

juga mati.

2. Pakai

PLAINTEXT Snippetplaintext

php artisan serve

1 baris•17 chars

UTF-8•Spaces: 4

di lokal sudah cukup buat testing Ini menangani streaming tanpa config tambahan, jadi cara yang bagus untuk memastikan kodemu benar sebelum debug masalah buffering di level server.

3. Laravel Telescope bisa mengganggu Kalau kamu pakai Telescope, dia bisa mencegat event dari HTTP client dan "makan" stream-nya sebelum kodemu sempat baca. Matikan HTTP watcher milik Telescope untuk route yang butuh streaming.

4. Menutup koneksi Selalu panggil

PLAINTEXT Snippetplaintext

eventSource.close()

1 baris•19 chars

UTF-8•Spaces: 4

begitu kamu deteksi responsnya sudah selesai (atau kalau error), kalau nggak koneksi browsernya tetap terbuka tanpa perlu.

Selanjutnya

Streaming bikin pengalaman chat terasa lebih cepat, tapi masih ada masalah yang belum kita tangani: gimana kalau respons AI-nya butuh waktu lama buat mulai, atau kalau banyak user pakai fitur AI-mu bersamaan? Di artikel selanjutnya, kita akan pindahkan proses AI yang berat ke queue dan background job, supaya aplikasimu tetap responsif meski lagi ramai.

Ini adalah Part 6 dari series "Laravel + AI Integration".

Streaming Respons AI di Laravel (SSE)

Laravel & AI Integration

SSE vs WebSocket, Mana yang Kamu Butuhkan

Cara Kerja Streaming, dengan Bahasa Sederhana

Langkah 1: Streaming Pakai HTTP Client Laravel

Langkah 2: Streaming Pakai Prism PHP

Langkah 3: Menerima Stream di Browser

Jebakan yang Sering Terjadi

Selanjutnya

Timur Dian Radha Sejati

Punya Masalah Arsitektur atau Ingin Membangun Sistem yang Benar?

Artikel Rekayasa Terkait

Membangun Sistem RAG Sederhana dengan Laravel + Vector Database

Dari Satu Perintah Jadi Banyak Langkah

Bikin AI yang Bisa "Baca" Website dalam Hitungan Detik