Angular와 Socket Io를 이용한 간단한 채팅 만들기

angular와 socket io를 이용하여 간단한 채팅 프로그램에 대해 설명 드리겠습니다.

• node : v20.10.0

• angular : v16.1.0

• 참조 : Socket.io를 이용한 채팅구현

• 참조 : 사용 채팅 서비스 구현하기

angular

패키지

npm i socket.io-client

소스

import { Component } from '@angular/core';
import {io} from 'socket.io-client';

@Component({
  selector: 'app-root',
  template: `
  <input type="text" [(ngModel)]="message">
<button (click)="sendMessage()">메시지 전송</button>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private url = 'http://localhost:3000';
  public socket: any;
  public message!: string;
  
  constructor() {
    this.socket = io(this.url); // 1. 소켓서버와 연결한다.

    this.socket.on('messages', (messages: any)=>{
      // 3. 서버로 부터 전송받는 메시지(채팅 목록이 이곳에 들어감)
    })
  }

  public sendMessage(){
    // 2. 메시지 내용을 서버로 전송
    this.socket.emit('message', {message: this.message});
  }
}

Socket io

const server = require('http').createServer(() => {});
const io = require('socket.io')(server, {
  cors: {
    origin: '*',
    methods: ['GET', 'POST'],
  }
});

const messages = []

io.on('connection', (socket) => { // 클라이언트에서 소켓에 연결을 요청할 경우

  socket.on('message', (msg) => {
    messages.push(msg); // 클라이언트로 부터 메시지를 받으면 messages에 넣어둔다.
    socket.emit('messages', messages); // 현재 소켓에 연결된 모든 사용자에게 메시지를 뿌려준다.
  });
});

server.listen(3000);

작동순서

1. socket-io 에서 3000번 포트로 리스닝한다.
2. client가 연결되면(angular 에서 io(this.url) 가 실행) io.on('connection', (socket).. 가 실행된다.
3. [angular] this.socket.emit('message') -> [socket-io] socket.on('message', (msg)...
4. [socket-io] socket.emit('messages', messages) -> [angular] this.socket.on('messages', (messages: any) 처럼 서로 데이타를 주고 받는다.