vue3使用websocket实现播放语音功能

onMounted(() => {
				var lockReconnect = false; //避免ws重复连接
				var ws = null; // 判断当前浏览器是否支持WebSocket
				var wsUrl = "ws:121.41.170.54:2346";//要链接的地址，仅为示例
				createWebSocket(wsUrl); //连接ws
				function createWebSocket(url) {
					try {
						if ('WebSocket' in window) {
							ws = new WebSocket(url);
						}
						initEventHandle();
					} catch (e) {
						// reconnect(url);
						console.log(e);
					}
				}
				function initEventHandle() {
					ws.onclose = function() {
						reconnect(wsUrl);
						console.log("llws连接关闭!" + new Date().toLocaleString());
					};
					ws.onerror = function() {
						reconnect(wsUrl);
						console.log("llws连接错误!");
					};
					ws.onopen = function() {
						heartCheck.reset().start(); //心跳检测重置
						console.log("llws连接成功!" + new Date().toLocaleString());
			
					};
					ws.onmessage = function(event) { //如果获取到消息，心跳检测重置
						heartCheck.reset().start(); //拿到任何消息都说明当前连接是正常的
						if (event.data != 'pong') {
							console.log(event.data);
							let data = JSON.parse(event.data);
							var name = "昨日计划未完成人员名单如下:";
							if (data.names.length > 0) {
								for (var i = 0; i < data.names.length; i++) {
									name += data.names[i].name + ','
								}
							}
							const synth = window.speechSynthesis;
							const msg = new SpeechSynthesisUtterance();
							msg.text = name; // 文字内容
							msg.lang = "zh-CN"; // 使用的语言:中文
							msg.volume = 1; // 声音音量：0-1
							msg.rate = 0.5; // 语速：0-10
							msg.pitch = 1; // 音高：0-1
							synth.speak(msg); // 播放
			
						}
					};
				}
				// 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
				window.onbeforeunload = function() {
					ws.close();
				}
			
				function reconnect(url) {
					if (lockReconnect) return;
					lockReconnect = true;
					setTimeout(function() { //没连接上会一直重连，设置延迟避免请求过多
						createWebSocket(url);
						lockReconnect = false;
					}, 2000);
				}
				//心跳检测
				var heartCheck = {
					timeout: 5000, //5秒发一次心跳
					timeoutObj: null,
					serverTimeoutObj: null,
					reset: function() {
						clearTimeout(this.timeoutObj);
						clearTimeout(this.serverTimeoutObj);
						return this;
					},
					start: function() {
						var self = this;
						this.timeoutObj = setTimeout(function() {
							//这里发送一个心跳，后端收到后，返回一个心跳消息，
							//onmessage拿到返回的心跳就说明连接正常
							ws.send("ping");
							// console.log("ping!")
							self.serverTimeoutObj = setTimeout(
								function() { //如果超过一定时间还没重置，说明后端主动断开了
									ws
										.close(); //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
								}, self.timeout)
						}, this.timeout)
					}
				}
			});

通讯参考文章：https://blog.csdn.net/xiaoweizy_id/article/details/123823752?spm=1001.2014.3001.5502