chat.js

CHAT APP
*******
TECH
- chat_ws/ node typescript : 3099
- proxy /chat :3099
- auth / token
- mongodb/mongoose
- chat ng module
FONCT
- users (list, selectOne/Many)
- rooms (colors, list, selectOne, onClick(subject)) // slack
- modal window // material ui
- slide menu
- messages (list)
- add message (rich text, emoticones, ...)

*******



// npm
npm install --save express socket.io @types/express @types/socket.io

// index.js
let socketIO = require('socket.io');
let io = socketIO(server);

io.on('connection', (socket) => {
    console.log('user connected');

    socket.on('new-message', (message) => {
      console.log(message);
      io.emit(message);
    });

    socket.on('join', () => {
    	socket.join(data.room)
	    console.log(data.user +' joined '+ data.room);
	    socket.broadcast.emit(data.room).emit('new user joined', { user:data.user, message: 'has joined this room.'})
	});

    socket.on('disconnect', () => {
	    console.log('Client disconnected');
	});
});



ANGULAR

// chat.model.ts
|- src/
   |- model/
      |- message.model.ts
      |- user.model.ts

export class User {
    constructor(private name: string) {}
}

export class Message {
    constructor(private from: User, private content: string) {}
}

export class ChatMessage extends Message{
    constructor(from: User, content: string) {
        super(from, content);
    }
}

----

// module chat

ng generate component chat --module chat


// chat.service.ts
import * as io from 'socket.io-client';
import { Observable } from 'rxjs/Observable';

export class ChatService {
    private url = 'http://localhost:3000';
    private socket;

    constructor() {
        this.socket = io(this.url);
    }

    public sendMessage(message) {
        this.socket.emit('new-message', message);
    }

    public getMessages = () => {
        return Observable.create((observer) => {
            this.socket.on('new-message', (message) => {
                observer.next(message);
            });
        });
    }
}

//  app.module.ts
providers: [ChatService],


// app.component.ts
import { Component } from '@angular/core';
import { ChatService } from '../chat.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  message: string;
  messages: string[] = [];

  constructor(private chatService: ChatService) {
  }

  sendMessage() {
    this.chatService.sendMessage(this.message);
    this.message = '';
  }

  ngOnInit() {
    this.chatService
      .getMessages()
      .distinctUntilChanged()
      .filter((message) => message.trim().length > 0)
      .throttleTime(1000)
      .scan((acc: string, message: string, index: number) =>
          `${message}(${index + 1})`
        , 1)
      .subscribe((message: string) => {
        const currentTime = moment().format('hh:mm:ss a');
        const messageWithTimestamp = `${currentTime}: ${message}`;
        this.messages.push(messageWithTimestamp);
      });
  }
}


// app.component.html
<div *ngFor="let message of messages">
    {{message}}
</div>

<input [(ngModel)]="message" (keyup)="$event.keyCode == 13 && sendMessage()" />
<button (click)="sendMessage()">Send</button>


// node index.js
started on port: 3000
user connected


https://github.com/luixaviles/socket-io-typescript-chat
https://medium.com/dailyjs/real-time-apps-with-typescript-integrating-web-sockets-node-angular-e2b57cbd1ec1
https://www.djamware.com/post/58e0d15280aca75cdc948e4e/building-chat-application-using-mean-stack-angular-4-and-socketio
https://github.com/didinj/mean-angular4-chat-app

REACT TSX
https://github.com/nilshartmann/socket-io-typescript-chat/blob/react-client/client-react/package.json