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