From d9e812fbb1e1873757d8edf7938da56cab7cd8ad Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期五, 09 八月 2024 17:00:02 +0800
Subject: [PATCH] feat：通过Websocket根据教师会议命令执行操作
---
src/views/meet/index.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 89 insertions(+), 24 deletions(-)
diff --git a/src/views/meet/index.vue b/src/views/meet/index.vue
index 90bdb15..35a13e0 100644
--- a/src/views/meet/index.vue
+++ b/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 => {
// 鎴块棿鐨刬d鏄竴涓瓙鍩熷悕锛屼笖@绗﹀墠鐨勪細璁悕绉版槸缁忚繃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%;
}
--
Gitblit v1.8.0