میں نے اپنا ذہنی توازن کھوئے بغیر ایک اسٹریمنگ AI چیٹ کلائنٹ بنایا
میں ایک ایسا چیٹ انٹرفیس بنانا چاہتا تھا جہاں AI ریئل ٹائم میں جواب دے۔ میں وہ ہموار ٹائپ رائٹر ایفیکٹ (typewriter effect) چاہتا تھا۔
یہ میری سوچ سے زیادہ مشکل تھا۔ مسئلہ AI کا نہیں تھا۔ مسئلہ API اور براؤزر کے درمیان پائپ لائن کا تھا۔
میں نے اسے حل کرنے کے لیے تین مختلف طریقے آزمائے۔
انتظار کرنے کا طریقہ (The Wait Method) میں نے API کو کال کیا اور مکمل جواب ملنے تک انتظار کیا۔ یہ کام تو کر گیا، لیکن UI کئی سیکنڈز کے لیے جم (freeze) گیا۔ صارفین کو لگا کہ ایپ خراب ہو گئی ہے۔ انہوں نے بار بار "Send" پر کلک کیا۔ یہ صارف کے تجربے (user experience) کے لحاظ سے بہت برا تھا۔
پولنگ کا طریقہ (The Polling Method) میں نے سوچا کہ سرور ایک job ID بھیج دے۔ پھر کلائنٹ ہر سیکنڈ بعد اپ ڈیٹس کے لیے پوچھے گا۔ اس کے لیے بھاری سرور مینجمنٹ کی ضرورت تھی۔ اپ ڈیٹس بے ترتیب ٹکڑوں میں نظر آتی تھیں۔ یہ ہموار نہیں تھا۔
WebSocket کا طریقہ (The WebSocket Method) میں نے Socket.IO آزمایا۔ اس سے پیچیدگی بہت بڑھ گئی۔ مجھے ری کنکشنز (reconnections)، ہارٹ بیٹس (heartbeats) اور اسٹیٹ سنکرونائزیشن (state synchronization) کو مینیج کرنا پڑا۔ ایک سادہ چیٹ ایپ کے لیے WebSockets ضرورت سے زیادہ (overkill) تھے۔
حل زیادہ سادہ تھا: Server-Sent Events (SSE)۔
زیادہ تر AI APIs پہلے ہی HTTP پر SSE کے ذریعے جوابات بھیجتے ہیں۔ میں نے پیچیدہ ٹولز تلاش کرنا چھوڑ دیا اور native fetch API کا استعمال کیا۔
response.body.getReader() کا استعمال کرتے ہوئے، میں نے براہ راست بائٹس (bytes) کے اسٹریم کو پڑھا۔ میں نے خود SSE پروٹوکول کو پارس (parse) کیا۔ یہ طریقہ UI کو ریسپونسو (responsive) رکھتا ہے اور معیاری HTTP کا استعمال کرتا ہے۔
یہ کیوں کام کرتا ہے:
- کوئی WebSocket سرور درکار نہیں۔
- کوئی پیچیدہ ری کنکشن لاجک نہیں۔
- یہ کسی بھی ایسی API کے ساتھ کام کرتا ہے جو SSE کو سپورٹ کرتی ہو۔
- آپ AbortController کا استعمال کرتے ہوئے اسٹریم کو آسانی سے روک سکتے ہیں۔
اس کے کچھ نقصانات (trade-offs) بھی ہیں۔
- آپ درخواست (request) کے بغیر کلائنٹ کو اپ ڈیٹس نہیں بھیج سکتے۔
- اگر کنکشن ٹوٹ جائے تو آپ جزوی جواب (partial response) کھو دیتے ہیں۔
اگر آپ چیٹ ایپ بنا رہے ہیں، تو WebSockets سے پرہیز کریں جب تک کہ آپ کو دو طرفہ مواصلات (bidirectional communication) کی ضرورت نہ ہو۔ HTTP اسٹریمنگ پر توجہ دیں۔ یہ سادہ اور زیادہ قابل اعتماد ہے۔
آپ کی اسٹریمنگ حکمت عملی کیا ہے؟ کیا آپ WebSockets استعمال کرتے ہیں یا SSE؟ مجھے کمنٹس میں بتائیں۔
Source: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0