StompJS+SpeechSynthesis实现前端消息实时语音播报

前言

前端消息的实时推送我相信很多人不陌生，我们可以想到利用WebSocket，服务端主动向客户端推送数据，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。其优点有很多，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯等等。语音播报则能够在人们视觉没有来的及关注时侯，通过听觉来获取需要信息。

这篇文章主要介绍的是基于websocket，利用Stomp.js以及HTML5语音Web Speech API——SpeechSynthesis来实现前端消息的实时推送与语音播报。

StompJS

让我们先了解一下STOMP（the Simple (or Streaming) Text Orientated Messaging Protocol）——面向消息（或流）的简单文本协议。它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。

WebSocket的实现客户端看起来比较简单，但是需要与后台进行很好的配合和调试才能达到最佳效果。通过SockJS 、Stomp来进行浏览器兼容，可以增加消息语义和可用性。简而言之，WebSocket 是底层协议，SockJS 是WebSocket 的备选方案，也是底层协议，而 STOMP 是基于 WebSocket（SockJS）的上层协议。

创建STOMP客户端

下面简单的介绍一下常用的方法。
在web浏览器中我们可以通过两种方式进行客户端的创建：
1、使用普通的WebSocket

let url = "ws://localhost:61614/stomp";
let client = Stomp.client(url);

2、使用定制的WebSocket
如果需要使用其他类型的Websocket（例如由SockJS包装的Websocket），就利用下面的方式创建客户端

let url = "ws://localhost:61614/stomp";
let socket = new SockJS(url);
let client = Stomp.over(socket);

除上面的客户端创建方式不同外，后续的连接等操作都是一样的。

连接服务端

我们可以用client.connect()方法来连接服务端

client.connect(login,passcode,successCallback,errorCallback);

其中login和passcode都是字符串，相当于是用户的登录名和密码凭证。successCallback为连接成功的回调函数，errorCallback为连接失败的回调函数。
还可以这样写：

client.connect({
   
    login:'name',
    passcode:'666',
    'token':'2333'
},successCallback,errorCallback);

断开连接：

client.disconnect(function(){
   console.log("再见")})

Heart-beating（心跳）

heart-beating也就是消息传送的频率，incoming是接收频率，outgoing是发送频率，其默认值都为10000ms，我们可以手动设置：

client.heartbeat.outgoing = 5000; 
client.heartbeat.incoming = 0;

发送消息

客户端向服务端发送消息利用send()方法，此方法有三个参数：第一个参数（string）必需，为发送消息的目的地；第二个参数（object）可选，包含了额外的头部信息；第三个参数（string）可选，为发送的消息。

client.send(destination, {
   }, body);

订阅消息

订阅消息也就是客户端接收服务端发送的消息，订阅消息可以利用subscribe()方法，此方法有三个参数：第一个参数（string）必需，为接收消息的目的地；第二个参数必需为回调函数；第三个参数{object}为可选，包含额外的头部信息。

client.subscribe(destination, callback, {
   });

取消订阅消息可以利用unsubscribe()方法：

 let mySubscribe =  client.subscribe;
 mySubscribe.unsubscribe();

客户端订阅消息可以订阅广播，如下所示：

client.subscribe('/topic/msg',function(messages){
   
    console.log(messages);
})

也可以进行一对一消息的接收：

//第一种方式
const userId = 666;
client.subscribe('/user/' + userId + '/msg',,function(messages){
   
    console.log(messages);
})
//第二种方式
client.subscribe('/msg',function(messages){
   
    console.