استریم چت هوش مصنوعی با لاراول و Livewire
خلاصهٔ کاملتر
وقتی یه چتبات AI میسازیم، معمولاً کاربر باید چند ثانیه منتظر بمونه تا جواب کامل بیاد. این تجربه برای محیط توسعه قابلقبوله، اما برای کاربر واقعی اصلاً جالب نیست. راهحل اینه که پاسخ رو استریم کنیم — یعنی همونطور که AI داره تولید میکنه، کلمه به کلمه نشون بدیم، دقیقاً مثل ChatGPT.
تغییر اصلی در بکاند فقط یه خطه. به جای فراخوانی prompt()، از stream() استفاده میکنیم. SDK لاراول این متد رو از طریق Server-Sent Events (SSE) — یه پروتکل سبکوزن برای ارسال داده از سرور به مرورگر — مستقیماً توکنها رو به کلاینت میفرسته. یه متد جدید به ChatController اضافه میشه که هدرهای SSE رو تنظیم میکنه و از یه متد خصوصی resolveAgent برای شروع یا ادامهی مکالمه استفاده میکنه.
در فرانتاند، ترکیب Livewire برای مدیریت state، Blade برای قالب UI، و Alpine.js برای منطق استریمینگ به کار میره. Alpine یه readable stream از طریق fetch باز میکنه، هر chunk رو پارس میکنه و متن رو بلادرنگ به حباب پیام اضافه میکنه — بدون هیچ کتابخانهی خارجی.
// Alpine streaming logic (simplified)
const response = await fetch('/chat/stream', { method: 'POST', body: ... });
const reader = response.body.getReader();
while (true) {
const { done, value } = await reader.read();
if (done) break;
this.reply += new TextDecoder().decode(value);
}یه نکتهی ظریف هم وجود داره: گرفتن conversation ID در اولین پیام. چون استریم تموم نشده، ID هنوز موجود نیست. راهحل اینه که یه completion callback تعریف کنیم که بعد از اتمام استریم اجرا میشه و ID رو برای پیامهای بعدی ذخیره میکنه.
نتیجهی نهایی یه چت کاملاً واقعیاحساسه — همون agent، همون tools، همون knowledge base، فقط با تجربهی کاربری خیلی بهتر.
نکات کلیدی:
- تغییر از prompt() به stream() کافیه تا استریمینگ فعال بشه
- SDK پاسخ رو از طریق Server-Sent Events به مرورگر میفرسته
- Alpine.js منطق خواندن استریم رو بدون نیاز به پکیج خارجی مدیریت میکنه
- برای ذخیرهی conversation ID باید از completion callback استفاده کرد
- کد کامل پروژه روی GitHub در دسترسه




