feat:添加webscoket

ZhangXianQiang

2024-07-03 229894d52a0f4cdca90bebfde323104d1810ef4f

 src/views/exam/index.vue

@@ -130,7 +130,7 @@
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { ref, watchEffect, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { Close, Timer } from '@element-plus/icons-vue';
import AnswerTag from './components/answer-tag/index.vue';
@@ -146,15 +146,19 @@
import AnswerShort from './components/answer-main/answer-short/index.vue';
import AnswerCount from './components/answer-main/answer-count/index.vue';

import { useExamStore } from '@/store/index.js';
import { useExamStore, useUserStore } from '@/store/index.js';
import { useRouter } from 'vue-router';

import { submitExam } from '@/api/modules/exam.js';
import useWebScoket from '@/hooks/useWebScoket.js';


const router = useRouter();

const examStore = useExamStore();
const userStore = useUserStore();

const { userInfo } = storeToRefs(userStore);
const { currentType, currentIndex, examDetail, examType, examInfo } = storeToRefs(examStore);

const typeComponent = {
@@ -172,17 +176,25 @@
const submitDialog = ref(false);
const timeDialog = ref(false);

const { status, message, error, connect, disconnect, sendMessage } = useWebScoket({
  url: 'ws://192.168.3.64:8000/websocket/' + userInfo.value.id,
  heartBeatData: 'ping'
});


// 上一题
const prevQuestion = () => {
  currentIndex.value--;
  checkList();
};

// 下一题
const nextQuestion = () => {
  currentIndex.value++;
  checkList();
};

// 查询题目
const checkList = () => {
  let tempIndex = 0;
  const typeQuestion = examDetail.value.find((typeItem, index) => {
@@ -218,7 +230,6 @@

};


// 退出考试
const closeClick = () => {
  quitDialog.value = true;
@@ -244,12 +255,15 @@

// 时间结束
const timeOut = () => {
  resetAllDialog();
  timeDialog.value = true;
  const temp = {
    ...examInfo.value,
    titleList: examDetail.value
  };
  timeDialog.value = true;
  resetAllDialog();

  disconnect();
  
  submitExam(temp).then(res => {
    returnBack();
  }).catch(() => {
@@ -274,6 +288,17 @@
  });
  examStore.setProgress(progress);
});

watch(() => message.value, (msg) => {
  console.log(msg);
});


// -----------------------------------生命周期
onMounted(() => {
  // 连接webscoket
  connect();
});
</script>

<style lang="scss" scoped>