Criando um chat com Angular, Node.js e WebSocket

{
  "name": "chat-backend",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "node dist/index.js",
    "start:dev": "ts-node src/index.ts",
    "build": "npx tsc --project tsconfig.json"
  },
  "author": "Marcelo R. Vismari",
  "license": "UNLICENSED",
  "engines": {
    "node": ">=20.18.0"
  },
  "dependencies": {
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.1",
    "reflect-metadata": "^0.2.2",
    "ws": "^8.18.0"
  },
  "devDependencies": {
    "@types/ws": "^8.5.12",
    "prettier": "^3.3.3",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.3"
  }
}

{
  "compilerOptions": {
    "target": "es2016",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "module": "commonjs",
    "rootDir": "./src",
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "strictBindCallApply": true,
    "strictPropertyInitialization": true,
    "noImplicitThis": true,
    "useUnknownInCatchVariables": true,
    "alwaysStrict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "exactOptionalPropertyTypes": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedIndexedAccess": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "allowUnusedLabels": true,
    "allowUnreachableCode": true,
    "skipLibCheck": true
  }
}

import { plainToClass } from 'class-transformer';
import { validateOrReject } from 'class-validator';
import { WebSocket } from 'ws';
import {
  MsgRecebidaNovoUsuario,
  MsgRecebidaTexto,
  TratarMsgRecebida,
} from './models/mensagem-recebida.model';
import {
  MsgSaidaConfirmacaoRecebimento,
  MsgSaidaTexto,
  MsgSaidaListaUsuarios,
  MsgSaidaNovoUsuario,
  MsgSaida,
  MsgSaidaUsuarioSaiu,
} from './models/mensagem-saida.model';
import { Usuario } from './types/usuario.type';

export class Chat {
  conexoes = new Map<WebSocket, Usuario>();

  adicionarConexao(conexao: WebSocket) {
    // Assim que o usuário se conecta, o servidor adiciona
    // o usuário na lista de conexões com o nome
    // desconhecido. Depois esse nome é atualizado.
    this.conexoes.set(conexao, { nome: 'desconhecido' });

    // Quando o usuário envia uma mensagem para o servidor,
    // a mensagem e a processa logo abaixo:
    conexao.on('message', async (buffer) => {
      try {
        // Converte a mensagem recebida para um objeto JSON
        // e depois para a classe TratarMensagemRecebida
        const objRecebido: any = JSON.parse(
          buffer.toString('utf-8')
        );

        const mensagemRecebida = plainToClass(
          TratarMsgRecebida,
          objRecebido
        );

        // Faz a validação dos dados recebidos
        await validateOrReject(mensagemRecebida);
        const body = mensagemRecebida.objMensagem;

        // ************************************************
        // Processa as mensagens do tipo texto, ou seja,
        // mensagens de texto enviadas pelos usuários
        // ************************************************
        if (body instanceof MsgRecebidaTexto) {
          // Simula um atraso de 1 segundo
          await this.delay(1000);

          const enviarMensagemTexto = new MsgSaidaTexto(
            body.id,
            this.conexoes.get(conexao)?.nome ||
              'desconhecido',
            body.mensagem
          );
          this.enviarMensagemParaTodos(
            enviarMensagemTexto,
            conexao
          );

          // Envia a mensagem para o próprio usuário
          // confirmando que a mensagem foi recebida
          const msg = new MsgSaidaConfirmacaoRecebimento(
            body.id
          );
          this.enviarMensagem(conexao, msg);
          return;
        }

        // ************************************************
        // Processa as mensagens do tipo JOIN, ou seja,
        // mensagens que o frontend envia para informar o
        // nome do usuário que acabou de se conectar
        // ************************************************
        if (body instanceof MsgRecebidaNovoUsuario) {
          // Atualiza o nome do usuário na lista de conexões
          this.conexoes.set(conexao, {
            nome: body.nomeUsuario,
          });

          // Envia a mensagem para todos os usuários,
          // indicando que um novo usuário se conectou
          const msg = new MsgSaidaNovoUsuario(
            body.nomeUsuario
          );
          this.enviarMensagemParaTodos(msg, conexao);

          // Envia a lista de usuários conectados p/frontend
          this.enviarListaUsuarios();
          return;
        }
      } catch (error) {
        console.error(
          'Mensagem não está no formato esperado',
          error
        );
      }
    });

    // Quando o usuário desconecta do chat, o servidor
    // envia uma mensagem para todos os usuários
    // conectados, indicando que o usuário desconectou
    conexao.on('close', () => {
      const enviarMensagemUsuarioSaiu =
        new MsgSaidaUsuarioSaiu(
          this.conexoes.get(conexao)?.nome || 'desconhecido'
        );

      this.conexoes.delete(conexao);
      this.enviarMensagemParaTodos(
        enviarMensagemUsuarioSaiu,
        conexao
      );
      this.enviarListaUsuarios();
    });
  }

