[Spring Boot] 웹 소켓(Web Socket)

웹 소켓(Web Socket) : 클라이언트(브라우저)와 서버가 실시간으로 양방향 통신을 할 수 있도록 해주는 프로토콜

기존 HTTP 통신과 달리 한 번 연결을 맺으면 계속 유지되기 때문에 빠르고 효율적인 데이터 전송이 가능

 

웹 소켓 동작 방식

클라이언트가 ws:// 또는 wss://(보안 웹소켓)로 서버에 연결 요청

서버가 응답해서 연결이 되면 WebSocket 통신 시작

이후에 요청/응답 없이 데이터 자유롭게 주고 받음

---

웹 소켓 구현

간단한 프론트

<script setup>
import { ref, onMounted } from 'vue';

const message = ref('');
const socket = ref(null)

const sendMessage = () => {
    console.log(message.value);
    socket.value.send(message.value);
}

const connectWebSocket = () => {
    socket.value = new WebSocket('ws://localhost:8080/ws/chat');

    socket.value.onopen = () => {
        console.log("서버에 연결 했다.");
    }
    socket.value.onmessage = (event) => {
        console.log(event.data + "메세지를 받았다.");
    }
    socket.value.onclose = () => {
        console.log("서버와 연결이 해제 됐다.");
    }
}

onMounted (() => {
    connectWebSocket();
})

</script>
<template>
    <div>
        채팅 목록
    </div>
    <input v-model="message" type="text" placeholder="메시지 입력">
    <button @click="sendMessage">전송</button>
</template>

 

의존성 추가(build.gradle)

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

 

MessageHandler

@RequiredArgsConstructor
@Component
public class MessageHandler extends TextWebSocketHandler {
    private final Set<WebSocketSession> sessions = new HashSet<>();

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        sessions.add(session);
        System.out.println("클라이언트가 연결했다.");
    }

    @Override
	public void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    for (WebSocketSession s : sessions) {
        if (s.isOpen()) {
            s.sendMessage(new TextMessage(message.getPayload()));
        }
    }
}
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        sessions.remove(session);
        System.out.println("클라이언트가 연결을 종료했다.");
    }
}

afterConnectionEstablished() : 새로운 WebSocket 연결이 설정되었을 때

handleTextMessage() : 클라이언트로부터 텍스트 메세지를 받았을 때

afterConnectionClosed() : WebSocket 연결이 종료되었을 때

WebSocketConfig (Spring WebSocket 설정 코드)

@EnableWebSocket
@RequiredArgsConstructor
@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
    private final MessageHandler messageHandler;

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(messageHandler, "/ws/chat").setAllowedOrigins("*");
    }
}

@EnableWebSocket : Spring에서 WebSocket 활성화

/ws/chat 경로로 들어오는 WebSocket 연결을 messageHandler가 처리

모든 도메인에서 WebSocket 연결 허용