网页聊天功能怎么实现（网页聊天窗口实现）



现在随着AI的发展，市面出现了很多AI对话的工具，正好这段时间也在做AI对话。其实功能不复杂，主要需要考虑的是细节、体验，跟我一起剖析AI对话是如何实现的。

• 获取流式数据
• 内容渲染并且实现打字机效果

为了更加逼真，这里使用Node简单实现一个流式接口，方便后面使用。

这里获取流式数据需要通过原生Fetch API请求。

考虑到数据会是markdown格式，那么就需要解析md格式，可以使用marked这个库进行解析，这个库是整体一块解析的，要实现打字机效果就不适合，需要实时解析，这种组件有很多，这里使用vue-markdown组件。

现在基本功能已经实现，开始细节优化，页面美化中。。。

• 禁止发送多次，可暂停

AbortController是fetch API提供的一种机制，允许你取消一个fetch请求。虽然这不是真正的暂停，但是你可以重新发起请求 。

• 对话框定位到页面底部

每次对话为对话框添加一个ID，然后通过scrollIntoView定位

• 页面跟随文字自动定位页面底部，手动滚动取消自动定位

思路： 新建滚动开关，在while循环中根据滚动开关决定是否使用scrollIntoView定位到底部同时开启滚动监听，判断滚动条是否在页面底部，去修改滚动开关，修改后直接移除滚动事件。

这里就大致实现了AI对话的主要交互功能。主要有流式数据的读取、数据内容的渲染、页面跟随滚动。技术不难，主要是提供一个思路，欢迎大家交流提供其它的实现方式。

书洞笔记

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/43454.html