[Java] 채팅만들기

1.build.gradle

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

2.websocket 설정

import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic");
        config.setApplicationDestinationPrefixes("/app");
    }

    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS();
    }
}

1. @Configuration 어노테이션:

• 이 클래스가 Spring의 설정 클래스임을 나타냅니다. Spring 컨텍스트가 이 클래스를 구성 파일로 인식하고, 내부에 정의된 Bean들을 등록합니다.

2. @EnableWebSocketMessageBroker 어노테이션:

• 이 어노테이션은 Spring의 WebSocket 메시지 브로커를 활성화합니다. Spring에서 WebSocket 메시지 처리를 위한 인프라를 자동으로 구성해줍니다.

3. configureMessageBroker(MessageBrokerRegistry config) 메서드:

• 이 메서드는 메시지 브로커를 구성합니다.

• config.enableSimpleBroker("/topic"): 메모리 기반의 메시지 브로커를 활성화하며, 클라이언트에게 메시지를 전달할 때 사용하는 경로를 /topic으로 설정합니다. 이 경로를 통해 브로드캐스트 메시지가 전달됩니다.

• config.setApplicationDestinationPrefixes("/app"): 클라이언트가 메시지를 보낼 때 사용하는 경로의 접두사를 /app으로 설정합니다. 클라이언트가 /app으로 시작하는 경로에 메시지를 보낼 경우, 해당 메시지는 메시지 핸들러로 라우팅됩니다.

4. registerStompEndpoints(StompEndpointRegistry registry) 메서드:

• 이 메서드는 클라이언트가 WebSocket을 통해 연결할 수 있는 STOMP 엔드포인트를 등록합니다.

• registry.addEndpoint("/ws").withSockJS();: /ws 엔드포인트를 통해 WebSocket 연결을 허용하며, SockJS 폴백 옵션을 활성화하여 브라우저가 WebSocket을 지원하지 않을 경우 다른 전송 방식을 사용할 수 있게 합니다.

- 클라이언트는 /ws 엔드포인트를 통해 WebSocket 연결을 설정합니다.

• 클라이언트는 /app 접두사로 시작하는 경로에 메시지를 보내면, 서버의 특정 컨트롤러 메서드로 라우팅됩니다.

• 서버는 /topic 접두사로 시작하는 경로를 통해 클라이언트에게 브로드캐스트 메시지를 전달합니다

package kr.linker.linkermain.controller.CH;

import kr.linker.linkermain.model.CH.ChatMessage;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.Payload;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

@Controller
public class ChatController {

    /** 클라이언트가 /app/chat.sendMessage 경로로 메시지를 전송하면 이 메서드가 호출 **/
    @MessageMapping("/chat.sendMessage")
    @SendTo("/topic/public")
    public ChatMessage sendMessage(@Payload ChatMessage chatMessage) {
        return chatMessage;
    }

    /** 클라이언트가 /app/chat.sendMessage 경로로 메시지를 전송하면 이 메서드가 호출 **/
    @MessageMapping("/chat.addUser")
    @SendTo("/topic/public")
    public ChatMessage addUser(@Payload ChatMessage chatMessage) {
        chatMessage.setType(ChatMessage.MessageType.JOIN);
        return chatMessage;
    }
}

== 코드설명 

- /app/chat.sendMessage 경로로 전송시 /chat.sendMessage 에 메세지가 broadcast 가 된다. 

STOMP(Simple Text Oriented Messaging Protocol)은

- Message Payload에는 Text or Binary 데이터

- 채팅방 생성 : pub / sub 구현을 위한 Topic이 생성됨

- 채팅방 입장 : Topic 구독

- 채팅방에서 메세지를 송수신 : 해당 Topic으로 메세지를 송신(pub), 메세지를 수신(sub)

Client Side 

npm install stompjs sockjs-client
npm install --save-dev @types/sockjs-client ( nextjs, typescript 에서는 이 명령어 사용 ) 
npm install @stomp/stompjs