  /**
   * Envia uma mensagem para todos os usuários conectados,
   * exceto para o usuário que enviou a mensagem.
   *
   * @param mensagem Mensagem a ser enviada
   * @param remetente Usuário que enviou a mensagem. Se
   * não for informado, a mensagem será enviada para
   * todos os usuários
   */
  enviarMensagemParaTodos(
    mensagem: MsgSaida,
    remetente: WebSocket | null = null
  ) {
    this.conexoes.forEach((_usuario, webSocket) => {
      if (webSocket === remetente) {
        return;
      }

      this.enviarMensagem(webSocket, mensagem);
    });
  }

  /**
   * Envia uma mensagem para um usuário específico
   *
   * @param destinatario Usuário destinatário da mensagem
   * @param mensagem Mensagem a ser enviada
   */
  enviarMensagem(
    destinatario: WebSocket,
    mensagem: MsgSaida
  ) {
    destinatario.send(JSON.stringify(mensagem));
  }

  /**
   * Envia a lista de usuários conectados para todos
   * os usuários conectados
   */
  enviarListaUsuarios() {
    const enviarMensagemListaUsuarios =
      new MsgSaidaListaUsuarios(
        Array.from(this.conexoes.values()).map(
          (usuario) => usuario.nome
        )
      );

    this.enviarMensagemParaTodos(
      enviarMensagemListaUsuarios
    );
  }

  delay(ms: number) {
    return new Promise((resolve) =>
      setTimeout(resolve, ms)
    );
  }
}

import 'reflect-metadata';
import { WebSocketServer } from 'ws';
import { Chat } from './chat';

const porta = 8080;
const webSocketServer = new WebSocketServer({
  port: porta,
});
console.log(`Executando aplicação na porta ${porta}`);

const chat = new Chat();
webSocketServer.on('connection', (webSocket) => {
  chat.adicionarConexao(webSocket);
});

import { Component, signal } from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { RouterOutlet } from '@angular/router';
import { ChatService } from './chat/chat.service';
import { ChatComponent } from './chat/chat.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    ChatComponent,
    ReactiveFormsModule,
  ],
  templateUrl: './app.component.html',
})
export class AppComponent {
  mostrarFormularioEntrar = signal(true);

  formGroup = new FormGroup({
    nome: new FormControl<string>('', [
      Validators.required,
      Validators.minLength(3),
    ]),
  });

  constructor(private chatService: ChatService) {}

  entrar() {
    if (this.formGroup.invalid) {
      return;
    }

    const nome = this.formGroup.get('nome')!.value!;
    this.mostrarFormularioEntrar.set(false);
    this.chatService.abrirConexao(nome);
  }
}

@if (mostrarFormularioEntrar()) {
<div class="container mt-3">
  <div class="row">
    <div class="col-3"></div>
    <div class="col-6">
      <form [formGroup]="formGroup" (ngSubmit)="entrar()">
        <div class="mb-3">
          <label for="inputNome" class="form-label">
            Bem vindo ao chat consolelog.com.br
          </label>
          <input
            autofocus
            autocomplete="off"
            type="text"
            class="form-control"
            id="inputNome"
            placeholder="Digite seu nome"
            formControlName="nome" />
        </div>
        <button
          [disabled]="formGroup.invalid"
          type="submit"
          class="btn btn-primary">
          Entrar
        </button>
      </form>
    </div>
    <div class="col-3"></div>
  </div>
</div>
} @else {
<app-chat></app-chat>
}

import {
  AfterViewInit,
  Component,
  ElementRef,
  Signal,
  viewChild,
} from '@angular/core';
import {
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
import { ChatService } from './chat.service';
import { Mensagem } from './mensagem.type';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  standalone: true,
  imports: [ReactiveFormsModule],
})
export class ChatComponent implements AfterViewInit {
  mensagens: Signal<Mensagem[]>;
  usuariosNoChat: Signal<string[]>;
  status: Signal<string>;
  inputMensagem =
    viewChild.required<ElementRef<HTMLInputElement>>(
      'inputMensagem'
    );

  formGroup = new FormGroup({
    inputMensagem: new FormControl<string>('', {
      nonNullable: true,
      validators: [Validators.required],
    }),
  });

  get formGroupInputMensagem() {
    return this.formGroup.get('inputMensagem')!;
  }

  constructor(private chatService: ChatService) {
    this.mensagens = this.chatService.mensagens;
    this.status = this.chatService.status;
    this.usuariosNoChat = this.chatService.usuariosNoChat;
  }

  ngAfterViewInit(): void {
    this.focarInput();
  }

  focarInput() {
    this.inputMensagem().nativeElement.focus();
  }

  enviarMensagem() {
    if (this.formGroup.invalid) {
      return;
    }

    const id = crypto.randomUUID();
    const mensagem = this.formGroupInputMensagem.value;
    this.chatService.enviarMensagemTexto(mensagem, id);
    this.formGroupInputMensagem.reset();
    this.focarInput();
  }
}

