feat：通过Websocket根据教师会议命令执行操作

龚焕茏

2024-08-09 d9e812fbb1e1873757d8edf7938da56cab7cd8ad

feat：通过Websocket根据教师会议命令执行操作

 src/views/meet/index.vue

@@ -9,7 +9,7 @@
          <el-row :gutter="5">
            <el-col :span="12">
              <el-input placeholder="搜索学员" size="small" clearable @input="getStudentList" @clear="getStudentList"
                        v-model="searchForm.keyword"/>
                v-model="searchForm.keyword" />
            </el-col>
            <el-col :span="2">
              <el-button type="primary" size="small" @click="getStudentList">搜索</el-button>
@@ -19,18 +19,29 @@
            <el-tab-pane label="在线学员" name="1"></el-tab-pane>
            <el-tab-pane label="离线学员" name="0"></el-tab-pane>
          </el-tabs>
          <el-row :gutter="20" v-for="student in showStudentList" :key="student.id" class="student-row">
            <el-col :span="18">
              <div>
                {{ student.realName }}
              </div>
            </el-col>
            <el-col :span="6">
              <div :class="{online: student.onlineStatus === 1, outline: student.onlineStatus === 0}">
                {{ getStatus(student.onlineStatus) }}
              </div>
            </el-col>
          </el-row>
          <el-table :data="showStudentList" style="width: 100%">
            <el-table-column prop="realName" label="学员姓名"></el-table-column>
            <el-table-column prop="id" label="操作" width="80px;">
              <template slot-scope="scope">
                <el-dropdown trigger="click" @command="handleCommand">
                  <i class="el-icon-more-outline" id="more"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item :command="{ command: 'openCamera', id: scope.row.id }">打开摄像头</el-dropdown-item>
                    <el-dropdown-item :command="{ command: 'mute', id: scope.row.id }">静音</el-dropdown-item>
                    <el-dropdown-item :command="{ command: 'kickOut', id: scope.row.id }">踢出</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
            <el-table-column prop="onlineStatus" label="状态" width="80px;">
              <template slot-scope="scope">
                <div :class="{ online: scope.row.onlineStatus === 1, outline: scope.row.onlineStatus === 0 }">
                  {{ getStatus(scope.row.onlineStatus) }}
                </div>
              </template>
            </el-table-column>
          </el-table>
          <el-button class="link-left" type="primary" size="small" @click="muteEveryone">全体静音</el-button>
        </el-row>
      </div>
    </div>
@@ -39,10 +50,10 @@

<script>
import { getStudentList } from '@/api/meet'

export default {
  data () {
  data() {
    return {
      ws: null,
      jitsiApi: null,
      width: 0,
      height: 0,
@@ -60,34 +71,77 @@
      showStudentList: []
    }
  },
  beforeDestroy() {
    if (this.ws) {
      this.ws.close();
    }
  },
  methods: {
    hiddenStudent () {
    muteEveryone() {
      this.jitsiApi.executeCommand('muteEveryone', 'video');
    },
    handleCommand(command) {
      this.sendMessage(JSON.stringify(command))
    },
    initWebSocket() {
      this.ws = new WebSocket('ws://127.0.0.1:8000/websocket/' + 1);
      let ws = this.ws;
      ws.onopen = () => {
        console.log('WebSocket 连接成功');
        // 发送心跳数据
        ws.send('ping');
      };
      ws.onmessage = (event) => {
        console.log('收到服务器消息:', event.data);
        // 处理服务器发来的消息
      };
      ws.onerror = (error) => {
        console.error('WebSocket 连接出错:', error);
      };
      ws.onclose = () => {
        console.log('WebSocket 连接已关闭');
        // 可以在这里尝试重新连接
      };

      // 组件销毁时断开 WebSocket 连接
      this.$once('hook:beforeDestroy', () => {
        ws.close();
      });
    },
    sendMessage(message) {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(message);
      } else {
        console.error('WebSocket 连接未打开');
      }
    },
    hiddenStudent() {
      this.showStudent = !this.showStudent
    },
    changeJitsiWindowSize (width, height) {
    changeJitsiWindowSize(width, height) {
      this.jitsiApi.resizeLargeVideo(width, height)
    },
    getShowText () {
    getShowText() {
      if (this.showStudent) {
        return '隐藏'
      } else {
        return '显示'
      }
    },
    getStatus (status) {
    getStatus(status) {
      if (status === 1) {
        return '在线'
      } else if (status === 0) {
        return '离线'
      }
    },
    handleTabChange (tab) {
    handleTabChange(tab) {
      let status = parseInt(tab.name)
      this.showStudentList = this.studentList.filter(student => {
        return student.onlineStatus === status
      })
    },
    getStudentList () {
    getStudentList() {
      let params = {
        keyword: this.searchForm.keyword
      }
@@ -98,7 +152,7 @@
        })
      })
    },
    getRoomInfo () {
    getRoomInfo() {
      this.jitsiApi.getRoomsInfo().then(rooms => {
        rooms.rooms.forEach(room => {
          // 房间的id是一个子域名，且@符前的会议名称是经过URL编码的
@@ -128,7 +182,7 @@
      })
    }
  },
  mounted () {
  mounted() {
    this.height = window.innerHeight
    this.meetId = this.$route.query.meetId
    this.getStudentList()
@@ -209,8 +263,11 @@
    this.intervalId = setInterval(() => {
      this.getRoomInfo()
    }, 2500)

    // 初始化
    this.initWebSocket();
  },
  beforeDestroy () {
  beforeDestroy() {
    // 清除定时器，避免内存泄漏
    if (this.intervalId) {
      clearInterval(this.intervalId)
@@ -222,6 +279,14 @@
</script>

<style lang="scss" scoped>
/deep/ thead {
  display: none;
}

#more:hover {
  cursor: pointer;
}

#meet {
  height: 100%;
}