मैंने अपना मानसिक संतुलन खोए बिना एक स्ट्रीमिंग AI चैट क्लाइंट बनाया
मैं एक ऐसा चैट इंटरफ़ेस बनाना चाहता था जहाँ AI रियल-टाइम में जवाब दे। मुझे वह स्मूथ टाइपराइटर इफेक्ट चाहिए था।
यह मेरी सोच से कहीं अधिक कठिन था। समस्या AI नहीं थी। समस्या API और ब्राउज़र के बीच के पाइपलाइन में थी।
मैंने इसे हल करने के लिए तीन अलग-अलग तरीके आजमाए।
वेट मेथड (The Wait Method) मैंने API को कॉल किया और उसे दिखाने से पहले पूरे रिस्पॉन्स का इंतज़ार किया। यह काम तो कर गया, लेकिन UI कई सेकंड के लिए फ्रीज़ हो गया। यूज़र्स को लगा कि ऐप खराब हो गया है। उन्होंने बार-बार "Send" पर क्लिक किया। यह एक खराब यूज़र एक्सपीरियंस था।
पोलिंग मेथड (The Polling Method) मैंने सोचा कि सर्वर एक जॉब ID भेजे। फिर क्लाइंट हर सेकंड अपडेट के लिए पूछेगा। इसके लिए भारी सर्वर मैनेजमेंट की ज़रूरत थी। अपडेट्स रैंडम टुकड़ों में दिखाई देते थे। यह स्मूथ नहीं था।
WebSocket मेथड (The WebSocket Method) मैंने Socket.IO आज़माया। इससे जटिलता बहुत बढ़ गई। मुझे रीकनेक्शन, हार्टबीट्स और स्टेट सिंक्रोनाइज़ेशन को मैनेज करना पड़ा। एक साधारण चैट ऐप के लिए, WebSockets ज़रूरत से ज़्यादा (overkill) थे।
समाधान सरल था: Server-Sent Events (SSE)।
अधिकांश AI APIs पहले से ही HTTP पर SSE के माध्यम से रिस्पॉन्स भेजते हैं। मैंने जटिल टूल्स ढूँढना बंद कर दिया और नेटिव fetch API का उपयोग किया।
response.body.getReader() का उपयोग करके, मैंने सीधे बाइट्स के स्ट्रीम को पढ़ा। मैंने खुद SSE प्रोटोकॉल को पार्स किया। यह दृष्टिकोण UI को रिस्पॉन्सिव रखता है और स्टैंडर्ड HTTP का उपयोग करता है।
यह क्यों काम करता है:
- किसी WebSocket सर्वर की आवश्यकता नहीं है।
- कोई जटिल रीकनेक्शन लॉजिक नहीं।
- यह किसी भी API के साथ काम करता है जो SSE को सपोर्ट करता है।
- आप
AbortControllerका उपयोग करके स्ट्रीम को आसानी से रोक सकते हैं।
इसके कुछ नुकसान (trade-offs) भी हैं।
- बिना रिक्वेस्ट के आप क्लाइंट को अपडेट नहीं भेज सकते।
- यदि कनेक्शन टूट जाता है, तो आप आंशिक (partial) रिस्पॉन्स खो देते हैं।
यदि आप चैट ऐप बना रहे हैं, तो WebSockets से बचें जब तक कि आपको द्विदिश (bidirectional) संचार की आवश्यकता न हो। HTTP स्ट्रीमिंग का ही उपयोग करें। यह सरल और अधिक विश्वसनीय है।
आपकी स्ट्रीमिंग रणनीति क्या है? क्या आप WebSockets का उपयोग करते हैं या SSE का? मुझे कमेंट्स में बताएं।
स्रोत: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0