WebSocket???
WebSocket은 클라이언트와 서버간의 양방향 통신을 실시간으로 지원하는 프로토콜이다. HTTP와 달리 WebSocket은 연결이 한 번만 설정해도 지속적으로 유지되며, 클라이언트와 서버가 데이터를 자유롭게 주고받을 수 있다.
>> 채팅 애플리케이션, 실시간 알림 시스템 등으로 사용 가능.
- 양방향 통신 : 클라이언트와 서버가 데이터를 동시에 주고받을 수 있음.
- 연결 지속성 : 연결이 생성된 후 별도 요청 없이 데이터 전송이 가능.
- 효율성 : HTTP처럼 요청-응답 구조를 반복하지 않아 네트워크를 대역폭 절약할 수 있음.
이런 특성 덕분에 WebSocket은 채팅 애플리케이션, 실시간 알림 시스템, 게임 등에서 많이 사용됩니다.
1. 의존성 주입(pom.xml)
2. Websocket 핸들러 생성
package com.demo.websocket;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
public class ChatWebSocketHandler extends TextWebSocketHandler {
@Override
public void handleTextMessage(WebSocketSession session, TextMessage message)
throws Exception {
String payload = message.getPayload(); // 클라이언트에서 보낸 메세지
System.out.println("Message : " + payload);
session.sendMessage(new TextMessage("응답 : " + payload)); // 메세지 응답
}
}
3. Websocket 설정
package com.demo.websocket;
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;
@Configuration
@EnableWebSocket
public class WebsocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
// url 매핑
registry.addHandler(new ChatWebSocketHandler(), "/chat")
.setAllowedOrigins("*"); // 모든 도메인 허용
}
}
4. html, javascript 구현
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>웹 소켓</title>
</head>
<body>
<div class="websocket">
<h1>웹 소켓</h1>
<div class="input">
<input type="text" id="messageInput" placeholder="메세지를 작성하세요..">
<button onclick="sendMessage()">전송</button>
</div>
<div class="output" id="output"></div>
<script>
const socket = new WebSocket("ws://localhost:1234/chat"); // websocket 연결 생성
// 서버에서 받은 메세지 처리
socket.onmessage = function(event) {
const outputDiv = document.getElementById('output');
const newMessage = document.createElement('div');
newMessage.textContent = event.data;
outputDiv.appendChild(newMessage);
};
// 메세지 서버로 전송
function sendMessage() {
const input = document.getElementById("messageInput");
socket.send(input.value); // 입력값 전송
input.value = ''; // 입력 필드 초기화
}
// WebSocket 연결 상태 확인 및 에러 처리
socket.onopen = function() {
console.log("WebSocket 연결 성공");
};
socket.onerror = function(error) {
console.error("WebSocket 에러 발생: ", error);
};
socket.onclose = function() {
console.log("WebSocket 연결 종료");
};
</script>
</div>
</body>
</html>
5. Controller 구현
package com.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class WebSocketController {
@GetMapping("/websocket")
public String websocketView() {
return "websocket/websocket";
}
}
++ 테스트 ++
지금까지 Websocket에 대해서 간단하게 알아보고, 테스트를 해봤으면
다음은 Websocket을 활용해서 채팅과 스케줄 작성 및 알람기능을 구현해 보고 테스트..를 해....Continue...
'개인 공부' 카테고리의 다른 글
| JWT를 사용한 Spring Security 기반 인증 시스템 구현 (1) | 2024.12.27 |
|---|---|
| Spring Security를 활용한 사용자 권한 기반 접근 제어 (0) | 2024.12.24 |
| Spring Security를 활용한 로그인!?!? (0) | 2024.12.21 |
| MVC 패턴이 뭔데... (1) | 2024.12.18 |