개발 ━━━━━/Spring(boot)

[Spring] WebSocket 을 이용한 채팅 구현

GukJang 2023. 10. 9. 21:53
반응형

WebSocket 이란

서버가 응답하고 연결을 종료하는 단방향 통신인 http 통신과는 달리

Server 와 Client 의 연결이 지속적으로 유지되는 양방향 통신을 하는 방식인 socket 통신이다.

 

접속까지는 HTTP 프로토콜를 이용하고 그 이후에는 자체적인 Websocket 프로토콜을 이용한다.

 

Springboot 에 Websocket 서버 구축

build.gradle 에 의존성 (Dependency) 추가

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-web'
    implementation 'org.springframework.boot:spring-boot-starter-websocket'
    compileOnly 'org.projectlombok:lombok'
    annotationProcessor 'org.projectlombok:lombok'
}

 

troubleshoot

 

Application 설정

Run 시킬 Application 을 설정해준다.

@SpringBootApplication
public class WebsocketchatApplication {
    public static void main(String[] args) {
        SpringApplication.run(WebsocketchatApplication.class, args);
    }
}

 

 


채팅방이 단 한 개인 Websocket 서버

클래스 구조

 

Websocket Handler 작성

한 서버에서 여러 클라이언트가 접속 가능하고, 서버는 여러 클라이언트가 발송하는 메세지를 받아 처리해줄 Handler 가 필요하다.

텍스트만 주고 받을 것이기 때문에 TextWebSocketHandler 를 상속 받는다. (사진, 영상 등 미디어 - BinaryWebSocketHandler)

package com.example.demo.websocket;

import com.fasterxml.jackson.databind.ObjectMapper;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;

@Slf4j
@RequiredArgsConstructor
@Component
public class WebSocketHandler extends TextWebSocketHandler {

    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        String payload = message.getPayload();
        log.info("payload : {}", payload);

        TextMessage textMessage = new TextMessage("Welcome to chat server");
        session.sendMessage(textMessage);
    }
}

 

Websocket Config 작성

handler 를 이용한 Websocket 활성화를 위한 Config 파일을 작성한다.

package com.example.demo.websocket;

import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

@Slf4j
@Configuration
@RequiredArgsConstructor
@EnableWebSocket			// WebSocket 활성화
public class WebSocketConfig implements WebSocketConfigurer {
    private final WebSocketHandler webSocketHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry){
    	// websocket 에 접속하기 위한 endpoint (/ws/chat) 으로 설정
        // 다른 서버에서도 접속 가능하도록 CORS : setAllowedOrigins("*") 추가
        registry.addHandler(webSocketHandler, "/ws/chat").setAllowedOrigins("*");
    }
}

 

Websocket 테스트

Websocket 테스트를 위해 구글 확장 프로그램인 Simple Websocket Cilent 을 설치해준다.

 

https://chrome.google.com/webstore/detail/simple-websocket-client/pfdhoblngboilpfeibdedpjgfnlcodoo/related?hl=ko 

 

Simple WebSocket Client

Construct custom Web Socket requests and handle responses to directly test your Web Socket services.

chrome.google.com

 

브라우저 우측 상단에 확장 프로그램에서 Simple WebSocket Client 를 눌러 이동한다.

 

 

SpringBoot 서버를 실행시키고

URL 에 ws://localhost:8080/ws/chat 을 입력하고 Open 버튼을 누르면 Status 가 Opened 로 바뀌며 서버가 연결된다.

 

Request 에 메세지를 적고 Send 버튼을 누르면

 

Request 에 입력한 메세지가 전송되면 응답으로 Handler 에 입력한 메세지가 뜨면서 WebSocket 연결을 확인할 수 있다.

 

채팅방이 여러 개인 Websocket 서버

클래스 구조

 

채팅 메세지 DTO 작성 (ChatMessage)

채팅 메세지를 주고 받기 위한 DTO 를 만든다.

package com.example.demo.websocket;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class ChatMessage {
	// 메세지 타입 : 입장, 채팅
    public enum MessageType {
        ENTER, TALK
    }

    private MessageType messageType;	// 메세지 타입
    private String roomId;	// 방 번호
    private String sender;	// 메세지 보낸 사람
    private String message;	// 메세지
}

 

채팅방 DTO 작성 (ChatRoom)

 

참고

https://spring.io/guides/gs/messaging-stomp-websocket/

https://www.daddyprogrammer.org/post/4077/spring-websocket-chatting/

https://ws-pace.tistory.com/105

 

반응형