import { ElMessage } from 'element-plus'
import store from '../store'
let websocket: WebSocket | null = null; // 用于存儲(chǔ)實(shí)例化后websocket
let rec: any; // 斷線重連后，延遲5秒重新創(chuàng)建WebSocket連接  rec用來(lái)存儲(chǔ)延遲請(qǐng)求的代碼
// 創(chuàng)建websocket
function creatWebSocket(wsUrl: string) {
  console.log("websocket==================");
  // 判斷當(dāng)前瀏覽器是否支持WebSocket
  if ("WebSocket" in window) {
    console.log("當(dāng)前瀏覽器支持 WebSocket");
  } else if ("MozWebSocket" in window) {
    console.log("當(dāng)前瀏覽器支持 MozWebSocket");
  } else {
    console.log("當(dāng)前瀏覽器不支持 WebSocket");
  }
  try {
    initWebSocket(wsUrl); // 初始化websocket連接
  } catch (e) {
    console.log("嘗試創(chuàng)建連接失敗");
    reConnect(wsUrl); // 如果無(wú)法連接上 webSocket 那么重新連接！可能會(huì)因?yàn)榉?wù)器重新部署，或者短暫斷網(wǎng)等導(dǎo)致無(wú)法創(chuàng)建連接
  }
}
// 初始化websocket
function initWebSocket(wsUrl: string) {
  websocket = new WebSocket(wsUrl);
  console.log("websocket:", websocket);
  websocket.onopen = function () {
    websocketOpen();
  };
  //   // 接收
  websocket.onmessage = function (e: MessageEvent<any>) {
    websocketonmessage(e);
  };
  // 連接發(fā)生錯(cuò)誤
  websocket.onerror = function () {
    console.log("WebSocket連接發(fā)生錯(cuò)誤");
    //     isConnect = false; // 連接斷開(kāi)修改標(biāo)識(shí)
    reConnect(wsUrl); // 連接錯(cuò)誤 需要重連
  };
  websocket.onclose = function (e) {
    websocketclose(e);
  };
}
// 定義重連函數(shù)
let reConnect = (wsUrl: string) => {
  console.log("嘗試重新連接");
  if (store.state.isConnected) return; // 如果已經(jīng)連上就不在重連了
  rec && clearTimeout(rec);
  rec = setTimeout(function () {
    // 延遲5秒重連  避免過(guò)多次過(guò)頻繁請(qǐng)求重連
    creatWebSocket(wsUrl);
  }, 5000);
};
// 創(chuàng)建連接
function websocketOpen() {
  console.log("連接成功");
  store.dispatch('connect'); // 修改連接狀態(tài)
}
// 數(shù)據(jù)接收
function websocketonmessage(e: MessageEvent<any>) {
  console.log("數(shù)據(jù)接收", e.data);
  const data = JSON.parse(e.data);  // 解析JSON格式的數(shù)據(jù)
  // 下面的判斷則是后臺(tái)返回的接收到的數(shù)據(jù)  如何處理自己決定
  if (data.code === 400) {
    console.log("數(shù)據(jù)接收", data.msg);
    ElMessage({
      showClose: true,
      message: data.msg,
      type: 'warning',
    })
  } else if (data.code === 404) {
    ElMessage({
      showClose: true,
      message: data.msg,
      type: 'warning',
    })
  } else if (data.code === 0) {
    ElMessage({
      showClose: true,
      message: "連接成功",
      type: 'success',
    })
  } else if (data.code === 200) {
    ElMessage({
      showClose: true,
      message: data.msg,
      type: 'success',
    })
    // 成功后的相應(yīng)處理  此處成功后播放音樂(lè)
    const audio = new Audio('./tipMusic.mp3');
    audio.play();
  } else {
    ElMessage({
      showClose: true,
      message: data.msg,
      type: 'error',
    })
    // 延時(shí)5秒后刷新頁(yè)面
    setTimeout(() => {
      location.reload();
    }, 1000);
  }
  // let data = JSON.parse(decodeUnicode(e.data))
}
// 關(guān)閉
function websocketclose(e: any) {
  console.log(e);
  store.dispatch('disconnect'); // 修改連接狀態(tài)
  console.log("connection closed (" + e.code + ")");
}
// 數(shù)據(jù)發(fā)送
function websocketsend(data: any) {
  console.log("發(fā)送的數(shù)據(jù)", data, JSON.stringify(data));
  if (websocket && store.state.isConnected) { // 檢查連接狀態(tài)
    websocket.send(JSON.stringify(data));
  } else {
    ElMessage({
      showClose: true,
      message: "請(qǐng)選擇設(shè)備連接",
      type: 'error',
    })
  }
}
// 實(shí)際調(diào)用的方法==============
// 發(fā)送
function sendWebSocket(data: any) {
  // 如果未保持連接狀態(tài) 不允許直接發(fā)送消息 提示請(qǐng)選擇連接設(shè)備
  if (!store.state.isConnected) {
    ElMessage({
      showClose: true,
      message: "請(qǐng)選擇設(shè)備連接",
      type: 'error',
    })
  } else {
    websocketsend(data);
    console.log("------------------");
  }
}
// 關(guān)閉
let closeWebSocket = () => {
  if (websocket) {
    websocket.close();
    ElMessage({
      showClose: true,
      message: "設(shè)備已關(guān)閉",
      type: 'success',
    })
  }
};
export {
  initWebSocket,
  sendWebSocket,
  creatWebSocket,
  closeWebSocket,
};

