[WebSocket] Nginx 설정✅ [문제점]로컬에서는 Stomp 연결이 되지만, 서버에 올라가면 연결이 되지 않아 sockjs로 연결이 됨 => 연결 시에 딜레이 발생nginx conf 파일에 해당 내용 추가WebSocket이 hop-by-hop 프로토콜이므로 프록시 서버가 클라이언트의 Upgrade 요청을 가로챌 때 적절한 헤더를 포함하여 WAS 서버에 업그레이드 요청을 보내야 함proxy_set_header Upgrade $http_upgrade;: 클라이언트의 요청 헤더에서 'Upgrade' 값을 가져와 프록시 요청 헤더에 설정. WebSocket 연결을 업그레이드하기 위해서 필요HTTP의 단기 연결과 달리 WebSocket은 오래 지속되기 때문에, 리버스 프록시는 연결을 닫지 않고 열린 상태..
[WebSocket] Stomp - React 구현설치npm i @stomp/stompjsnpm install sockjs-client연결const chatPrivateConnect = () => { const serverURL = `서버URL/endpoint`; let socket = new SockJS({serverURL}); // SockJS를 사용하여 WebSocket 연결을 설정 // WebSocket 클라이언트를 생성 let client = new Client({ // jwt 인증 위해 token 필요 connectHeaders: { Authorization: `Bearer ${acces..
[WebSocket] Stomp - Spring Boot 구현설정build.gradle 파일 // socketimplementation 'org.springframework.boot:spring-boot-starter-websocket'WebSocketConfiguration// 메시지 브로커가 지원하는 WebSocket 메시지 처리 활성화@EnableWebSocketMessageBroker@Configurationpublic class WebSocketConfiguration implements WebSocketMessageBrokerConfigurer { // 소켓 연결과 관련된 설정 @Override public void registerStompEndpoints(StompEndpoint..
Websocket클라이언트와 서버를 연결하고 실시간으로 통신이 가능하도록 하는 통신 프로토콜클라이언트가 초기에 HTTP GET으로 Handshake 요청 시 upgrade 헤더를 사용하여 웹소켓을 사용할 것을 서버에 알림서버는 클라이언트의 요청에 대해 HTTP 101 Switching Protocols 응답 코드로 응답하고 이후부터 웹소켓 프로토콜을 사용하여 통신TCP/IP 기반으로 동작특징지속적인 연결을 통해 클라이언트와 서버 간에 데이터를 실시간으로 전송, 수신 가능실시간 채팅, 게임, 주식 시세 업데이트 등에 많이 사용웹소켓 API를 사용하여 클라이언트와 서버 간의 통신을 구현할 수 있으며, 다양한 언어와 프레임워크에서 지원STOMP(Simple Text Oriented Message Protoco..