探索ChatGPT背后的前端黑科技-369IT编程

admin管理员组
文章数量:1130349

由于图片和格式解析问题，可前往阅读原文

在人工智能与互联网技术飞速发展的今天，像ChatGPT这样的智能对话系统已经成为科技领域的焦点。它不仅能够进行自然流畅的对话，还能以多种格式展示内容，为用户带来高效且丰富的交互体验。然而，这些令人惊叹的功能背后，离不开前端技术的支持与实现

本文将深入探索ChatGPT背后的前端黑科技，希望能为开发者提供有价值的参考，帮助他们在实际项目中更高效地实现类似的功能

以下内容仅是本人的一次思考，如有更好方案的可在评论区留言

:::warning 小贴士
文章中涉及到的示例代码你都可以从这里查看，若对你有用还望点赞支持
:::

单页面应用(SPA)

单页面应用是指在整个使用过程中，只有一个HTML页面被加载。所有的导航和交互操作都是在前端通过JavaScript完成，无需重新加载整个页面。这使得用户可以在同一个页面内无缝浏览不同的内容

虽然在开发过程中可能会遇到一些挑战（比如SEO优化），但SPA凭借其优势已成为现代Web开发的主流趋势。相信大家都对React/Vue/Angular/Svelte等都不陌生，就不多做介绍了

实时通讯

实时通讯的总要性以及使用场景就不多说了，来看下常用的几种通讯技术

Server-Sent Events(SSE)

如果你仔细查看了ChatGPT的对话请求过程就会看到，服务器在不断的推送数据

这里用到的就是SSE技术，基于HTTP协议单向推送技术。它使得服务器能够在数据生成时实时推送给客户端，而无需客户端频繁轮询服务器。这非常适合需要实时更新的应用场景，如新闻推送、股票价格监控和日志跟踪

使用SSE注意事项

在响应头中添加Content-Type: text/event-stream，以通知客户端这是一个SSE连接
返回的数据要包含data: xxx，并以data: xxx\n\n双换行符格式，这样客户端才能正确解析，可以指定id、type等数据；默认情况下事件都是message，也可以自定义事件
建立好后的sse链接就会不断发数据，直到EventSource调用close事件
客户端使用EventSource来接收数据

编写客户端页面代码：

const eventSource = new EventSource('http://localhost:3000/sse');

eventSource.addEventListener("message", (e) => {
   
   
  console.log(e);
  if (e.data >> 0 > 4) eventSource.close();  // 客户端根据数据判断然后主动断开连接
});

// 服务器如果判断数据发完了可以发送type为done的数据包，客户端就可以监听到此类事件
eventSource.addEventListener("done", (e) => {
   
   });

eventSource.addEventListener('error', (e) => {
   
   
  console.log('Connection failed:', e);
});

使用express搭建服务器：

app.get("/sse", (req, res) => {
   
   
  // 设置响应头为SSE格式(必填的)
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");
  res.setHeader("Connection", "keep-alive");

  let count = 0; let timer;

  const sendEvent = () => {
   
   
    res.write(`id: ${
     
     count}\n\n`);
    res.write(`data: ${
     
     count}\n\n`);
    count++;
    timer = setTimeout(sendEvent, 1000);
  };

  sendEvent();

  req.on("close", () => {
   
   
    console.log("Client disconnected");
    clearTimeout(timer);
  });
});

推荐使用Nest框架搭建sse服务器，更简单强大：

@Controller("/api/sse")
export class SseController {
   
   
  private subject = new Subject<void>();

  @Sse("msgs")
  sse(@Query("msg") msg: string): Observable<MessageEvent> {
   
   
    <