웹 개발을 위한 자바 프레임워크인 Vaadin은 풍부한 UI 구성요소와 클라이언트-서버 아키텍처를 제공합니다. 이러한 아키텍처에서 클라이언트와 서버 간의 실시간 통신이 필요한 경우, WebSockets를 사용할 수 있습니다. 이번 포스트에서는 Vaadin과 WebSockets를 통해 실시간 데이터를 주고받는 방법에 대해 알아보겠습니다.

1. Vaadin WebSockets 추가하기

Vaadin을 사용하여 WebSockets를 구현하기 위해서는 먼저 해당 의존성을 프로젝트에 추가해야 합니다. Maven을 사용하는 경우, pom.xml 파일에 다음과 같은 의존성을 추가합니다:

<dependencies>
  ...
  <dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-push</artifactId>
    <version>8.12.1</version>
  </dependency>
  ...
</dependencies>

Gradle을 사용하는 경우, build.gradle 파일에 다음과 같은 의존성을 추가합니다:

dependencies {
  ...
  implementation 'com.vaadin:vaadin-push:8.12.1'
  ...
}

의존성을 추가한 후, 프로젝트를 다시 빌드합니다.

2. Vaadin UI 업데이트를 위한 WebSockets 구현하기

클라이언트와 서버 사이의 실시간 통신을 위해 Vaadin에서 WebSocket 클래스를 사용합니다. 이 클래스는 UI 클래스 내에서 사용됩니다. 아래는 간단한 예제 코드입니다:

@Push
public class MyUI extends UI {
  private WebSocket webSocket;
  
  @Override
  protected void init(VaadinRequest request) {
    webSocket = new WebSocket("");
    webSocket.addMessageHandler((message) -> {
      // 메시지 처리 로직
      access(() -> {
        // UI 업데이트 로직
      });
    });
    WebSocketCommunication.init(webSocket);  // WebSocket 시작
  }
}

위 예제에서 @Push 어노테이션은 Vaadin에서 실시간 푸시 기능을 활성화합니다. WebSocket 객체를 생성하고, 메시지 핸들러를 추가하여 클라이언트로부터의 메시지를 처리하는 로직을 작성합니다. 필요에 따라, 메시지를 받아서 UI를 업데이트하는 로직도 추가할 수 있습니다.

3. 웹소켓 서버 구현하기

위에서 구현한 Vaadin UI에서 실시간 통신을 사용하기 위해서는 웹소켓 서버를 구현해야 합니다. 웹소켓 서버는 Vaadin 서버와 연결될 수 있도록 설정되어야 합니다. 여기서는 Jetty 서버를 사용하는 방법을 알아보도록 하겠습니다.

먼저, javax.websocket.Endpoint를 상속하는 클래스를 만듭니다:

@ServerEndpoint("/")
public class MyEndpoint {
  private static final List<Session> sessions = Collections.synchronizedList(new ArrayList<>());

  @OnOpen
  public void onOpen(Session session) {
    sessions.add(session);
  }

  @OnClose
  public void onClose(Session session) {
    sessions.remove(session);
  }

  @OnMessage
  public void onMessage(String message, Session session) {
    // 메시지 처리 로직
  }
}

위 코드에서 MyEndpoint 클래스는 javax.websocket 패키지의 @ServerEndpoint 어노테이션을 사용하여 웹소켓 서버 엔드포인트를 정의합니다. 클라이언트와의 연결이 열릴 때, 닫힐 때, 그리고 메시지를 받을 때 실행되는 메소드를 정의합니다.

4. 웹소켓 서버 설정하기

마지막으로, Vaadin 서버와 웹소켓 서버를 연결하기 위해 web.xml 파일에 다음과 같은 설정을 추가합니다:

<servlet>
  <servlet-name>VaadinServlet</servlet-name>
  <servlet-class>com.vaadin.server.VaadinServlet</servlet-class>
  ...
  <init-param>
    <param-name>heartbeatInterval</param-name>
    <param-value>5</param-value>
  </init-param>
  ...
</servlet>

<servlet-mapping>
  <servlet-name>VaadinServlet</servlet-name>
  <url-pattern>/*</url-pattern>
</servlet-mapping>

위 설정에서 heartbeatInterval은 클라이언트와 서버 간의 연결을 유지하기 위한 주기입니다. 필요한 경우 이 값을 조정할 수 있습니다.

이제 Vaadin과 WebSockets를 사용하여 실시간 통신을 구현할 준비가 되었습니다! 이를 통해 클라이언트와 서버 간에 실시간 데이터를 주고받을 수 있으며, Vaadin의 풍부한 UI 구성요소와 결합하여 다양한 웹 애플리케이션을 개발할 수 있습니다.

더 자세한 내용은 다음 링크를 참조해주세요:

• Vaadin Documentation
• Javax Websocket API Documentation