daikan-international/src/components/chatRoom/index.vue

<template>
  <!-- 主区域 start  -->
  <div id="PageRtcLive">
    <chat
      v-show="chatShow"
      :chatList="chatList"
      :currentUser="currentUser"
    ></chat>
    <!-- 控制条 start -->
    <div class="controlBar" v-if="!showInput">
      <div class="saySomething" @click="onFocus">
        <!-- <i class="speakIcon"
           :class="{'dis':!user_info.IsWords}"></i> -->
        <span>说点什么~</span>
        <!-- <span>已被禁言</span> -->

        <div
          class="disSpeakBtn"
          @click.stop="chatShow = !chatShow"
          :class="{ dis: !chatShow }"
        ></div>
      </div>
      <!-- <div style="text-align: right; width: 100%">连接中...</div> -->
      <div class="control_btn">
        <div
          class="brushesBack"
          @click="onDrawUndo"
          :class="{ disabled: !canUndo }"
          v-if="unref(isBrushes) && isNativeLeader"
        ></div>
        <div
          class="brushes"
          v-if="isNativeLeader"
          :class="{ brushed: isBrushes }"
          @click="onDraw(!isBrushes)"
        ></div>

        <div class="invitation"></div>
        <!-- @click="openMember" -->
        <div v-if="isNativeLeader" class="members" @click="openMember"></div>
        <template v-if="isNativeLeader">
          <div class="mic_on" v-if="unref(disableMic)"></div>
          <div class="mic_no" v-if="!unref(disableMic)"></div>
        </template>

        <div style="font-size: 0.65rem">
          <ImageIcon type="scene" />
        </div>
        <div class="exit"></div>
      </div>
    </div>
    <!-- 控制条 start -->
    <!-- 主区域 end  -->
    <!-- 输入框 start-->
    <div class="layer" v-if="showInput" @click.stop="closeText">
      <div class="inputBox" @click.stop>
        <div class="msgBox">
          <input
            id="input_msg"
            type="text"
            maxlength="50"
            v-model.trim="text"
            :placeholder="`说点什么~`"
          />
          <span
            class="iconsend_icon"
            :class="{ disable: text == '' }"
            @click.stop="sendText"
            >发送</span
          >
        </div>
      </div>
    </div>
    <!-- 输入框 end-->
    <!-- 用户列表 start -->
    <memberList
      :data="[]"
      :show="showMember"
      :animateActive="animateActive"
      @close-member="closeMember"
    />
    <!-- 用户列表 end -->
  </div>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, onUnmounted, ref, unref } from "vue";
import { getApp, useApp } from "/@/hooks/userApp";
import { initSocketEvent } from "./roomControl";
import { createSocket } from "/@/hooks/userSocket";
import { useRtcSdk } from "/@/hooks/useTRTC";
import { useDraw } from "/@/hooks/useDraw";
import browser from "/@/utils/browser";
import ImageIcon from "/@/components/basic/icon/index.vue";
import { useRtcStore } from "/@/store/modules/rtc";
import type { SocketParams, RoleType } from "/@/store/modules/rtc";
import chat from "./chat.vue";
import memberList from "./memberList.vue";

import consola from "consola";

const { isDrawing, setDraw, setCloseDraw } = useDraw();

const rtcStore = useRtcStore();
const isNativeLeader = computed(() => rtcStore.role == "leader");
const showInput = ref(false);
const chatShow = ref(true);
const isBrushes = isDrawing;
const canUndo = ref(false);
const animateActive = ref(false);
const showMember = ref(false);
const disableMic = ref(false);
const isJoined = computed(() => rtcStore.isJoined);
const role = computed(() => rtcStore.role);
const text = ref<string>("");
const chatList = computed(() => rtcStore.chatList);
const currentUser = computed(() => rtcStore.userId);

//设置socket 参数
const initParams: SocketParams = {
  userId:
    browser.getURLParam("vruserId") ||
    `user_${browser.getURLParam("role")}${Math.floor(
      Math.random() * 100000000
    )}`,
  roomId:
    browser.getURLParam("roomId") ||
    `room_${Math.floor(Math.random() * 100000000)}`,
  role: (browser.getURLParam("role") as RoleType) || "leader",
  avatar: browser.getURLParam("avatar"),
  nickname: browser.getURLParam("name"),
  mode: browser.getURLParam("mode"),
};
consola.info({
  message: initParams,
  tag: "socket参数",
});
rtcStore.setSocketParams(initParams);

const socket = createSocket();
initSocketEvent(socket);
const { createRTCSocket } = useRtcSdk();

(async () => {
  await createRTCSocket();
})();

onMounted(async () => {
  const app = await useApp();
  app.Connect.follow.start({ follow: !unref(isNativeLeader) });
  app.Connect.follow.on("data", leaderSync);
  app.Connect.paint.on("data", leaderPaint);
});
onUnmounted(async () => {
  const app = await useApp();
  app.Connect.follow.off("data", leaderSync);
  app.Connect.paint.off("data", leaderPaint);
});

/* method */

const leaderSync = (data) => {
  if (unref(isNativeLeader) && unref(isJoined)) {
    socket.emit("sync", data);
  }
};
const leaderPaint = (data) => {
  if (unref(isNativeLeader) && unref(isJoined)) {
    const records = getApp().Connect.paint.records;
    canUndo.value = records?.length;
    socket.emit("paint", data);
  }
};

const onDrawUndo = async () => {
  let app = getApp();
  app.Connect.paint.undo();
  canUndo.value = app.Connect.paint.records.length > 0;

  console.log(app.Connect.paint.records, "app.Connect.paint.records");
};

const onDraw = async (status: boolean) => {
  // isBrushes.value = status;
  status && setDraw();
  !status && setCloseDraw();
  if (unref(isBrushes)) {
    const app = await useApp();
    console.log("app", app.Connect.paint);
    app.Connect.paint.show({
      role: unref(role),
      paint: isNativeLeader ? true : false,
    });
    if (unref(role) == "leader") {
      socket.emit("action", { type: "user-paint", open: true });
    }
  } else {
    const app = await useApp();
    app.Connect.paint.hide();
    if (unref(role) == "leader") {
      socket.emit("action", { type: "user-paint", open: false });
    }
  }
};

function closeText(): void {
  showInput.value = false;
  text.value = "";
}

function sendText(): void {
  if (text.value == "") {
    return;
  }
  let data = {
    role: rtcStore.role,
    mode: rtcStore.mode,
    Nickname: rtcStore.nickname,
    UserId: rtcStore.userId,
    text: text.value,
  };
  consola.info({
    message: data,
    tag: "发送信息",
  });
  socket.emit("action", {
    type: "danmumsg",
    data,
  });
  rtcStore.addToChatList(data);
  document.getElementById("input_msg")?.blur();
  closeText();
}
function onFocus(): void {
  showInput.value = true;
  nextTick(() => {
    document.getElementById("input_msg")?.focus();
  });
}
const openMember = () => {
  showMember.value = true;
  animateActive.value = true;
};
const closeMember = () => {
  animateActive.value = false;
  let t = setTimeout(() => {
    clearTimeout(t);
    showMember.value = false;
  }, 200);
};
</script>

<style scoped lang="scss">
@import "./chatroom.scss";
</style>