现在随着AI的发展，市面出现了很多AI对话的工具，正好这段时间也在做AI对话。其实功能不复杂，主要需要考虑的是细节、体验，跟我一起剖析AI对话是如何实现的。
- 获取流式数据
- 内容渲染并且实现打字机效果
为了更加逼真，这里使用Node简单实现一个流式接口，方便后面使用。
讯享网
这里获取流式数据需要通过原生Fetch API请求。
讯享网
考虑到数据会是markdown格式，那么就需要解析md格式，可以使用marked这个库进行解析，这个库是整体一块解析的，要实现打字机效果就不适合，需要实时解析，这种组件有很多，这里使用vue-markdown组件。
讯享网
现在基本功能已经实现，开始细节优化，页面美化中。。。
- 禁止发送多次，可暂停
AbortController是fetch API提供的一种机制，允许你取消一个fetch请求。虽然这不是真正的暂停，但是你可以重新发起请求 。
- 对话框定位到页面底部
每次对话为对话框添加一个ID，然后通过scrollIntoView定位
讯享网
- 页面跟随文字自动定位页面底部，手动滚动取消自动定位
思路： 新建滚动开关，在while循环中根据滚动开关决定是否使用scrollIntoView定位到底部同时开启滚动监听，判断滚动条是否在页面底部，去修改滚动开关，修改后直接移除滚动事件。
这里就大致实现了AI对话的主要交互功能。主要有流式数据的读取、数据内容的渲染、页面跟随滚动。技术不难，主要是提供一个思路，欢迎大家交流提供其它的实现方式。
书洞笔记
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/203664.html