2024-03-17 WIL - Websocket 에 대해서

Websocket의 활용처

실시간 채팅, 실시간 알림설정, 실시간 모니터링, 문서의 동시편집을 구현하는데 사용한다.

 

HTTP 프로토콜 vs WebSocket

windows 개발자 블로그를 참고해보면 알 수 있는데, WebSocket이 무조건 HTTP 프로토콜의 상위호환이 아닌, 각자의 장단점이 있기에 잘 보고 적절한 종속성을 사용하여야 한다.

 

WebSocket 기본 setting

 

build.gradle에

implementation 'org.springframework.boot:spring-boot-starter-websocket'

 

WebSocketConfig.java

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

    // 클라이언트로 메시지를 "/topic" prefix를 사용하여 전송하고,
    // 클라이언트로부터 메시지를 "/app" prefix를 사용하여 수신하기 위한 메시지 브로커 설정
    @Override
    public void configureMessageBroker(MessageBrokerRegistry config) {
        config.enableSimpleBroker("/topic"); // 메시지 전달을 위한 브로커 활성화
        config.setApplicationDestinationPrefixes("/app"); // 메시지 수신을 위한 prefix 설정
    }

    // SockJS 지원을 포함한 WebSocket 연결을 위한 엔드포인트 등록
    @Override
    public void registerStompEndpoints(StompEndpointRegistry registry) {
        registry.addEndpoint("/ws").withSockJS(); // SockJS를 사용하여 WebSocket 엔드포인트 등록
    }
    
    // WebSocket 전송 속성 구성
    public void configureWebSocketTransport(WebSocketTransportRegistration registration) {
        registration.setSendTimeLimit(15 * 1000) // 메시지 전송 시간 제한 설정
                    .setSendBufferSizeLimit(512 * 1024) // 전송 버퍼 크기 제한 설정
                    .setMessageSizeLimit(128 * 1024); // 메시지 크기 제한 설정
    }
    
    // WebSocket 핸들러 및 인터셉터 등록
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/ws") // WebSocket 핸들러 등록
                .addInterceptors(new MyHandshakeInterceptor()); // WebSocket 연결에 인터셉터 추가
    }
    
    // WebSocket 핸들러 빈 정의
    @Bean
    public WebSocketHandler myHandler() {
        return new MyWebSocketHandler(); // WebSocket 핸들러 Bean 정의
    }
    
    // 허용된 출처를 사용하여 WebSocket 핸들러 등록
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(myHandler(), "/ws")
                .setAllowedOrigins("http://localhost:8080"); // 특정 출처 허용 설정
    }

    // 인바운드 메시지 보안 구성
    @Override
    protected void configureInbound(MessageSecurityMetadataSourceRegistry messages) {
        messages.simpDestMatchers("/topic/**").authenticated(); // 특정 destination에 대한 인증 필요 설정
    }

    // 동일 출처 정책 비활성화
    @Override
    protected boolean sameOriginDisabled() {
        return true; // 동일 출처 정책 비활성화 설정
    }
}

 

WebSocketHandler.java

@Component
@RequiredArgsConstructor
public class WebSocketHandler {
    private final SimpMessagingTemplate messagingTemplate;

    public void notifyMember(Member member) {
        Long memberId = member.getId();
        messagingTemplate.convertAndSendToUser(String.valueOf(memberId), "/queue/notifications", "새로운 댓글이 달렸습니다.");
    }
}

 

WebSocket의 기본 활용 방법 - 실시간 알람 설정

조건 -> comment를 작성시에 접속중인 post 작성자에게 알림이감

 

CommentService.java

private final WebSocketHandler webSocketHandler;

public void createComment(Long postId, CommentRequestDto request) {
        // 댓글 구현 기능
        WebSocketHandler.notifyMember(post.getMember());
    }

websocket.js

var socket = new SockJS('/notification');
var stompClient = Stomp.over(socket);

stompClient.connect({}, function(frame) {
    console.log('Connected: ' + frame);
    
    // /queue/notifications 를 구독
    stompClient.subscribe('/user/queue/notifications', function(notification) {
        var message = JSON.parse(notification.body);
        console.log('알림을 받았습니다: ', message);
    });
});

 

확장가능한 방향?

알림 타입 및 채널 관리: WebSocket 말고도 이메일이나 sms로 전송 가능할듯 하다.

알림 설정 관리: 사용자가 원하는 알림을 선택하고 관리할 수 있는 설정 기능을 추가) ex: 원하지 않는 알림 받지 않기

알림 히스토리 및 읽음 상태 관리: 사용자가 받은 알림을 확인할 수 있는 기능을 추가하여 히스토리를 관리하고, 사용자가

알림을 읽었는지 여부를 추적하기 

알림 내용 개선: 알림의 내용을 더욱 구체적으로 만들어서, 예를 들어, 댓글 알림의 경우 댓글 내용이나 댓글이 달린 게시물 제목 등을 포함하여 알림을 개선하기

실시간 상호작용: 사용자가 알림을 받은 후 바로 상호작용할 수 있는 기능을 추가. 예를 들어, 댓글 알림의 경우 알림을 클릭하면 해당 댓글이 달린 게시물로 바로 이동할 수 있도록 링크를 제공