[java] Vaadin과 실시간 채팅 구현하기

29 Nov 2023

java

이번 글에서는 Vaadin을 사용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보겠습니다.

1. Vaadin 소개

Vaadin은 Java로 구현된 오픈 소스 웹 애플리케이션 프레임워크입니다. Vaadin은 Java 개발자들이 웹 애플리케이션을 쉽게 개발하고 유지보수할 수 있도록 도와줍니다. Vaadin은 서버 측에서 전체 웹 애플리케이션을 구축하고 클라이언트 측에서 자동으로 렌더링합니다.

2. 실시간 채팅 구현을 위한 Vaadin-WebSocket 연동

실시간 채팅을 구현하기 위해서는 WebSocket을 사용해야 합니다. Vaadin은 WebSocket을 지원하며 이를 활용하여 실시간 채팅 기능을 구현할 수 있습니다.

먼저, Maven을 통해 Vaadin과 WebSocket 관련 라이브러리를 추가해야 합니다. pom.xml 파일에 다음 종속성을 추가합니다:

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
    <version>{버전}</version>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

다음으로, 실시간 채팅을 위한 WebSocket 핸들러 클래스를 작성해야 합니다. 예를 들어, ChatWebSocketHandler 클래스를 다음과 같이 작성할 수 있습니다:

@Component
public class ChatWebSocketHandler extends TextWebSocketHandler {

    private static Set<WebSocketSession> sessions = new HashSet<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
    }

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for (WebSocketSession s : sessions) {
            s.sendMessage(message);
        }
    }

    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
    }
}

ChatWebSocketHandler 클래스는 WebSocket 세션을 관리하고, 새로운 메시지가 도착하면 다른 모든 클라이언트에게 전송합니다.

이제 Vaadin UI 클래스에서 WebSocket을 사용하여 채팅 UI를 구현할 수 있습니다. 예를 들어, ChatUI 클래스를 다음과 같이 작성할 수 있습니다:

@Push
@SpringUI
public class ChatUI extends UI {

    private List<String> chatMessages = new ArrayList<>();
    private VerticalLayout chatLayout;

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        chatLayout = new VerticalLayout();
        chatLayout.setSizeFull();
        setContent(chatLayout);
        
        WebSocketURL url = new WebSocketURLBuilder(getUI().getPage().getLocation().toString())
                .parameter("chat").build();
        WebSocket webSocket = new WebSocket(url) {
            @Override
            public void onMessage(String message) {
                handleChatMessage(message);
            }
        };

        chatLayout.addComponent(new Label("Chat Room"));
        chatMessages.forEach(this::addChatMessage);
        TextField messageField = new TextField();
        messageField.addValueChangeListener(event -> {
            String message = event.getValue();
            webSocket.send(message);
            messageField.clear();
        });
        chatLayout.addComponent(messageField);
    }

    private void handleChatMessage(String message) {
        chatMessages.add(message);
        addChatMessage(message);
    }

    private void addChatMessage(String message) {
        chatLayout.addComponent(new Label(message));
    }
}

ChatUI 클래스는 실시간 채팅을 구현한 UI를 나타냅니다. WebSocket을 통해 서버로부터 메시지를 받아 처리하고, 메시지를 입력하고 전송할 수 있는 입력 필드를 제공합니다.

3. 실행 및 테스트

WebSocket을 사용하여 실시간 채팅을 구현한 후에는 애플리케이션을 실행해보고 테스트할 수 있습니다. 애플리케이션을 실행하고 웹 브라우저에서 접속하면 채팅 기능을 사용할 수 있습니다.

4. 결론

이 글에서는 Vaadin을 사용하여 실시간 채팅 기능을 구현하는 방법에 대해 알아보았습니다. Vaadin과 WebSocket을 함께 활용하면 쉽게 실시간 채팅 기능을 구현할 수 있습니다. Vaadin을 사용하면 Java 개발자들이 웹 애플리케이션을 간편하게 개발하고 유지보수할 수 있습니다.