웹 소켓(Web Socke!)

 

vue.js + spring boot 

 

build.gradle

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

    compileOnly 'org.projectlombok:lombok:1.18.36'
    annotationProcessor('org.projectlombok:lombok')

    implementation 'org.springframework.boot:spring-boot-starter'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
    testRuntimeOnly 'org.junit.platform:junit-platform-launcher'
}

 

 

우선 이 클래스의 메서드들을 오버라이딩 해주겠습니다. 

//연결이 수립된 이후 실행될 메서드!
    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("클라이언트가 연결했다!");
    }

    
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("메시지를 받았다!");
    }

    //연결 종료될 때 실행될 메서드!
    @Override
    public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
        System.out.println("클라이언트가 연결을 종료했다!");
    }

테스트 용도로 콘솔에 연결되었음을 표시해주었습니다.

 

오버라이딩 메서드는 차례대로 다음의 역할을 합니다.

 

• 연결이 되었을 때 실행될 메서드
• 메시지를 받았을 때 실행될 메서드
• 연결이 종료되었을 때 실행될 메서드

 

웹 소켓 설정 클래스

@EnableWebSocket
@RequiredArgsConstructor
@Configuration
public class WebSocketConfig implements WebSocketConfigurer {
    private final MessageHandler messageHandler;
    
    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        
        registry.addHandler(messageHandler, "/ws/chat") //end-point
                .setAllowedOrigins("*"); //cors
    }
}

 

 

프론트 웹 소켓 코드 작성

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

<script setup>
import { ref, onMounted } from "vue";
const message = ref("");
const socket = ref(null);
const connectWebSocket = () => {
  //생성자의 파라미터에는 서버 주소와 웹 소켓이 열려있는 엔드 포인트
  socket.value = new WebSocket("ws://localhost:8080/ws/chat");

  socket.value.onopen = () => {
    console.log("서버에 연결 했다.");
  };

  socket.value.opmessage = (event) => {
    console.log(event.data + "메시지를 받았다.");
  };

  socket.value.onclose = () => {
    console.log("서버와 연결이 해제 됐다.");
  };
};

onMounted(() => {
  connectWebSocket();
});
</script>

<style lang="scss" scoped></style>

 

 

결과

 

브라우저(프론트 결과)

 

서버(sprig boot)

 

 

일단 여기까지 각 메서드가 어떤 역할을 하는지 파악해야 합니다.

 

MessageHandler

연결이 수립된 이후 실행 afterConnectionEstablished

메시지 받았을 때 실행 handleTextMessage

연결 종료될 때 실행 afterConnectionClosed

 

Vue - WebSocket

웹 소켓 생성 WebSocket(ws://(서버주소):(포트)/(서버의 웹 소켓 엔드포인트))

서버에 연결하는 메서드 - socket.value.onopen

서버에 메시지를 전달하는 메서드 - socket.value.opmessage

서버와 연결을 해제하는 메서드 - socket.value.onclose

 

 

 

 

 

이제 서버가 클라이언트가 보낸 메시지들을

afterConnectionEstablished

다른 클라이언트들에게 전송해줘야 합니다.

 

//메시지를 받았을 때 실행될 메서드
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        System.out.println("메시지를 받았다!");
    }

 

이 부분을 고쳐주면 될거 같은데, 클라이언트들   이라는 정보를 담을 변수가 현재 코드에 없기 때문에 이 정보를 저장할 변수를 하나 만들어 주어야 합니다. 

이 클라이언트 정보는 어디서 저장해야 할까? → 클라이언트가 접속했을 때, 저장하자!

→  afterConnectionEstablished

 

@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("클라이언트가 연결했다!");
    }

 

 

메시지를 받았을 때 이 메시지를 다른 클라이언트에게 전송하자! → handleTextMessage 메서드

 

//메시지를 받았을 때 실행될 메서드
    @Override
    protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
        for(WebSocketSession session2 : sessions){
        // 내가 보낸 메시지를 내가 다시 받을 필요 X 
            if(!session.equals(session2)){
                session2.sendMessage(new TextMessage(message.getPayload()));
            }
        }
        System.out.println("메시지를 받았다!");
    }

 

이런 식으로 웹 소켓을 사용하는 방법에 대해서 알아보았습니다.