[쀼] 화면이 실시간으로 바뀌어야 하는 요구사항을 해결해보자 (1) 백엔드 : WebSocket 구현

클라이언트의 화면이 실시간으로 바뀌는 요구사항

부부 중 하나가 연결하기, 시작하기 버튼을 누르면 다른 배우자의 화면이 바뀌어야 한다

 

 

---

 

 

다양한 방식 비교 

WebSocket 선택함

 
WebSocket
서버와의 연결을 통해 양방향 통신이 가능하다. 
 
HTTP Polling
클라이언트가 주기적으로 서버에게 요청을 보내는 방식이다.
 
Server-Sent Events(SSE)
서버와 한 번 연결을 맺고 나면 일정 시간 동안 서버에서 변경이 발생할 때마다 데이터를 전송받는 방법이다. 단방향 통신이다.

 

 

	WebSocket	SSE	HTTP Polling
통신 방향	양방향	단방향 (서버 → 클)	단방향 (서버 → 클)
연결 유지 방식	지속 연결	지속 연결	연결-응답-재연결 반복
브라우저 지원	거의 모두	일부 IE 미지원	거의 모두
서버 부하	낮음	낮음	높음
지연 시간	매우 낮음	낮음	중간~높음
구현 복잡도	중간	쉬움	쉬움

---

 

 

작동 로직

 

1. 로그인 완료 후 임시 페이지
- 로그인과 동시에 상태 리턴

2. 유저정보등록 페이지
- 사용자가 유저정보 등록을 완료하면
서버에서 결과에 따라 구독하고 있는 클라이언트에게 알린다

3. 부부코드확인 페이지
- 사용자가 부부 연결을 완료하면 {유일한 임시 ID값 : 유저아이디 2개 정보}가 레디스에 저장된다.
- 이때 한 사용자가 코드를 인증하면
배우자도 화면이 자동으로 전환하기 위해 구독하고 있는 사람들에게 상태 변화를 알린다.

4. 부부정보등록 페이지
- 사용자가 부부 정보 등록 누르면
이때 한 사용자가 코드를 인증하면
배우자도 화면이 자동으로 전환하기 위해 구독하고 있는 사람들에게 상태 변화를 알린다.

5. 홈 페이지
 
 
 
 
 

---

WebSocket 프로토콜

 

프로토콜 단계

1. 클라이언트가 서버에 WebSocket 연결을 요청하는 단계

2. 연결이 설정된 후에 실제 데이터가 교환되는 단계

 

1. 오프닝 핸드셰이크

HTTP 를 기반으로 시작되지만, 클라이언트와 서버가 WebSocket 연결로 업그레이드하려는 의도를 명확히 해야 한다.

 

- 클라이언트 측 : 연결  요청 헤더 

• 1) Upgrade : websocket
  • 서버가 WebSocket 연결을  허용하도록 유도

• 2) Connection : Upgrade   
  • 특정한 연결 관련 헤더를 지정하는데 사용됨

• 3) Sec-WebSocket-Key
  • 클라이언트가 보내는  임의의 Base64 인코딩된 값
  • 서버가 응답할 때, ,Sec-WebSocket-Accept 헤더에 포함된 값을 계산하는 데 사용됨

• 4) Sec-WebSocket-Version
  • 클라이언트가 지원하는 WebSocket 프로토콜의 버전을  지정하는 헤더 

• 5) Origin
  • 클라이언트가 연결을  시도하는 웹 애플리케이션의 출처를 명시 

 

- 서버 : 클라이언트 요청을 받아들이고, 101 Switching Protocols 상태 코드로 응답하여 연결을 WebSocket 프로토콜로 업그레이드

 

• HTTP/1.1 101 Switching Protocols
  • 서버가 클라이언트의 WebSocket 요청을 수락하고 연결을 업그레이드한다는 응답 상태 코드
