feat: 添加检测scoket状态和accompanyError API

src/helpers/communication.ts

@@ -328,7 +328,33 @@ export const api_onoffAccompaniment = () => {
 export const addCheckPlayEnd = (callback: CallBack) => {
 	listenerMessage("checkPlayEnd", callback);
 };
+
 /** 取消监听延迟检测校返回 */
 export const removeCheckPlayEnd = (callback: CallBack) => {
 	removeListenerMessage("checkPlayEnd", callback);
+};
+
+/** 检查APP端websocket状态 */
+export const api_checkSocketStatus = () => {
+	return promisefiyPostMessage({ api: "checkSocketStatus" });
+};
+
+/** 监听APP发送的异常信息 */
+export const addAccompanyError = (callback: CallBack) => {
+	listenerMessage("accompanyError", callback);
+};
+
+/** 取消监听APP发送的异常信息 */
+export const removeAccompanyError = (callback: CallBack) => {
+	removeListenerMessage("accompanyError", callback);
+};
+
+/** 检测socket链接状态 */
+export const addSocketStatus = (callback: CallBack) => {
+	listenerMessage("socketConnectSuccessReport", callback);
+};
+
+/** 取消检测socket链接状态 */
+export const removeSocketStatus = (callback: CallBack) => {
+	removeListenerMessage("socketConnectSuccessReport", callback);
 };

src/view/evaluating/index.module.less

@@ -1,4 +1,27 @@
 .scoreMode{
     background: transparent;
     left: 10vw;
+}
+.tipBox {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 999;
+    background: #fff;
+    border-radius: 20px;
+    font-size: 12px;
+    .tipContent {
+        padding: 20px 20px 0;
+    }
+    .tipBtn {
+        border-radius: 20px;
+        background-color: var(--van-primary-color);
+        color: #fff;
+        width: 100px;
+        margin: 20px auto;
+        text-align: center;
+        line-height: 30px;
+        cursor: pointer;
+    }
 }

src/view/evaluating/index.tsx

@@ -22,6 +22,11 @@ import {
 	api_endCapture,
 	api_getDeviceDelay,
 	hideComplexButton,
+	api_checkSocketStatus,
+	addAccompanyError,
+	removeAccompanyError,
+	addSocketStatus,
+	removeSocketStatus,
 } from "/src/helpers/communication";
 import state, {
 	IPlayState,
@@ -64,14 +69,24 @@ export const evaluatingData = reactive({
 	isComplete: false,
 	/**  */
 	isDisabledPlayMusic: false,
+	/** socket异常状态弹窗 */
+	socketErrorPop: false,
 });
 
 /** 点击开始评测按钮 */
-export const handleStartEvaluat = () => {
+export const handleStartEvaluat = async () => {
 	if (state.modeType === "evaluating") {
 		handleCancelEvaluat();
 	} else {
-		handleStopPlay();
+		// 评测前先检查APP端的websocket状态
+		const res = await api_checkSocketStatus();
+		if (res?.content?.status === "connected") {
+			handleStopPlay();
+		} else {
+			// socket未连接
+			evaluatingData.socketErrorPop = true
+		}
+		
 	}
 	state.modeType = state.modeType === "evaluating" ? "practise" : "evaluating";
 	if (state.modeType !== "evaluating") {
@@ -430,6 +445,41 @@ const handleComplexButton = (res?: IPostMessage) => {
 	}
 };
 
+// 检测到APP发送的异常信息
+const handleAccompanyError = (res?: IPostMessage) => {
+	console.log('异常信息返回', res)
+	if (res?.content) {
+		const { type, reson } = res.content;
+		switch (type) {
+			case "playError":
+				// 播放异常
+				break;
+			case "enterBackground":
+				// App退到后台
+				break;
+			case "socketError":
+				// socket连接断开，评测中，则取消评测
+				if (state.modeType === "evaluating") {
+					handleCancelEvaluat();
+					evaluatingData.socketErrorPop = true
+				}
+				break;	
+			case "recordError":
+				// 录音异常
+				break;											
+			default:
+				break;
+		}
+	}
+};
+
+// 检测socket状态
+const handleSocketStatus = (res?: IPostMessage) => {
+	if (res?.content?.status === "connected") {
+		evaluatingData.socketErrorPop = false
+	}
+}
+
 export default defineComponent({
 	name: "evaluating",
 	setup() {
@@ -491,6 +541,8 @@ export default defineComponent({
 			sendResult(handleScoreResult);
 			hideComplexButton(handleComplexButton, true);
 			api_recordStartTime(recordStartTimePoint);
+			addAccompanyError(handleAccompanyError);
+			addSocketStatus(handleSocketStatus);
 			// 不是选段模式评测, 就清空已选段
 			if (!state.isSelectMeasureMode) {
 				clearSelection();
@@ -505,8 +557,18 @@ export default defineComponent({
 			hideComplexButton(() => {}, false);
 			api_remove_recordStartTime(recordStartTimePoint);
 			handle_reduction();
+			removeAccompanyError(handleAccompanyError);
+			removeSocketStatus(handleSocketStatus);
 			console.log("卸载评测模块成功");
 		});
-		return () => <div></div>;
+		return () => <div>
+				{
+					evaluatingData.socketErrorPop && 
+					<div class={styles.tipBox}>
+						<div class={styles.tipContent}>网络异常，正在重新链接...</div>
+						{/* <div class={styles.tipBtn} onClick={resetCheck}>再来一次</div> */}
+					</div>
+				}
+		</div>;
 	},
 });