간단하게 websocket을 사용해보자
html
> package.json
{
"dependencies": {
"ws": "^8.16.0"
}
}
> html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Native WebSocket Example</title>
</head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
crossorigin="anonymous"
/>
<body>
<fieldset class="ms-5 float-start">
<div class="form-control">
<label for="message">Message</label><br />
<textarea id="message" cols="30" rows="10"></textarea>
</div>
<input type="button" value="Send" class="submit-btn" id="button-send" />
<button id="button-close">나가기</button>
</fieldset>
<fieldset class="clearfix border p-5">
<h1>텍스트 창</h1>
<div id="content"></div>
</fieldset>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
crossorigin="anonymous"
></script>
<script>
let messaging = "환영합니다.";
var webSocket = new WebSocket("ws://localhost:8000/ws/chat");
// 2. 웹소켓 이벤트 처리
// 2-1) 연결 이벤트 처리
webSocket.onopen = () => {
console.log("웹소켓서버와 연결 성공");
};
// 2-2) 메세지 수신 이벤트 처리
webSocket.onmessage = function (event) {
console.log(`${event.data}`);
messaging += "<br/>" + event.data;
document.getElementById("content").innerHTML=messaging;
};
// 2-3) 연결 종료 이벤트 처리
webSocket.onclose = function () {
console.log("서버 웹소켓 연결 종료");
};
// 2-4) 에러 발생 이벤트 처리
webSocket.onerror = function (event) {
console.log(event);
};
// 3. 버튼 클릭 이벤트 처리
let count = 1;
document.getElementById("button-send").onclick = function () {
let message = document.querySelector("#message").value
webSocket.send("html : " + message);
};
// 3-2) 웹소켓 서버와 연결 끊기
document.getElementById("button-close").onclick = function () {
if (webSocket.readyState === webSocket.OPEN) {
// 연결 상태 확인
webSocket.close(); // 연결 종료
} else {
alert("연결된 웹소켓 서버가 없습니다.");
}
};
</script>
</body>
</html>
Springboot
> WebSocketConfig
import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.WebSocketHandler;
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
//웹 소켓 통신에 대한 설정 파일임을 명시한다. 더 찾아보니,
// 얘는 웹 소켓 관련 설정을 자동으로 해주고,
// WebSocketConfigurer을 implement + override 하여 메서드를 customize 할 수 있는 것이다.
@EnableWebSocket
@RequiredArgsConstructor
public class WebSocketConfig implements WebSocketConfigurer {
private final WebSocketHandler webSocketHandler;
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(webSocketHandler, "/chat").setAllowedOrigins("*");
}
}
>
> WebSocketHandler
import lombok.extern.slf4j.Slf4j;
import org.apache.tomcat.websocket.WsSession;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.util.*;
@Component
@Slf4j
public class WebSocketHandler extends TextWebSocketHandler {
private static List<WebSocketSession> list = new ArrayList<>();
// 얘도 많이들 사용함
private Set<WebSocketSession> sessions
= Collections.synchronizedSet(new HashSet<WebSocketSession>() );
// Client가 접속 시 호출되는 메서드
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
list.add(session); // 세션 추가
System.out.println("{} - 클라이언트 접속 : " + session);
System.out.println("{} - 클라이언트 ID : " + session.getId());
System.out.println("{} - 클라이언트 프로토클 : " + session.getUri());
System.out.println(list.size());
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String payload = message.getPayload();
System.out.println("payload : " + payload);
System.out.println(list.size());
// 접속된 유저에게 보냄
for (WebSocketSession ws : list) {
ws.sendMessage(message);
}
}
// Client가 접속 해제 시 호출되는 메서드
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
System.out.println("{} - 클라이언트 접속 해제 : " + session);
list.remove(session);
}
}
Websocket은 빠르게 넘어가자
프로토콜 : ws
진행
'끄적이는 곳' 카테고리의 다른 글
| Websocket vs Stomp vs RabbitMQ 의 차이 (0) | 2024.01.06 |
|---|---|
| WebSocket 과 RabbitMQ가 무엇이 다를까? (1) | 2024.01.04 |
| Rabbit MQ , Erlang 버젼 확인 (1) | 2024.01.04 |
| Shell 종류 (1) | 2023.12.27 |
| React - CKEditor 5버젼이었나..? (2) | 2023.12.23 |
