前端实战：从零构建一个模拟ChatGPT响应效果的Demo

3次阅读

没有评论

共计 3210 个字符，预计需要花费 9 分钟才能阅读完成。

在传统的前端开发中，实现实时对话效果通常采用 AJAX 轮询的方式。这种方式虽然简单，但存在几个明显的缺点：

频繁的 HTTP 请求会消耗大量服务器资源
响应延迟明显，无法实现真正的实时交互
服务器推送能力有限，用户体验不佳
带宽利用率低下，重复传输相同头部信息

为了实现更好的实时对话效果，我们对比了几种主流技术方案：

长轮询(Comet)
优点：兼容性好，几乎所有浏览器都支持
缺点：仍然需要频繁建立连接，服务器压力大
Server-Sent Events(SSE)
优点：单向服务器推送，协议简单
缺点：不支持双向通信，部分浏览器兼容性差
WebSocket
优点：全双工通信，连接效率高
缺点：需要服务器支持，协议较复杂

综合考虑实时性、性能和开发成本，我们选择 WebSocket 作为基础通信协议。

流式响应的核心是分块接收和显示数据。我们通过 WebSocket 的 onmessage 事件处理分块数据：

socket.onmessage = (event) => {
  const chunk = event.data;
  // 将接收到的数据块添加到消息队列
  messageQueue.push(chunk);

  if (!isAnimating) {startTypewriterEffect();
  }
};

打字机效果通过递归调用 requestAnimationFrame 实现，保证动画流畅性：

function typeWriter(text, index = 0) {if (index < text.length) {displayElement.textContent += text.charAt(index);
    requestAnimationFrame(() => {typeWriter(text, index + 1);
    });
  } else {
    isAnimating = false;
    processNextMessage();}
}

维护一个对话历史数组，每次交互都保存完整的对话记录：

const chatHistory = [];

function addToHistory(role, content) {chatHistory.push({ role, content});

  // 限制历史记录长度，防止内存溢出
  if (chatHistory.length > MAX_HISTORY_LENGTH) {chatHistory.shift();
  }
}

以下是 React 组件实现的核心代码：

import React, {useState, useEffect, useRef} from 'react';

const ChatDemo = () => {const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const socketRef = useRef(null);
  const messageQueueRef = useRef([]);
  const isAnimatingRef = useRef(false);

  useEffect(() => {
    // 初始化 WebSocket 连接
    socketRef.current = new WebSocket('wss://your-backend-endpoint');

    socketRef.current.onmessage = (event) => {messageQueueRef.current.push(event.data);
      if (!isAnimatingRef.current) {processMessageQueue();
      }
    };

    return () => {socketRef.current.close();
    };
  }, []);

  const processMessageQueue = () => {if (messageQueueRef.current.length > 0) {const nextMessage = messageQueueRef.current.shift();
      displayMessageWithEffect(nextMessage);
    }
  };

  const displayMessageWithEffect = (text, index = 0) => {if (index < text.length) {
      isAnimatingRef.current = true;
      setMessages(prev => {const last = prev[prev.length - 1];
        const newContent = last.content + text.charAt(index);
        return [...prev.slice(0, -1), {...last, content: newContent}];
      });

      requestAnimationFrame(() => {displayMessageWithEffect(text, index + 1);
      });
    } else {
      isAnimatingRef.current = false;
      processMessageQueue();}
  };

  const handleSubmit = (e) => {e.preventDefault();
    if (input.trim()) {
      setMessages(prev => [...prev, 
        {role: 'user', content: input},
        {role: 'assistant', content: ''}
      ]);
      socketRef.current.send(input);
      setInput('');
    }
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (<div key={i} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Type your message..."
        />
        <button type="submit">Send</button>
      </form>
    </div>
  );
};

export default ChatDemo;

大文本分块处理
服务器端将大响应拆分为多个 chunk 发送
前端设置合理的 chunk 大小(通常 1 -2KB)
内存泄漏预防
及时清理消息队列
组件卸载时取消所有动画帧
限制历史记录长度

网络中断重连策略

function setupReconnect() {
  const RECONNECT_INTERVAL = 5000;
  let reconnectTimer = null;

  socketRef.current.onclose = () => {if (!reconnectTimer) {reconnectTimer = setTimeout(() => {
        reconnectTimer = null;
        initializeSocket();}, RECONNECT_INTERVAL);
    }
  };
}