Feat: use protobuf

package.json

@@ -26,6 +26,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.4",
     "terser": "^5.18.2",
+    "ts-proto": "^1.161.1",
     "vue": "^3.3.4",
     "vue-router": "^4.2.4"
   },

proto.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+protoc --plugin=./node_modules/.bin/protoc-gen-ts_proto --ts_proto_opt=env=browser,esModuleInterop=true,useOptionals=messages --ts_proto_out=. ./src/proto/*.proto

src/components/RoomList.vue

@@ -81,7 +81,7 @@ onMounted(() => {
           <el-option label="房间ID" value="roomId" />
           <el-option label="房间人数" value="peopleNum" />
           <el-option label="创建人首字母" value="creator" />
-          <el-option label="创建时间" value="createAt" />
+          <el-option label="创建时间" value="createdAt" />
           <el-option label="是否有密码" value="needPassword" />
         </el-select>
         <button
@@ -113,7 +113,7 @@ onMounted(() => {
             }}</span>
           </div>
           <div class="truncate">创建者：{{ item.creator }}</div>
-          <div>创建时间：{{ new Date(item.createAt).toLocaleString() }}</div>
+          <div>创建时间：{{ new Date(item.createdAt).toLocaleString() }}</div>
         </div>
         <div class="flex p-2 w-full justify-between items-center">
           <el-tag disabled :type="item.needPassword ? 'danger' : 'success'">

src/plugins/sync.ts

@@ -1,16 +1,13 @@
 import { roomStore } from "@/stores/room";
 import { devLog, debounces } from "@/utils/utils";
 import { useDebounceFn } from "@vueuse/core";
-import { WsMessageType } from "@/types/Room";
 import { ElNotification } from "element-plus";
+import { ElementMessage, ElementMessageType } from "@/proto/message";
 const room = roomStore();
 
 interface callback {
-  "set-player-status": (
-    data: string | ArrayBuffer | Blob,
-    useBuffer?: boolean | undefined
-  ) => boolean;
-  "ws-send": (msg: string) => void;
+  publishStatus: (msg: ElementMessage) => boolean;
+  sendDanmuku: (msg: string) => void;
 }
 
 interface resould {
@@ -28,13 +25,11 @@ export const sync = (cbk: callback): resould => {
   let player: Artplayer | undefined = undefined;
   const publishSeek = useDebounceFn((currentTime: number) => {
     if (!player || player.option.isLive) return;
-    cbk["set-player-status"](
-      JSON.stringify({
-        Type: WsMessageType.ChangeSeek,
-        Seek: currentTime,
-        Rate: player.playbackRate
-      })
-    );
+    cbk["publishStatus"]({
+      type: ElementMessageType.CHANGE_SEEK,
+      seek: currentTime,
+      rate: player.playbackRate
+    });
     devLog("视频空降，:", player.currentTime);
   }, debounceTime);
 
@@ -45,13 +40,11 @@ export const sync = (cbk: callback): resould => {
 
   const publishPlay = () => {
     if (!player || player.option.isLive) return;
-    cbk["set-player-status"](
-      JSON.stringify({
-        Type: WsMessageType.Play,
-        Seek: player.currentTime,
-        Rate: player.playbackRate
-      })
-    );
+    cbk["publishStatus"]({
+      type: ElementMessageType.PLAY,
+      seek: player.currentTime,
+      rate: player.playbackRate
+    });
   };
 
   const publishPlayDebounce = debounce(publishPlay);
@@ -75,13 +68,11 @@ export const sync = (cbk: callback): resould => {
 
   const publishPause = () => {
     if (!player || player.option.isLive) return;
-    cbk["set-player-status"](
-      JSON.stringify({
-        Type: WsMessageType.Pause,
-        Seek: player.currentTime,
-        Rate: player.playbackRate
-      })
-    );
+    cbk["publishStatus"]({
+      type: ElementMessageType.PAUSE,
+      seek: player.currentTime,
+      rate: player.playbackRate
+    });
   };
 
   const publishPauseDebounce = debounce(publishPause);
@@ -97,13 +88,11 @@ export const sync = (cbk: callback): resould => {
 
   const publishRate = () => {
     if (!player || player.option.isLive) return;
-    cbk["set-player-status"](
-      JSON.stringify({
-        Type: WsMessageType.ChangeRate,
-        Seek: player.currentTime,
-        Rate: player.playbackRate
-      })
-    );
+    cbk["publishStatus"]({
+      type: ElementMessageType.CHANGE_RATE,
+      seek: player.currentTime,
+      rate: player.playbackRate
+    });
     devLog("视频倍速,seek:", player.currentTime);
   };
 
@@ -129,16 +118,14 @@ export const sync = (cbk: callback): resould => {
         setAndNoPublishRate(room.currentMovieStatus.rate);
         console.log("rate同步成功:", art.playbackRate);
         room.currentMovieStatus.playing ? setAndNoPublishPlay() : setAndNoPublishPause();
-        cbk["ws-send"]("PLAYER：视频已就绪");
+        cbk["sendDanmuku"]("PLAYER：视频已就绪");
 
         intervals.push(
           setInterval(() => {
-            cbk["set-player-status"](
-              JSON.stringify({
-                Type: WsMessageType.CheckSeek,
-                Seek: art.currentTime
-              })
-            );
+            cbk["publishStatus"]({
+              type: ElementMessageType.CHECK_SEEK,
+              seek: art.currentTime
+            });
           }, 5000)
         );
       });
@@ -175,7 +162,7 @@ export const sync = (cbk: callback): resould => {
             message: "由于浏览器限制，播放器已静音，请手动开启声音"
           });
         });
-        cbk["ws-send"]("PLAYER：视频已就绪");
+        cbk["sendDanmuku"]("PLAYER：视频已就绪");
       });
     }
   };