আমি পাগল না হয়ে একটি স্ট্রিমিং AI চ্যাট ক্লায়েন্ট তৈরি করেছি

আমি এমন একটি চ্যাট ইন্টারফেস তৈরি করতে চেয়েছিলাম যেখানে AI রিয়েল-টাইমে রেসপন্স করবে। আমি সেই মসৃণ টাইপরাইটার ইফেক্টটি চেয়েছিলাম।

এটি আমার ভাবনার চেয়েও কঠিন ছিল। সমস্যাটি AI-তে ছিল না। সমস্যাটি ছিল API এবং ব্রাউজারের মধ্যবর্তী পাইপলাইনে।

এটি সমাধানের জন্য আমি তিনটি ভিন্ন পদ্ধতি চেষ্টা করেছি।

১. ওয়েট মেথড (The Wait Method) আমি API কল করতাম এবং সম্পূর্ণ রেসপন্স না আসা পর্যন্ত অপেক্ষা করতাম। এটি কাজ করেছিল, কিন্তু UI কয়েক সেকেন্ডের জন্য জমে (freeze) যেত। ব্যবহারকারীরা ভাবতেন অ্যাপটি কাজ করছে না। তারা বারবার "Send" বাটনে ক্লিক করতেন। এটি ছিল একটি খারাপ ইউজার এক্সপেরিয়েন্স।

২. পোলিং মেথড (The Polling Method) আমি ভেবেছিলাম সার্ভার একটি job ID পাঠাবে। এরপর ক্লায়েন্ট প্রতি সেকেন্ডে আপডেটের জন্য রিকোয়েস্ট পাঠাবে। এর জন্য ভারী সার্ভার ম্যানেজমেন্টের প্রয়োজন ছিল। আপডেটগুলো এলোমেলোভাবে ছোট ছোট অংশে আসত। এটি মোটেও মসৃণ ছিল না।

৩. WebSocket মেথড আমি Socket.IO চেষ্টা করেছিলাম। এটি অনেক জটিলতা বাড়িয়ে দিয়েছিল। আমাকে reconnection, heartbeat এবং state synchronization ম্যানেজ করতে হচ্ছিল। একটি সাধারণ চ্যাট অ্যাপের জন্য WebSockets ছিল overkill।

সমাধানটি ছিল আরও সহজ: Server-Sent Events (SSE)।

বেশিরভাগ AI API ইতিমধ্যেই HTTP-এর মাধ্যমে SSE ব্যবহার করে রেসপন্স পাঠায়। আমি জটিল টুল খোঁজা বন্ধ করে দিয়েছি এবং নেটিভ fetch API ব্যবহার করেছি।

response.body.getReader() ব্যবহার করে আমি সরাসরি বাইটের স্ট্রিমটি পড়ি। আমি নিজেই SSE প্রোটোকলটি পার্স (parse) করেছি। এই পদ্ধতিটি UI-কে রেসপন্সিভ রাখে এবং স্ট্যান্ডার্ড HTTP ব্যবহার করে।

কেন এটি কাজ করে:

  • কোনো WebSocket সার্ভারের প্রয়োজন নেই।
  • কোনো জটিল reconnection লজিক নেই।
  • এটি SSE সাপোর্ট করে এমন যেকোনো API-এর সাথে কাজ করে।
  • আপনি AbortController ব্যবহার করে সহজেই স্ট্রিমটি বন্ধ করতে পারেন।

এর কিছু সীমাবদ্ধতাও আছে।

  • রিকোয়েস্ট ছাড়া আপনি ক্লায়েন্টে আপডেট পাঠাতে পারবেন না।
  • যদি কানেকশন বিচ্ছিন্ন হয়ে যায়, তবে আপনি আংশিক রেসপন্সটি হারিয়ে ফেলবেন।

আপনি যদি একটি চ্যাট অ্যাপ তৈরি করেন, তবে দ্বিমুখী যোগাযোগের (bidirectional communication) প্রয়োজন না হলে WebSockets এড়িয়ে চলুন। HTTP streaming ব্যবহার করুন। এটি সহজ এবং আরও নির্ভরযোগ্য।

আপনার স্ট্রিমিং কৌশল কী? আপনি কি WebSockets নাকি SSE ব্যবহার করেন? কমেন্টে আমাকে জানান।

উৎস: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0