Chat – angular, nodejs and socket.io

ng new chat

npm i express

npm i socket.io

npm i socket.io-client

npm i -g nodemon

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "dev": "nodemon ./server/app.js",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },

const express = require('express');

const app = express();

// ------------ CHAT ------------
const server = require('http').createServer(app);
const io = require('socket.io')(server, { cors: { origin: "*" } });
io.on('connection', (socket) => {
    socket.on('join', (data) => {
        socket.join(data.room);
        socket.broadcast.to(data.room).emit('user joined');
    });
    socket.on('message', (data) => {
        io.in(data.room).emit('update', { user: data.user, message: data.message })
    });
})
// ------------ CHAT ------------

const port = 3080;
server.listen(port, () => {
    console.clear();
    console.log(`Server listening on the port::${port}`);
})

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { io, Socket } from 'socket.io-client';

@Injectable({
  providedIn: 'root'
})
export class ChatService {
  private socket: Socket;
  private url = 'http://localhost:3080'; // server path

  constructor() {
    this.socket = io(this.url);
  }
  joinRoom(data: IChatJoinRoom): void {
    this.socket.emit('join', data);
  }
  sendMessage(data: IChatSendMessage): void {
    this.socket.emit('message', data);
  }
  getMessage(): Observable<IChatMessage> {
    return new Observable<IChatMessage>(observer => {
      this.socket.on('update', (data) => {
        observer.next(data);
      });
      return () => {
        this.socket.disconnect();
      }
    });
  }
}
interface IChatMessage {
  user: string,
  message: string,
}
interface IChatSendMessage {
  user: string,
  room: string,
  message: string,
}
interface IChatJoinRoom {
  user: string,
  room: string,
}

<section class="section-login">
    <label class="label-block">
        <span>User name:</span>
        <input type="text" #user [disabled]="userId!==''">
        <button type="button" (click)="onUserId()" *ngIf="userId===''">login</button>
    </label>
    <label class="label-block">
        <span>Room number:</span>
        <input type="text" #room [disabled]="roomId!==''">
        <button type="button" (click)="onRoomId()" *ngIf="roomId===''">select</button>
    </label>
</section>
<section class="chat-wrapper">
    <div class="chat-title-wrapper">
        <h3 class="chat-title">Chat</h3>
    </div>
    <div class="chat" aria-live="polite">
        <ul class="chat-list">
            <li *ngFor="let mess of messagesArr" class="chat-item" [ngClass]="{'me':mess.user===userId}">
                <div class="message-wrapper">
                    <b *ngIf="mess.user">{{mess.user===userId?'Me':mess.user}}: </b>
                    <span>{{mess.message}}</span>
                </div>

            </li>
        </ul>
    </div>
    <div class="chat-input-wrapper">
        <input type="text" #messageText class="chat-input" placeholder="Type your message here">
        <button type="button" class="chat-btn" (click)="sendMessage()">Send</button>
    </div>
</section>

$radius-xs: 5px;
$lighter-color: #ededed;
$blue: #66aaff;
$blue-1: #8c8cd5;
$font-size-xs: 16px;
$space-xs: 5px;
$space-s: 10px;
$space-m: 15px;
$green: #44ff44;
$green-1: #44aa44;
$color: #332233;
$color-rev: #ffffff;
.section-login {
    max-width: 300px;
    .label-block {
        display: block;
        & + .label-block {
            margin-top: $space-m;
        }
        span {
            padding: $space-xs $space-s;
            display: block;
        }
        input {
            padding: $space-xs $space-s;
            border-radius: $radius-xs;
        }
        button {
            padding: $space-xs $space-s;
            border-radius: $radius-xs;
            font-size: $font-size-xs;
        }
    }
}
.chat-wrapper {
    max-width: 300px;
    margin-top: $space-m;
    border-radius: $radius-xs;
    border: 1px solid $lighter-color;
    overflow: hidden;
    .chat-title-wrapper {
        background-color: $blue-1;
        .chat-title {
            font-size: $font-size-xs;
            margin: 0;
            padding: $space-s;
        }
    }
    .chat {
        height: 600px;
        overflow: auto;
        .chat-list {
            padding: 0;
            list-style-type: none;
            .chat-item {
                margin: $space-s;
                .message-wrapper {
                    padding: $space-s;
                    border-radius: 0 $radius-xs $radius-xs $radius-xs;
                    background-color: $green;
                    display: inline-block;
                    margin-inline-end: $space-m;
                    color: $color;
                }
                &.me {
                    text-align: end;
                    .message-wrapper {
                        border-radius: $radius-xs 0 $radius-xs $radius-xs;
                        background-color: $green-1;
                        text-align: start;
                        margin-inline-start: $space-m;
                        margin-inline-end: 0;
                        color: $color-rev;
                    }
                }
            }
        }
    }
    .chat-input-wrapper {
        padding: $space-s;
        display: flex;
        .chat-input {
            border-radius: $radius-xs;
            padding: $space-xs;
            box-sizing: border-box;
            margin-inline-end: $space-xs;
            flex: 1 0 0;
        }
        .chat-btn {
            border-radius: $radius-xs;
            padding: $space-xs;
            box-sizing: border-box;
            background-color: $blue;
            color: $color-rev;
            flex: 0 0 60px;
        }
    }
}

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { Subscription } from 'rxjs';
import { ChatService } from 'src/app/services/chat.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
  @ViewChild('messageText') messageText: ElementRef = {} as ElementRef;
  @ViewChild('user') user: ElementRef = {} as ElementRef;
  @ViewChild('room') room: ElementRef = {} as ElementRef;
  public messagesArr: { user: string, message: string }[] = [];
  public userId: string = '';
  public roomId: string = '';
  private subs: Subscription = {} as Subscription;

  constructor(private chatService: ChatService) { }

  ngOnInit(): void {
    this.subs = this.chatService.getMessage().subscribe((data: IChatMessage) => {
      this.messagesArr.push(data);
    });
  }
  onUserId() {
    this.userId = this.user.nativeElement.value;
    if (this.userId !== '' && this.roomId !== '') {
      this.join(this.userId, this.roomId);
    }
  }
  onRoomId() {
    this.roomId = this.room.nativeElement.value;
    if (this.userId !== '' && this.roomId !== '') {
      this.join(this.userId, this.roomId);
    }
  }
  join(username: string, roomId: string): void {
    this.chatService.joinRoom({ user: username, room: roomId })
  }
  sendMessage(): void {
    if (this.roomId) {
      this.chatService.sendMessage({
        user: this.userId,
        room: this.roomId,
        message: this.messageText.nativeElement.value
      });
    }

    this.messagesArr
    this.messageText.nativeElement.value = '';
  }
  ngOnDestroy(): void {
    this.subs.unsubscribe();
  }
}
interface IChatMessage {
  user: string,
  message: string
}