스프링 웹소켓과 앵귤러를 활용한 실시간 대시보드 개발

실시간 데이터를 실시간으로 전송하고 처리하기 위해서는 스프링 웹소켓과 앵귤러를 이용한 개발이 적합합니다. 스프링 웹소켓을 통해 브라우저와 서버 간 양방향 통신이 가능하며, 앵귤러를 이용하면 데이터를 바인딩하여 빠르게 처리할 수 있습니다. 이번 글에서는 스프링 웹소켓과 앵귤러를 활용해 실시간 대시보드를 개발하는 방법에 대해 알아보겠습니다.

실시간 데이터 전송을 위한 스프링 웹소켓 설정 방법

스프링 웹소켓을 이용하여 실시간 데이터를 전송하기 위해서는 먼저 스프링 웹소켓을 설정해야 합니다. 스프링 설정 파일에 다음과 같은 빈을 추가합니다.

위 코드는 스프링 웹소켓을 설정하는 XML 코드입니다. application-destination-prefix는 클라이언트에서 메시지를 보낼 때 사용할 경로를 정의합니다. stomp-endpoint는 클라이언트에서 STOMP 메시지를 보낼 때 사용할 경로를 정의합니다. simple-broker는 서버에서 클라이언트로 메시지를 보낼 때 사용할 경로를 정의합니다.

앵귤러에서 스프링 웹소켓으로 데이터 수신하는 방법

앵귤러에서 스프링 웹소켓으로 데이터를 수신하기 위해서는 @stomp/ng2-stompjs 라이브러리를 이용합니다. 이 라이브러리를 이용하면 앵귤러에서 스프링 웹소켓으로 쉽게 데이터를 전송할 수 있습니다. 다음과 같이 라이브러리를 설치합니다.

npm install @stomp/ng2-stompjs --save

설치 후, 앵귤러 컴포넌트에서 다음과 같이 스프링 웹소켓으로 데이터를 수신할 수 있습니다.

import {Component, OnInit} from '@angular/core';
import {StompService} from "@stomp/ng2-stompjs";
import {Message} from "@stomp/stompjs";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  constructor(private stompService: StompService) {}

  ngOnInit() {
    this.stompService.initAndConnect();
    this.stompService.subscribe('/topic/dashboard', (message: Message) => {
      console.log('Received message', message.body);
    });
  }
}

위 코드에서 StompService를 이용하여 스프링 웹소켓에 연결하고, /topic/dashboard 경로로 메시지를 수신합니다.

스프링 웹소켓과 앵귤러를 활용한 실시간 대시보드 개발

실시간 대시보드를 개발하기 위해서는 먼저 서버에서 데이터를 생성하고, 이를 스프링 웹소켓을 이용하여 클라이언트로 전송합니다. 클라이언트에서는 앵귤러를 이용하여 데이터를 바인딩하여 즉시 처리하고 화면에 표시합니다.

서버 측 코드

서버에서는 스프링 웹소켓을 이용하여 데이터를 생성하고, 클라이언트로 전송합니다. 다음과 같이 스프링 웹소켓으로 데이터를 전송하는 코드를 작성할 수 있습니다.

@Service
public class DashboardService {

    private final SimpMessagingTemplate messagingTemplate;

    public DashboardService(SimpMessagingTemplate messagingTemplate) {
        this.messagingTemplate = messagingTemplate;
    }

    @Scheduled(fixedRate = 1000)
    public void sendDashboardData() {
        DashboardData data = new DashboardData();
        // 데이터 생성
        messagingTemplate.convertAndSend("/topic/dashboard", data);
    }
}

위 코드에서 SimpMessagingTemplate를 이용하여 /topic/dashboard 경로로 데이터를 전송합니다.

클라이언트 측 코드

클라이언트에서는 앵귤러를 이용하여 스프링 웹소켓으로부터 데이터를 수신하고, 이를 바인딩하여 화면에 표시합니다. 다음과 같이 앵귤러 컴포넌트 코드를 작성할 수 있습니다.

import {Component, OnInit} from '@angular/core';
import {StompService} from "@stomp/ng2-stompjs";
import {Message} from "@stomp/stompjs";

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  dashboardData: any;

  constructor(private stompService: StompService) {}

  ngOnInit() {
    this.stompService.initAndConnect();
    this.stompService.subscribe('/topic/dashboard', (message: Message) => {
      this.dashboardData = JSON.parse(message.body);
    });
  }
}

위 코드에서 /topic/dashboard 경로로부터 데이터를 수신하고, dashboardData 변수에 바인딩합니다. 이를 화면에 표시하는 코드는 다음과 같습니다.

  실시간 대시보드
  {{dashboardData.value1}}
  {{dashboardData.value2}}
  {{dashboardData.value3}}

위 코드에서 *ngIf를 이용하여 dashboardData 변수가 존재할 때에만 화면을 표시합니다. 이를 이용하여 실시간 대시보드를 구현할 수 있습니다.

결론

이번 글에서는 스프링 웹소켓과 앵귤러를 이용하여 실시간 대시보드를 개발하는 방법에 대해 알아보았습니다. 스프링 웹소켓을 이용하여 클라이언트와 서버 간 양방향 통신을 구현하고, 앵귤러를 이용하여 데이터를 바인딩하여 빠르게 화면에 표시할 수 있습니다. 이를 이용하여 다양한 실시간 애플리케이션을 개발할 수 있습니다.