У меня проблема с отправкой личного сообщения с использованием socket.io и vue в качестве моего клиента

Question

Я пытаюсь настроить чат для приложения, и я работаю над этим, но, похоже, все работает не так, как я ожидаю. Я новичок в Vue и Socket.io. Я пытаюсь создать отдельную комнату для каждого человека, с которым я общаюсь.

Мой файл на стороне сервера node js. на моем мероприятии в комнате присоединения я получаю идентификатор пользователя, с которым хочу общаться, и использую тот же идентификатор пользователя для создания уникальной комнаты, надеясь, что только участники этих комнат чата смогут увидеть это сообщение

const http = require("http");
const express = require("express");
const socketio = require("socket.io");

const app = express();
const server = http.createServer(app);
const io = socketio(server);

let users = [];
let messages = [];
let index = 0;
let room;

io.on("connection", socket => {
  socket.emit("loggedIn", {
    messages: messages
  });
  socket.on("joinroom", ({ userId, username }) => {
    users.push(username);
    room = userId;
    socket.join(room);
  });
  socket.on("msg", msg => {
    let message = {
      index: index,
      userName: msg.username,
      timeStamp: msg.timeStamp,
      content: msg.message
    };
    messages.push(message);
    io.tp(message).emit("msg", message);
    index++;
  });
});

const PORT = 3000 || process.env.PORT;
server.listen(PORT, () => console.log(`server runinng on port ${PORT}`));

это мой код на стороне клиента.

<template>
  <div class="main-container">
    <div class="chat-screen-container">
      <div class="user-details">
        <img :src="$route.params.userPicture" alt />
        <h3>{{$route.params.username }}</h3>
        <v-icon @click.prevent="closeWindow" class="icon">mdi-account-arrow-left</v-icon>
      </div>
      <div class="messages-container">
        <Message :message="message" :key="index" v-for="(message, index) in messages" />
      </div>
      <div class="user-input-container">
        <textarea v-model="message" rows="1" placeholder="Write something..."></textarea>
        <button :disabled="!message" @click.prevent="sendMessage">Send</button>
      </div>
    </div>
  </div>
</template>

<script>
import Message from "../Messages/Message";
import io from "socket.io-client";
export default {
  created() {
    this.joinServer();
    this.fireUserDetails();
  },
  data() {
    return {
      socket: io("http://localhost:3000/"),
      messages: [],
      message: ""
    };
  },
  methods: {
    joinServer() {
      this.socket.on("loggedIn", data => {
        this.messages = data.messages;
      });
      this.listen();
    },
    listen() {
      this.socket.on("msg", message => {
        this.messages.push(message);
      });
    },
    fireUserDetails() {
      const userDetails = {
        userId: this.$route.params.userId,
        username: this.$route.params.username
      };
      this.socket.emit("joinroom", userDetails);
    },
    sendMessage() {
      this.socket.emit("msg", {
        message: this.message,
        username: "Tomer",
        timeStamp: new Date().getTime()
      });
      this.message = "";
    },
    closeWindow() {
      this.$router.push({
        name: "chat"
      });
    }
  },

  components: {
    Message
  }
};
</script>