ਮੈਂ ਆਪਣਾ ਦਿਮਾਗ ਗੁਆਏ ਬਿਨਾਂ ਇੱਕ Streaming AI Chat Client ਬਣਾਇਆ
ਮੈਂ ਇੱਕ ਅਜਿਹਾ ਚੈਟ ਇੰਟਰਫੇਸ ਬਣਾਉਣਾ ਚਾਹੁੰਦਾ ਸੀ ਜਿੱਥੇ AI ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਜਵਾਬ ਦੇਵੇ। ਮੈਂ ਉਹ ਸੁਚਾਰੂ ਟਾਈਪਰਾਈਟਰ ਇਫੈਕਟ ਚਾਹੁੰਦਾ ਸੀ।
ਇਹ ਮੇਰੀ ਸੋਚ ਨਾਲੋਂ ਕਿਤੇ ਜ਼ਿਆਦਾ ਮੁਸ਼ਕਲ ਸੀ। ਸਮੱਸਿਆ AI ਦੀ ਨਹੀਂ ਸੀ। ਸਮੱਸਿਆ API ਅਤੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਵਿਚਕਾਰਲੇ ਪਾਈਪਲਾਈਨ ਦੀ ਸੀ।
ਮੈਂ ਇਸ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ ਤਿੰਨ ਵੱਖ-ਵੱਖ ਤਰੀਕੇ ਅਜ਼ਮਾਏ।
The Wait Method ਮੈਂ API ਨੂੰ ਕਾਲ ਕੀਤਾ ਅਤੇ ਜਵਾਬ ਦਿਖਾਉਣ ਤੋਂ ਪਹਿਲਾਂ ਪੂਰੇ ਜਵਾਬ ਦੀ ਉਡੀਕ ਕੀਤੀ। ਇਹ ਕੰਮ ਕਰ ਰਿਹਾ ਸੀ, ਪਰ UI ਕਈ ਸਕਿੰਟਾਂ ਲਈ ਫ੍ਰੀਜ਼ ਹੋ ਗਿਆ। ਯੂਜ਼ਰਸ ਨੂੰ ਲੱਗਿਆ ਕਿ ਐਪ ਖਰਾਬ ਹੋ ਗਈ ਹੈ। ਉਹਨਾਂ ਨੇ ਵਾਰ-ਵਾਰ "Send" 'ਤੇ ਕਲਿੱਕ ਕੀਤਾ। ਇਹ ਇੱਕ ਮਾੜਾ ਯੂਜ਼ਰ ਐਕਸਪੀਰੀਅੰਸ ਸੀ।
The Polling Method ਮੈਂ ਸੋਚਿਆ ਕਿ ਸਰਵਰ ਇੱਕ job ID ਭੇਜੇ। ਫਿਰ ਕਲਾਇੰਟ ਹਰ ਸਕਿੰਟ ਵਿੱਚ ਅੱਪਡੇਟ ਮੰਗੇਗਾ। ਇਸ ਲਈ ਭਾਰੀ ਸਰਵਰ ਮੈਨੇਜਮੈਂਟ ਦੀ ਲੋੜ ਸੀ। ਅੱਪਡੇਟਸ ਰੈਂਡਮ ਟੁਕੜਿਆਂ ਵਿੱਚ ਦਿਖਾਈ ਦਿੱਤੇ। ਇਹ ਸੁਚਾਰੂ ਨਹੀਂ ਸੀ।
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 ਦੀ stream ਨੂੰ ਪੜ੍ਹਿਆ। ਮੈਂ ਖੁਦ SSE protocol ਨੂੰ parse ਕੀਤਾ। ਇਹ ਤਰੀਕਾ UI ਨੂੰ responsive ਰੱਖਦਾ ਹੈ ਅਤੇ standard HTTP ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
ਇਹ ਕਿਉਂ ਕੰਮ ਕਰਦਾ ਹੈ:
- ਕਿਸੇ WebSocket ਸਰਵਰ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
- ਕੋਈ ਗੁੰਝਲਦਾਰ reconnection logic ਨਹੀਂ।
- ਇਹ ਕਿਸੇ ਵੀ API ਦੇ ਨਾਲ ਕੰਮ ਕਰਦਾ ਹੈ ਜੋ SSE ਨੂੰ ਸਪੋਰਟ ਕਰਦਾ ਹੈ।
- ਤੁਸੀਂ AbortController ਦੀ ਵਰਤੋਂ ਕਰਕੇ stream ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਰੋਕ ਸਕਦੇ ਹੋ।
ਇਸ ਵਿੱਚ ਕੁਝ trade-offs ਹਨ।
- ਤੁਸੀਂ ਬਿਨਾਂ ਕਿਸੇ request ਦੇ ਕਲਾਇੰਟ ਨੂੰ ਅੱਪਡੇਟ ਨਹੀਂ ਭੇਜ ਸਕਦੇ।
- ਜੇਕਰ ਕਨੈਕਸ਼ਨ ਟੁੱਟ ਜਾਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਅਧੂਰਾ ਜਵਾਬ ਗੁਆ ਲੈਂਦੇ ਹੋ।
ਜੇਕਰ ਤੁਸੀਂ ਚੈਟ ਐਪ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ WebSockets ਤੋਂ ਬਚੋ ਜਦੋਂ ਤੱਕ ਤੁਹਾਨੂੰ bidirectional communication ਦੀ ਲੋੜ ਨਾ ਹੋਵੇ। HTTP streaming ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਵਧੇਰੇ ਸਧਾਰਨ ਅਤੇ ਭਰੋਸੇਮੰਦ ਹੈ।
ਤੁਹਾਡੀ streaming strategy ਕੀ ਹੈ? ਕੀ ਤੁਸੀਂ WebSockets ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ ਜਾਂ SSE ਦੀ? ਮੈਨੂੰ ਕਮੈਂਟਸ ਵਿੱਚ ਦੱਸੋ।
ਸਰੋਤ: https://dev.to/__c1b9e06dc90a7e0a676b/i-built-a-streaming-ai-chat-client-without-losing-my-mind-3gi0