Este é um componente React que implementa uma aplicação de chat em tempo real utilizando o Socket.IO. Ele possui um estado local (useState) para armazenar as mensagens que são enviadas e recebidas. O socket.io-client é importado e conectado a um servidor na porta 4000, com o qual o componente irá se comunicar.
- O componente ChatApp permite que os usuários enviem e recebam mensagens em tempo real através do Socket.IO.
- As mensagens são armazenadas em um estado local e exibidas no componente.
- A cor de fundo da mensagem é alternada entre rosa e branco a cada vez que um novo remetente envia uma mensagem. Se a mensagem atual tiver o mesmo remetente da mensagem anterior, a cor de fundo não é alterada.
- Clone o repositório para o seu computador.
- Abra o terminal na pasta raiz do projeto e instale as dependências com o comando
npm install
. - Inicie o servidor com o comando
npm run server
. - Abra outro terminal na mesma pasta e inicie o cliente com o comando
npm start
. - Abra o navegador e acesse
http://localhost:3000
.
handleSubmit(event)
: é chamada quando o usuário clica no botão "Enviar" no formulário de entrada de mensagens. Ela envia uma mensagem para o servidor via socket.io com a mensagem digitada pelo usuário e, em seguida, limpa o estado local da mensagem.
message
: estado local que armazena a mensagem digitada pelo usuário.messages
: estado local que armazena todas as mensagens recebidas.
- React
- Socket.IO-client
- Fork do repositório.
- Crie um branch para a sua nova funcionalidade (
git checkout -b feature/nome-da-funcionalidade
). - Comite as mudanças (
git commit -m 'Adiciona nova funcionalidade'
). - Envie para o seu fork (
git push origin feature/nome-da-funcionalidade
). - Abra um Pull Request.