import { createStore } from 'vuex'
const store = createStore({
  state: {
    isConnected: false,//連接狀態(tài)
  },
  mutations: {
    setConnected(state: any, isConnected: boolean) {
      state.isConnected = isConnected
    },
  },
  actions: {
    connect({ commit }: { commit: any }) {
      // 連接成功后，將 isConnected 狀態(tài)設(shè)置為 true
      commit('setConnected', true)
    },
    disconnect({ commit }: { commit: any }) {
      // 斷開(kāi)連接或退出登錄時(shí)，將 isConnected 狀態(tài)設(shè)置為 false
      commit('setConnected', false)
    }
  }
})
export default store

<script setup lang="ts">
import { ref ,onMounted} from 'vue'
import { closeWebSocket,initWebSocket } from '../../utils/websocket'
import { useStore } from 'vuex';
const store = useStore()
//連接設(shè)備  （具體路徑和后端規(guī)定）
function connectMsg() {
  const toIp = `ws://192.168.50.50:8822/websocket/ipad/${roomId.value}`;
  store.dispatch('connect')
  initWebSocket(toIp)
}
// 設(shè)備斷開(kāi)
function closeWs() {
  closeWebSocket()
  store.dispatch('disconnect')
}
</script>

<template>
<div class="connect">
? ? ? ? ? <el-button class="elbtn" @click="connectMsg">連接設(shè)備</el-button>
? ? ? ? <el-button class="elbtn" @click="closeWs">關(guān)閉設(shè)備</el-button>
? ? ? ? </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import { sendWebSocket } from '../../utils/websocket'
const courseTopic = ref('')
const courseGrowth = ref('')
const todayHaul = ref('')
const selectedTeacher = ref('')
//提交
const harvestSubmit = () => {
? // 要發(fā)送的數(shù)據(jù)? 和后端定義格式
? const harvestData = {
? ? "HandlerType": "COURSEREFLECT",
? ? "topicReflect": courseTopic.value,
? ? "growReflect": courseGrowth.value,
? ? "harvest": todayHaul.value,
? ? "teacher": "李老師"
}
? ? console.log("提交反思與收獲數(shù)據(jù)",harvestData);?
? // 發(fā)送消息給后端
? ? sendWebSocket(harvestData)
? }
</script>
<template>
? ? ? ? <div class="think">
? ? ? ? ? <p>課程反思</p>
? ? ? ? <el-input v-model="courseTopic" :rows="3" type="textarea" placeholder="主題課程" />
? ? ? ? <el-input v-model="courseGrowth" :rows="3" type="textarea" placeholder="適性成長(zhǎng)課程" />
? ? ? ? <p>今日收獲</p>
? ? ? ? <el-input v-model="todayHaul" :rows="3" type="textarea" ?/>
? ? ? ? </div>
? ? ? ? <div class="btn">
? ? ? ? ? ? <button @click="harvestSubmit"> 提交</button>
? ? ? ? ? </div>
? ? </template>