Vue结合WebSocket和WaveSurferJS如何实现H5网页聊天交互功能？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2283个文字，预计阅读时间需要10分钟。
引言：在实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：智能客服（输入文字）“‘您好，有什么可以帮助您的？’
引言
在与实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：
- 智能客服（输入文本，返回引擎处理后的文本结果）
- 语音合成（输入文本，返回文本以及合成的音频）
如上图所示，返回文本后，再返回合成出的音频。
音频按钮嵌在对话气泡中，可以点击播放。
- 语音识别（在页面录制语音发送，页面实时展示识别出的文本结果）
实现功能及技术要点
1、基于WebSocket实现对话流
页面与后端的交互是实时互动的，所以采用WebSocket协议，而不是HTTP请求，这样后端推送回的消息可以实时显示在页面上。
WebSocket的返回是队列的、无序的，在后续处理中我们也需要注意这一点，在后文中会说到。
本文共计2283个文字，预计阅读时间需要10分钟。
引言：在实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：智能客服（输入文字）“‘您好，有什么可以帮助您的？’
引言
在与实现了语音合成、语义分析、机器翻译等算法的后端交互时，页面可以设计成更为人性化、亲切的方式。我们采用类似于聊天对话的实现，效果如下：
- 智能客服（输入文本，返回引擎处理后的文本结果）
- 语音合成（输入文本，返回文本以及合成的音频）
如上图所示，返回文本后，再返回合成出的音频。
音频按钮嵌在对话气泡中，可以点击播放。
- 语音识别（在页面录制语音发送，页面实时展示识别出的文本结果）
实现功能及技术要点
1、基于WebSocket实现对话流
页面与后端的交互是实时互动的，所以采用WebSocket协议，而不是HTTP请求，这样后端推送回的消息可以实时显示在页面上。
WebSocket的返回是队列的、无序的，在后续处理中我们也需要注意这一点，在后文中会说到。