У меня есть такой чат vue , когда кто-то пишет сообщение, то у всех пользователей одинаковый ник, каждый браузер видит свой ник, который он ввел. Как это исправить
<template>
  <div id="chat">
    <h1>Chat</h1>
    <div class="messages__container" ref="messagesContainer">  <!-- Добавлен ref -->
      <div v-for="msg in messages" :key="msg.id" class="message">
        <strong v-if="nickname !== ''">{{ nickname }}: </strong>
        <strong v-else>noname: </strong>
        {{ msg.text }}
      </div>
      <div ref="scrollAnchor" class="scroll-anchor"></div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Введите сообщение..." />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ChatComponent',
  data() {
    return {
      messages: [],
      newMessage: '',
      ws: null,
    };
  },
  created() {
    this.connectWebSocket();
  },
  beforeUnmount() {
    if (this.ws) {
      this.ws.close();
    }
  },
  computed: {
    ...mapState('player', ['nickname'])
  },
  methods: {
    connectWebSocket() {
      this.ws = new WebSocket('ws://26.161.24.213:8080');

      // Добавляем обработчик открытия соединения
      this.ws.onopen = () => {
        console.log('WebSocket connection established');
      };
      
      this.ws.onmessage = async (event) => {
        const blob = event.data;
        
        try {
          const text = await blob.text();

          const msg = JSON.parse(text);

          this.messages.push({ id: this.messages.length, text: msg.text });

          this.$nextTick(() => {
            this.scrollBottom();
          });
        } catch (error) {
          console.error('Error processing message:', error);
        }
      };

      // Также хорошо бы добавить обработчик ошибок
      this.ws.onerror = (error) => {
        console.error('WebSocket error:', error);
      };

      this.ws.onclose = () => {
        console.log('WebSocket connection closed. Reconnecting...');
        setTimeout(() => this.connectWebSocket(), 1000); // Переподключение через 1 секунду
      };
    },
    sendMessage() {
      if (this.newMessage.trim() === '') return;

      // Проверяем состояние соединения перед отправкой
      if (this.ws.readyState !== WebSocket.OPEN) {
        console.error('WebSocket is not open. Current state:', this.ws.readyState);
        this.connectWebSocket();
        return;
      }

      const message = { text: this.newMessage };
      this.ws.send(JSON.stringify(message));
      this.newMessage = '';

      this.$nextTick(() => {
        this.scrollBottom();
      });
    },
    scrollBottom() {
      const container = this.$refs.messagesContainer;
      if (container) {
        container.scrollTop = container.scrollHeight;
      }
    },
  },
};
</script>

<style scoped>
#chat {
  display: flex;
  flex-direction: column;
  height: 250px;
  width: 300px;
  border: lightgreen solid 2px;
  padding: 10px 10px 0px 10px;
}
.messages__container {
  flex: 1;
  max-height: 100px;
  overflow-y: auto;
  box-sizing: border-box;
  margin-bottom: 10px;

  scrollbar-width: thin;           /* Firefox */
  scrollbar-color: lightgreen #222; /* Цвет "ползунка" и "трек" (фон полосы) для Firefox */
  background-color: #222;
}
/* Для WebKit браузеров (Chrome, Safari, Edge) */
.messages__container::-webkit-scrollbar {
  width: 8px;
}
.messages__container::-webkit-scrollbar-track {
  background: #222; /* трек (фон скролл-бара) */
  border-radius: 4px;
}

.messages__container::-webkit-scrollbar-thumb {
  background-color: lightgreen; /* цвет ползунка */
  border-radius: 4px;
  border: 2px solid #222; /* отступ (спейс) вокруг ползунка — создаёт эффект inset */
}

.messages__container::-webkit-scrollbar-thumb:hover {
  background-color: #a0ff7a; /* чуть светлее при наведении */
}
.message {
  margin: 5px 0;
  padding: 5px;
  color: white;
  border: lightgreen solid 2px;
  font-family: monospace;
}
.scroll-anchor {
  height: 1px;
  width: 100%;
  visibility: hidden;
}
</style>