angular와 nodejs를 활용한 socket.io 사용하기

• server.js 작성
• 클라이언트에서 socket.io 설치 및 임포트
• angular service
• angular component

server.js 작성

express 에서 socket.io를 실행하기 위해

express.io를 설치한다.

노드 http 서버와 결합시킬 socket.io에 http를 전달하여 initialize한다.

connection 이벤트가 발생하면 특정 동작을 한다.

io.emit을 통해 데이터를 전달한다.

var io = require('socket.io').listen(server);

io.on('connection', (socket) => {

    console.log('user connected');

    socket.on('disconnect', function() {
        console.log('user disconnected');
    });

    socket.on('add-message', (message) => {
        io.emit('message', { type: 'new-message', text: message });
        // Function above that stores the message in the database
        databaseStore(message)
    });
});

클라이언트에서 socket.io 설치 및 임포트

소켓 io를 라우터에 전달한다.

npm i socket.io-client --save
npm install socket.io --save

const server = http.createServer(app);
var io = require('socket.io').listen(server);
const all = require('./server/routes/all')(mysql, conn, express, io);

angular service

io()는 socket을 반환한다.

socket.emit을 통해 이벤트를 발생시킨다.

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Observable } from 'rxjs/Observable';
import * as io from 'socket.io-client';

@Injectable()
export class ChatService {
  private url = 'http://localhost:5000';
  private socket;

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

  getMessages() {
    let observable = new Observable(observer => {
      this.socket = io(this.url);
      this.socket.on('message', (data) => {
        observer.next(data);    
      });
      return () => {
        this.socket.disconnect();
      };  
    })     
    return observable;
  }
}

angular component

messages = [];
connection;
message;

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

ngOnInit() {
  this.connection = this.chatService.getMessages().subscribe(message => {
    this.messages.push(message);
  })
}

ngOnDestroy() {
  this.connection.unsubscribe();
}

참조
use with router