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