이번에는 React와 Html 둘다 있기에 둘중 아무거나 사용합니다.
우선 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Chat Room</title>
<style>
#chat-messages {
height: 300px;
overflow-y: scroll;
}
</style>
</head>
<body>
<h1>Chat Room</h1>
<div id="chat-messages"></div>
<input type="text" id="messageInput" placeholder="Type your message..." />
<button onclick="sendMessage()">Send</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.5.2/sockjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script>
const socket = new SockJS("http://localhost:8080/ws");
const stompClient = Stomp.over(socket);
const roomId = "room1";
const sender = "USER" + (Math.floor(Math.random() * 100 )).toString();
const user = sender
stompClient.connect({}, (frame) => {
console.log("Connected to WebSocket");
console.log("Session ID: " + frame.headers["user-name"]); // 현재 세션의 사용자명 출력
console.log(frame);
// 얘가 왜 안됨 ㅋㅋㅋㅋㅋㅋ
stompClient.subscribe(`/sub/chat/${roomId}`, (message) => {
console.log("subscribe : " + message );
const chatRoom = JSON.parse(message.body);
displayChatRoom(chatRoom);
});
});
// WebSocket 연결이 닫힐 때 실행되는 이벤트 핸들러
socket.addEventListener("close", (event) => {
console.log("WebSocket 연결이 닫혔습니다.");
// 필요에 따라 추가 로직을 여기에 추가하세요.
});
function sendMessage() {
const messageInput = document.getElementById("messageInput");
const message = messageInput.value;
stompClient.send(
"/pub/chat/sendMessage",
{},
JSON.stringify({
sender: sender,
roomId: roomId,
content: message,
type: "CHAT",
})
);
messageInput.value = "";
}
// 화면에 뿌리는 역할
function displayChatRoom(chatRoom) {
const chatMessages = document.getElementById("chat-messages");
chatMessages.innerHTML = "";
console.log("chatRoom : " , chatRoom)
for (const message of chatRoom.messages) {
const messageDiv = document.createElement("div");
messageDiv.innerHTML = `<strong>${message.sender}:</strong> ${message.content}`;
chatMessages.appendChild(messageDiv);
}
}
</script>
</body>
</html>
2번째 React
<!-- STOMP JS -->
npm install @stomp/stompjs --save
<!-- SOCKET JS -->
npm install sockjs-client
npm i --save-dev @types/sockjs-clientimport React, { useEffect, useRef, useState } from "react";
import script from "../assets/script";
import { CompatClient, Stomp } from "@stomp/stompjs";
import SockJS from "sockjs-client";
function A() {
useEffect(() => {
connectHaner()
},[])
// 현재 시각
const [currentTime, setCurrentTime] = useState(
new Date().toLocaleTimeString()
);
// 유저가 타이핑한 메시지
const [message, setMessage] = useState<any>();
// 채팅룸의 메시지
const [chatRoom, setChatRoom] = useState<any>();
const [roomId, setRoomId] = useState<string>("room1");
const [sender, setSender] = useState<string>("USER1");
const client = useRef<CompatClient>();
const connectHaner = () => {
client.current = Stomp.over(() => {
const sock = new SockJS("http://localhost:8080/ws");
return sock;
});
client.current.connect(
{
// 여기에서 유효성 검증을 위해 header를 넣어줄 수 있음.
// ex)
// Authorization: token
},
() => {
// callback 함수 설정, 대부분 여기에 sub 함수 씀
client.current?.subscribe(
`/sub/chat/${roomId}`,
(message) => {
setChatRoom(JSON.parse(message.body));
},
{
// 여기에도 유효성 검증을 위한 header 넣어 줄 수 있음
// Authorization: token
}
);
}
);
};
const sendHandler = () => {
const messageInput: any = document.getElementById("message-to-send");
const message = messageInput.value;
client.current?.send(
"/pub/chat/sendMessage",
{},
JSON.stringify({
sender: sender,
roomId: roomId,
content: message,
type: "CHAT",
})
);
messageInput.value = "";
};
return (
<>
//..
</>
);
}
export default A;
'SpringBoot > code' 카테고리의 다른 글
| Springboot - Stomp 간단 코드 (0) | 2024.03.10 |
|---|---|
| WebSocket 을 사용해보자 - 2. Stomp Springboot 부분 (2) | 2024.01.04 |
| Springboot - OAuth2.0 Google API , kakao API , Naver API 로그인 (0) | 2023.12.14 |
| SpringBoot - MyBatis - 다이나믹 SQL 작성 (0) | 2023.10.16 |
| SpringBoot - SSR에서 페이징 처리에 필요한 객체 PageReq , PageRes (0) | 2023.10.12 |
