styles.css

html, body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#chat {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

input {
  width: 600px;
  border: 1px solid #ddd;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
}

button {
  width: 600px;
  height: 50px;
  font-size: 14px;
  background: #069;
  text-align: center;
  line-height: 50px;
  font-weight: bold;
  color: #FFF;
  margin-top: 10px;
}

.messages {
  width: 600px;
  height: 400px;
  margin: 20px 0;
  border: 1px solid #ddd;
  padding: 20px;
}

2 problemas basicos dessa sua app...

Apesar De Cada Client Receber Um Id Unico... Qualquer Client Pode Usar O Mesmo "Author".
Não Tem Um TimeOut Para Limpar As Mensagens O Que Provocará Um Sobre Carregamento De Dados Na Pagina Quando Varias Mensagens Ficarem Alojadas Em Memoria.

Possiveis Soluções:

• Criar Sistema De Registo Para Cada Usuário. Podendo Assim Cada Client Interagir Entre Outros Em Privado, Melhor Controlo De Clients Para Evitar Infrigir Algumas Regras(Racismo, Preconceitos, Comportamentos Desviantes, etc.) Assim Podendo Dar Kick Do Chat/Ban Ou Ainda Um Poder Extra Para Admins/Moderadores.

• Criar Um Registo De Tempo Para Cada Mensagem Para Melhor Registo E Leitura Do Client E Para Auto Deletar-se Com Com Um Timeout Em 24 Evitando Assim Deletar Todas As Mensagens De Uma Vez Só E Criar Um App De Chat Automatizado E Dinamicamente Controlado.

2 problemas basicos dessa sua app...

Apesar De Cada Client Receber Um Id Unico... Qualquer Client Pode Usar O Mesmo "Author".
Não Tem Um TimeOut Para Limpar As Mensagens O Que Provocará Um Sobre Carregamento De Dados Na Pagina Quando Varias Mensagens Ficarem Alojadas Em Memoria.

Possiveis Soluções:

• Criar Sistema De Registo Para Cada Usuário. Podendo Assim Cada Client Interagir Entre Outros Em Privado, Melhor Controlo De Clients Para Evitar Infrigir Algumas Regras(Racismo, Preconceitos, Comportamentos Desviantes, etc.) Assim Podendo Dar Kick Do Chat/Ban Ou Ainda Um Poder Extra Para Admins/Moderadores.
• Criar Um Registo De Tempo Para Cada Mensagem Para Melhor Registo E Leitura Do Client E Para Auto Deletar-se Com Com Um Timeout Em 24 Evitando Assim Deletar Todas As Mensagens De Uma Vez Só E Criar Um App De Chat Automatizado E Dinamicamente Contr

projeto criado apenas para demonstrar uso de socket
https://www.youtube.com/watch?v=-jXfKDYJJvo

2 problemas basicos dessa sua app...

Apesar De Cada Client Receber Um Id Unico... Qualquer Client Pode Usar O Mesmo "Author".
Não Tem Um TimeOut Para Limpar As Mensagens O Que Provocará Um Sobre Carregamento De Dados Na Pagina Quando Varias Mensagens Ficarem Alojadas Em Memoria.

Possiveis Soluções:

• Criar Sistema De Registo Para Cada Usuário. Podendo Assim Cada Client Interagir Entre Outros Em Privado, Melhor Controlo De Clients Para Evitar Infrigir Algumas Regras(Racismo, Preconceitos, Comportamentos Desviantes, etc.) Assim Podendo Dar Kick Do Chat/Ban Ou Ainda Um Poder Extra Para Admins/Moderadores.
• Criar Um Registo De Tempo Para Cada Mensagem Para Melhor Registo E Leitura Do Client E Para Auto Deletar-se Com Com Um Timeout Em 24 Evitando Assim Deletar Todas As Mensagens De Uma Vez Só E Criar Um App De Chat Automatizado E Dinamicamente Controlado.

Boas observações, embora ele só fez de forma simples para mostrar realmente de forma rápida como funciona o WebSocket. Mas eu vou considerar essas melhorias e implementar no meu chat.

estilo responsivo:

html, body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#chat {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2vw;
}

input {
  width: 60vw;
  border: 1px solid #ddd;
  height: 5vw;
  padding: 0 2vw;
  font-size: 1.5vw;
}

button {
  width: 60vw;
  height: 5vw;
  font-size: 1.5vw;
  background: #069;
  text-align: center;
  line-height: 5vw;
  font-weight: bold;
  color: #FFF;
  margin-top: 1vw;
  border: none;
}

.messages {
  width: 60vw;
  height: 40vw;
  margin: 2vw 0;
  border: 1px solid #ddd;
  padding: 2vw;
}

estilo responsivo:

html, body {
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#chat {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 2vw;
}

input {
  width: 60vw;
  border: 1px solid #ddd;
  height: 5vw;
  padding: 0 2vw;
  font-size: 1.5vw;
}

button {
  width: 60vw;
  height: 5vw;
  font-size: 1.5vw;
  background: #069;
  text-align: center;
  line-height: 5vw;
  font-weight: bold;
  color: #FFF;
  margin-top: 1vw;
  border: none;
}

.messages {
  width: 60vw;
  height: 40vw;
  margin: 2vw 0;
  border: 1px solid #ddd;
  padding: 2vw;
}

Eu adicionei ao seu código

@media screen and (max-width: 990px) {
  input,
  button,
  .messages {
    width: 90%;
  }

  input,
  button {
    height: 2rem;
    font-size: 1rem;
  }

  .messages {
    height: 60%;
  }
}

E deu uma melhorada para celulares, eu estava achando muito pequeno as coisas.

Muito boas as tuas correções. Mas o código é apenas para mostrar o uso de webSocket.. mas não é nada mal dares uma melhorada.. tanto um quanto o outro ajudou-me muito para entender a parada. muito grato

os estilos responsivos estao todos quebrados ... e e muito estranhos. kkkkkk quem fez nao testou.