[javascript] Ember.js로 실시간 채팅 기능을 어떻게 구현하나요?

04 Dec 2023

javascript

1. Ember.js 설치 먼저, Ember.js 프레임워크를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

$ npm install -g ember-cli

2. Ember.js 애플리케이션 생성 Ember.js 애플리케이션을 생성합니다.

$ ember new realtime-chat
$ cd realtime-chat

3. Ember.js 라우팅 설정 채팅 기능을 위해 라우터를 설정합니다. app/router.js 파일을 열고 다음과 같이 코드를 수정합니다.

import EmberRouter from '@ember/routing/router';
import config from './config/environment';

const Router = EmberRouter.extend({
  location: config.locationType,
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('chat', { path: '/chat/:room_id' });
});

export default Router;

4. 채팅 컴포넌트 생성 app/components/chat-room.js 파일을 생성하고 다음과 같은 코드를 입력합니다.

import Component from '@ember/component';

export default Component.extend({
  messages: [],

  actions: {
    sendMessage(message) {
      this.messages.pushObject(message);
    }
  }
});

5. 채팅 라우트 생성 app/routes/chat.js 파일을 생성하고 다음과 같은 코드를 입력합니다.

import Route from '@ember/routing/route';

export default Route.extend({
  model(params){
    return { room_id: params.room_id };
  },

  setupController(controller, model) {
    this._super(controller, model);
    controller.set('room_id', model.room_id);
  }
});

6. 채팅 템플릿 작성 app/templates/chat.hbs 파일을 생성하고 다음과 같은 코드를 입력합니다.

<h2>Welcome to the chat room </h2>

<button >Send</button>

<ul>
  
    <li></li>
  
</ul>

7. 실시간 통신 구현 실시간 통신을 위해 WebSocket을 사용합니다. 애플리케이션의 app/services/socket.js 파일을 생성하고 다음과 같은 코드를 입력합니다.

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class SocketService extends Service {
  @tracked socket = null;

  constructor() {
    super(...arguments);

    this.socket = new WebSocket('ws://localhost:3000');

    this.socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      // 새로운 메시지를 받았을 때, messages 배열에 추가 및 화면 갱신
    };

    this.socket.onclose = () => {
      // 연결이 종료되었을 때 처리 로직
    };
  }

  sendMessage(message) {
    const json = JSON.stringify({
      type: 'message',
      data: message
    });

    this.socket.send(json);
  }
}

8. 채팅 컴포넌트와 통신 서비스 연결 app/components/chat-room.js 파일을 수정하여 socket 서비스와 연결합니다.

import Component from '@ember/component';
import { inject as service } from '@ember/service';

export default Component.extend({
  socketService: service('socket'),

  messages: [],

  actions: {
    sendMessage(message) {
      this.socketService.sendMessage(message);
    }
  }
});

이제 Ember.js 애플리케이션에서 실시간 채팅 기능을 구현할 준비가 되었습니다. WebSocket을 사용하여 서버와의 통신을 설정하고, 메시지를 주고 받을 수 있습니다. 웹소켓 서버를 따로 구현해야 합니다. Ember.js의 라우팅 및 컴포넌트를 활용하여 채팅 인터페이스를 구성하고, 라우트를 통해 채팅방 식별자를 전달할 수 있습니다.

더 자세한 내용은 Ember.js 공식 문서(https://guides.emberjs.com/)를 참고하시기 바랍니다.