<div class="container border">
  <div class="row">
    <div class="col-3">
      <div class="p-2 m-2">
        <strong>Usuários Conectados</strong>
      </div>
      @for (usuario of usuariosNoChat(); track $index) {
        <div class="p-2 m-2">
          {{ usuario }}
        </div>
      }
    </div>
    <div class="col-9">
      <div class="d-flex flex-column">
        <div
          class="p-2 flex-grow-1 d-flex flex-column"
          style="overflow-y: auto; max-height: 70vh">
          @for (mensagem of mensagens(); track $index) {
            <div class="m-2">
              @if (mensagem.tipo === 'enviada') {
                <div
                  class="p-2 border rounded d-inline-block
                         mw-75 bg-primary text-white
                         float-end">
                  {{ mensagem.mensagem }}
              
                  @if (mensagem.status === 'enviando') {
                    <i class="bi bi-check float-end"></i>
                  }
              
                  @if (mensagem.status === 'enviado') {
                    <i class="bi bi-check-all float-end"></i>
                  }
                </div>
              } @else {
                <div class="p-2 border rounded d-inline-block
                            mw-75 bg-light">
                  <strong>{{ mensagem.remetente }}:</strong>
                  {{ mensagem.mensagem }}
                </div>
              }
            </div>
          }
        </div>
        <div class="p-2">
          <form [formGroup]="formGroup"
                (ngSubmit)="enviarMensagem()">
            <div class="input-group mb-3">
              <input
                #inputMensagem
                type="text"
                class="form-control bg-light"
                formControlName="inputMensagem"
                placeholder="Digite uma mensagem" />
              <button
                [disabled]="formGroup.invalid
                            || status() !== 'conectado'"
                class="btn btn-light border"
                type="button">
                <i class="bi bi-send"></i>
              </button>
            </div>
          </form>
        </div>
        <div class="font-monospace text-end text-secondary">
          {{ status() }}
        </div>
      </div>
    </div>
  </div>
</div>

import { Injectable, signal } from '@angular/core';
import { Mensagem } from './mensagem.type';

@Injectable({ providedIn: 'root' })
export class ChatService {
  conexao: WebSocket | null = null;
  status = signal<string>('desconectado');
  mensagens = signal<Mensagem[]>([]);
  usuariosNoChat = signal<string[]>([]);

  abrirConexao(nome: string) {
    this.status.set('conectando');
    this.conexao = new WebSocket(`ws://localhost:8080`);

    this.conexao.onopen = () => {
      this.status.set('conectado');
      this.enviarMensagemJoin(nome);
    };

    this.conexao.onmessage = (event) => {
      this.tratarMensagensRecebidas(event);
    };

    this.conexao.onclose = () => {
      this.status.set('desconectado');
    };
  }

  enviarMensagemTexto(mensagem: string, id: string) {
    this.mensagens.update((mensagens) => [
      ...mensagens,
      {
        mensagem,
        id,
        tipo: 'enviada',
        status: 'enviando',
      },
    ]);

    const payload = { tipo: 'message', mensagem, id };
    this.enviarMensagem(payload);
  }

  private enviarMensagemJoin(nomeUsuario: string) {
    const payload = { tipo: 'join', nomeUsuario };
    this.enviarMensagem(payload);
  }

  private enviarMensagem(payload: any) {
    const dados = JSON.stringify({ objMensagem: payload });
    this.conexao!.send(dados);
  }

  /**
   * Trata as mensagens recebidas do WebSocket
   * @param event Evento de mensagem recebida
   */
  private tratarMensagensRecebidas(event: MessageEvent) {
    const objMensagem = JSON.parse(event.data);

    if (objMensagem.tipo === 'message') {
      const tipo = 'recebida';
      const { remetente, mensagem } = objMensagem;

      this.mensagens.update((mensagens) => [
        ...mensagens,
        { remetente, mensagem, tipo },
      ]);
      return;
    }

    if (objMensagem.tipo === 'confirmacao-recebimento') {
      const status = 'enviado';
      const { id } = objMensagem;

      this.mensagens.update((mensagens) =>
        mensagens.map((mensagem) =>
          mensagem.id === id
            ? { ...mensagem, status }
            : mensagem
        )
      );
      return;
    }

    if (objMensagem.tipo === 'users') {
      const { usuarios } = objMensagem;
      this.usuariosNoChat.set(usuarios);
      return;
    }

    if (objMensagem.tipo === 'join') {
      const tipo = 'recebida';
      const mensagem = 'Entrou no chat.';
      const { nomeUsuario } = objMensagem;

      this.mensagens.update((mensagens) => [
        ...mensagens,
        {
          remetente: nomeUsuario,
          mensagem,
          tipo,
        },
      ]);
      return;
    }

    if (objMensagem.tipo === 'leave') {
      const tipo = 'recebida';
      const mensagem = 'Saiu no chat.';
      const { nomeUsuario } = objMensagem;

      this.mensagens.update((mensagens) => [
        ...mensagens,
        {
          remetente: nomeUsuario,
          mensagem,
          tipo,
        },
      ]);
      return;
    }
  }
}