𝗜 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗦𝘁𝗿𝗲𝗮𝗺𝗶𝗻𝗴 𝗔𝗜 𝗖𝗵𝗮𝘁 𝗖𝗹𝗶𝗲𝗻𝘁 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗟𝗼𝘀𝗶𝗻𝗴 𝗠𝘆 𝗠𝗶𝗻𝗱 నేను పిచ్చివాడిని కాకుండా ఒక స్ట్రీమింగ్ AI చాట్ క్లయింట్ను నిర్మించాను
AI రియల్-టైమ్లో స్పందించేలా ఒక చాట్ ఇంటర్ఫేస్ను నేను నిర్మించాలనుకున్నాను. నాకు ఆ స్మూత్ టైప్రైటర్ ఎఫెక్ట్ కావాలి అనుకున్నాను.
ఇది నేను అనుకున్నదానికంటే కష్టంగా ఉంది. సమస్య AI వల్ల కాదు. సమస్య API మరియు బ్రౌజర్ మధ్య ఉన్న పైప్లైన్ వల్ల వచ్చింది.
దీనిని పరిష్కరించడానికి నేను మూడు వేర్వేరు మార్గాలను ప్రయత్నించాను.
వెయిట్ మెథడ్ (The Wait Method) నేను APIని కాల్ చేసి, పూర్తి రెస్పాన్స్ వచ్చే వరకు వేచి ఉన్నాను. ఇది పనిచేసింది కానీ, UI కొన్ని సెకన్ల పాటు ఫ్రీజ్ అయిపోయింది. యాప్ పాడైపోయిందని వినియోగదారులు అనుకున్నారు. వారు పదేపదే "Send" బటన్ను క్లిక్ చేశారు. ఇది చాలా చెత్త యూజర్ ఎక్స్పీరియన్స్.
పోలింగ్ మెథడ్ (The Polling Method) సర్వర్ ఒక job IDని పంపాలని, క్లయింట్ ప్రతి సెకనుకు అప్డేట్ల కోసం అడగాలని నేను అనుకున్నాను. దీనికి భారీ సర్వర్ మేనేజ్మెంట్ అవసరమైంది. అప్డేట్లు అస్తవ్యస్తంగా (random chunks) వచ్చాయి. అది స్మూత్గా లేదు.
WebSocket మెథడ్ (The WebSocket Method) నేను Socket.IOని ప్రయత్నించాను. ఇది అనవసరమైన సంక్లిష్టతను పెంచింది. నేను రీకనెక్టIONS, heartbeats మరియు state synchronizationలను మేనేజ్ చేయాల్సి వచ్చింది. ఒక సాధారణ చాట్ యాప్కు WebSockets అవసరానికి మించి (overkill) ఉన్నాయి.
పరిష్కారం చాలా సరళంగా ఉంది: Server-Sent Events (SSE).
చాలా AI APIలు ఇప్పటికే HTTP ద్వారా SSE ఉపయోగించి రెస్పాన్స్లను పంపుతాయి. నేను సంక్లిష్టమైన టూల్స్ కోసం వెతకడం ఆపివేసి, నేటివ్ fetch APIని ఉపయోగించాను.
response.body.getReader() ఉపయోగించడం ద్వారా, నేను నేరుగా బైట్స్ స్ట్రీమ్ను చదివాను. నేను స్వయంగా SSE ప్రోటోకాల్ను పార్స్ చేశాను. ఈ విధానం UIని రెస్పాన్సివ్గా ఉంచుతుంది మరియు స్టాండర్డ్ HTTPని ఉపయోగిస్తుంది.
ఇది ఎందుకు పనిచేస్తుంది:
- WebSocket సర్వర్ అవసరం లేదు.
- సంక్లిష్టమైన రీకనెక్టన్ లాజిక్ అవసరం లేదు.
- SSEని సపోర్ట్ చేసే ఏ APIతోనైనా ఇది పనిచేస్తుంది.
- AbortController ఉపయోగించి మీరు స్ట్రీమ్ను సులభంగా ఆపవచ్చు.
ఇందులో కొన్ని లోపాలు (trade-offs) కూడా ఉన్నాయి.
- రిక్వెస్ట్ లేకుండా మీరు క్లయింట్కు అప్డేట్లను పంపలేరు.
- కనెక్షన్ కట్ అయితే, మీరు పాక్షిక రెస్పాన్స్ను కోల్పోతారు.
మీరు ఒక చాట్ యాప్ను నిర్మిస్తుంటే, మీకు బైడైరెక్షనల్ కమ్యూనికేషన్ (bidirectional communication) అవసరం లేకపోతే WebSockets ని నివారించండి. HTTP స్ట్రీమింగ్కే ప్రాధాన్యత ఇవ్వండి. ఇది సరళమైనది మరియు మరింత నమ్మదగినది.
మీ స్ట్రీమింగ్ స్ట్రాటజీ ఏమిటి? మీరు WebSockets ఉపయోగిస్తారా లేదా SSEనా? కామెంట్లలో నాకు చెప్పండి.
Source: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0