SpringBoot+Vue实现指定账号审批单据时前端进行语音播报


场景

若依前后端分离版本地搭建开发环境并运行项目的教程:

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

基于上面搭建起来架构的基础上,业务需求是某单据需要审批时,通过语音播报及时通知对应的账号。

一种思路:

后端与前端使用websocket建立连接,连接时使用登录账号作为标识。

后台使用定时任务,判断当单据状态为待审批的数据个数不为0时,向指定的账户推送消息,前端收到消息时,进行语音播报。

这个思路要考虑websocket在切换页面时的销毁和连接后台websocket失败时的重连机制。

另一种思路:

后台只写接口,接口中接收参数为账号,根据账号查询该账户是否为要播报的账户,如果是要播报的账户并且待审批的数据个数不为0

时,则接口返回true,否则返回false。前端新建定时器,固定时间带着当前登录用户的账户请求接口。

这种思路需要前端频繁的请求接口,不大合适,但是如果后台接口的地址是对接的第三方的系统,第三方的系统只提供对外的接口情况下,该思路较为适合。下面介绍这种思路的实现。

该思路用在并发量不大的前提下。

注:

博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、首先实现指定的账户进行播报中配置指定的账户。

前端实现一个从所有账户中勾选账户的方式比较友好,这里为了简单实现,所有采用手动输入配置账号的方式实现。

将原来接口返回500等错误情况的弹窗提示修改为控制台输出。避免因后台接口出现问题导致前端页面一直弹窗提示错误的情况。

4、语音播报的实现

上面语音播报通过

            this.speech.speak({ text: "您有新的用车申请,请及时审批" }).then(() => {
             
            });

完整的实现流程参考如下

Vue中使用speak-tts插件实现点击按钮后进行语音播报(TTS/文字转语音):

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/122584289


 

相关