vue3-前端实现websocket-私聊

websocket实现简易私聊

<template>
  <div>
    <div class="user-list">
      <div
        v-for="user in userList"
        :key="user.id"
        @click="openPrivateChat(user)"
        :class="{ active: activeUser && activeUser.id === user.id }"
      >
        {{ user.username }}
      </div>

      <div
        
      >
        {{ this.urname }}
      </div>

    </div>
    <div v-if="activeUser" class="messages">
      <div v-for="message in activeUserMessages" :key="message.id">
        <strong>{{ message.sender }}:</strong> {{ message.text }}
      </div>
      <div v-for="message in sendUserMessages" :key="message.id">
        <strong>{{ message.sender }}:</strong> {{ message.text }}
      </div>
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" :disabled="!activeUser" placeholder="Type your message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      inputMessage: "",
      userList: [], // 用户列表
      activeUser: null, // 当前私聊用户
      userMessages: {} ,// 每个用户的消息数组
      urname:''
    };
  },
  created() {
    this.connectWebSocket();
    var user ={"username":"user02","id":1};
    var user2 ={"username":"user03","id":2};
    var user3 ={"username":"user04","id":3};
    var user4 ={"username":"user05","id":4};
    var user5 ={"username":"user06","id":5};
    this.userList.push(user);
    this.userList.push(user2);
    this.userList.push(user3);
    this.userList.push(user4);
    this.userList.push(user5);
    // 假设这里有用户列表的初始化
  },
  computed: {
    activeUserMessages() {
      return this.userMessages[this.activeUser.username] || [];
    },
    sendUserMessages(){
        return this.userMessages[this.urname] || [];
    },
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket("ws://localhost:2009/api/v1/ws");
      this.ws.onmessage = event => {
        const message = JSON.parse(event.data);
        if (message.private) {
          this.handlePrivateMessage(message);
        }
      };
    },
    sendMessage() {
      if (this.activeUser) {
          var username=localStorage.getItem("userName"); 
          this.urname=username;
        const message = {
          sender: username, // 设置实际的发送者信息
          text: this.inputMessage,
          private: true, // 标记私聊消息
          recipient: this.activeUser.id // 接收者
        };
        this.ws.send(JSON.stringify(message));
        this.inputMessage = "";
        // this.userMessages[this.activeUser.id] = [...this.userMessages[this.activeUser.id] || [], message];
        console.log("======"+this.activeUser.id)
      }
    },
    openPrivateChat(user) {
      this.activeUser = user;
    },
    handlePrivateMessage(message) {
        console.log(this.userMessages[message.sender])
      if (this.userMessages[message.sender]) {
        this.userMessages[message.sender].push(message);
         console.log("111111=="+[...this.userMessages[message.sender]])
      } else {
        this.userMessages[message.sender] = [message];
      }
     
    }
  }
};
</script>

websocket实现简易群聊

<template>
  <div>
    <div class="messages">
      <div v-for="message in messages" :key="message.id">
        <strong>{{ message.sender }}:</strong> {{ message.text }}
      </div>
    </div>
    <input v-model="inputMessage" @keyup.enter="sendMessage" placeholder="Type your message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      ws: null,
      messages: [],
      inputMessage: ""
    };
  },
  created() {
    this.connectWebSocket();
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket("ws://localhost:2009/api/v1/ws");
      this.ws.onmessage = event => {
        const message = JSON.parse(event.data);
        this.messages.push(message);
      };
    },
    sendMessage() {
       var username=localStorage.getItem("userName"); 
      const message = {
        sender: username, // Set the actual sender
        text: this.inputMessage
      };
      this.ws.send(JSON.stringify(message));
      this.inputMessage = "";
    }
  }
};
</script>