• Upgrade: websocket
  • 서버가 요청을 수락하고, HTTP 연결을 WebSocket 프로토콜로 업그레이드했음을 명시
• Connection: Upgrade
  • 서버가 요청에 따라 연결을 업그레이드했다는 것을 나타냄 
• Sec-WebSocket-Accept
  • 서버가 클라이언트의 Sec-WebSocket-Key에 기반하여 계산한 응답 값
  • 클라이언트는 이 값을 통해 서버가 정상적으로 WebSocket 연결을 준비했음을 확인함. 클라이언트가 전송한 Sec-WebSocket-Key에 특정한 해시 알고리즘을 적용하여 생성됨

 

 

데이터 송수신

- 텍스트 데이터 : UTF-8 인코딩 문자열

- 바이너리 데이터 : 이미지 & 비디오 스트림 

 

2. 클로징 핸드셰이크  

- 클라이언트 또는 서버 측: 종료 요청 (Close Request)

클라이언트 또는 서버가 close 메시지를 보냄

종료 메시지는 프레임으로 전달되며, HTTP 헤더는 필요하지 않음

• Close Code: 연결을 종료하는 이유를 나타내는 2바이트 숫자 코드
• Reason (선택): 연결 종료의 이유를 설명하는 텍스트 문자열 

- 서버 측: 종료 응답 (Close Response)

서버가 클라이언트의 종료 요청을 수락하고 응답을 보낼 때도 마찬가지로 close 메시지를 전송

 

 

https://datatracker.ietf.org/doc/html/rfc6455

RFC 6455: The WebSocket Protocol

 

 

WebSocket 구현 방법

 

1. WebSocket Upgrade, Connection 헤더 Nginx에서 허용하도록 처리 

    # WebSocket 요청을 처리하는 설정
    location /back/api/ws/ {
        proxy_pass http://127.0.0.1:8080;  # WebSocket 서버가 실행 중인 로컬 포트
        proxy_http_version 1.1;  # WebSocket 연결에 필요한 HTTP 버전
        proxy_set_header Upgrade $http_upgrade;  # WebSocket Upgrade 헤더 처리
        proxy_set_header Connection 'upgrade';  # WebSocket 연결을 위한 Connection 헤더 처리
        proxy_set_header Host $host;  # 호스트 헤더 전달
        proxy_set_header X-Real-IP $remote_addr;  # 클라이언트 IP 주소 전달
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  # 클라이언트 IP 전달
        proxy_set_header X-Forwarded-Proto $scheme;  # 프로토콜 전달 (http 또는 https)
    }

 

2. 백엔드 코드  

@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {

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

	@Override
	public void registerStompEndpoints(StompEndpointRegistry registry) {
		registry.addEndpoint("/ws").setAllowedOrigins("", "http://localhost:3000").withSockJS();
	}
}

@Component
@RequiredArgsConstructor

public class WebSocketEventListener {
	private final SimpMessagingTemplate messagingTemplate;
	private final LandingService landingService;

	@EventListener
	public void handleSubscriptionEvent(SessionSubscribeEvent event) {
		String destination = event.getMessage().getHeaders().get("simpDestination").toString();

		// 특정 토픽 구독 시 초기 데이터 전송
		if (destination.startsWith("/topic/user/")) {
			String userId = destination.split("/")[3];
			LandingInfos landingInfos = landingService.getAllRelatedInfo(Long.parseLong(userId));
			LandingStatus stage = LandingStatus.from(landingInfos);
			String state = stage.toString().toLowerCase();
			messagingTemplate.convertAndSend("/topic/user/" + userId + "/married-status", state);

		}
	}
}

 

 

- 부부 중 한 사람이라도 정보를 연결하거나 그러면 구독하고 있는 사용자에게 상태 전송

 

- 이 후에 업그레이드 해야 하는 부분

사진, 내용도 전송해서 실시간으로 변경되는 사진이나 결혼 기념일 내용도 확인할 수 있도록 하기