vue 直播间 源码

Vue 直播间源码的实现方式有多种，以下是一个简单的示例：

<template>
  <div>
    <h1>直播间</h1>
    <div>{{ currentViewer }}人正在观看直播</div>
    <div v-for="message in chatMessages" :key="message.id">
      {{ message.user }}: {{ message.content }}
    </div>
    <input v-model="newMessage" placeholder="输入聊天消息" />
    <button @click="sendMessage">发送</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentViewer: 0,
      chatMessages: [],
      newMessage: "",
    };
  },
  methods: {
    sendMessage() {
      if (this.newMessage.trim() !== "") {
        this.chatMessages.push({
          id: this.chatMessages.length + 1,
          user: "用户",
          content: this.newMessage.trim(),
        });
        this.newMessage = "";
      }
    },
  },
  mounted() {
    // 模拟每秒钟增加一个观众
    setInterval(() => {
      this.currentViewer++;
    }, 1000);
  },
};
</script>

以上代码实现了一个简单的vue直播间源码。其中，`currentViewer`表示当前观看直播的人数，`chatMessages`用来存储聊天消息，`newMessage`用于输入新的聊天消息。在`sendMessage`方法中，如果新的消息不为空，则将其添加到`chatMessages`数组中，并清空输入框。`mounted`钩子函数用于模拟每秒钟增加一个观众。页面中展示了观众人数、聊天消息列表和输入框发送消息的功能。