WebSocket은 웹에서 실시간, 양방향, 지속적인 통신을 가능하게 하는 고급 기술입니다. 일반적인 HTTP 요청과는 달리, WebSocket 연결이 한 번 수립되면 서버와 클라이언트 간에 지속적인 데이터 교환을 할 수 있으며, 연결이 종료될 때까지 유지됩니다. 이는 실시간 애플리케이션 개발에 매우 중요한 역할을 합니다.
Polling은 클라이언트가 정해진 주기마다 서버에 HTTP 요청을 보내어 최신 정보를 요청하는 기술입니다. 이 방법은 실시간 통신에 비해 구현이 간단하고 넓은 호환성을 가지지만, 지속적인 요청으로 인해 네트워크 부하가 커지고 실시간 통신에 비해 지연 시간이 길다는 단점이 있습니다.
import { useEffect, useState } from 'react';
import { w3cwebsocket as W3CWebSocket } from 'websocket';
function ChatComponent() {
const [client, setClient] = useState(null);
const [messages, setMessages] = useState([]);
useEffect(() => {
// WebSocket 클라이언트 초기화
const client = new W3CWebSocket('ws://localhost:8000/chat');
client.onopen = () => {
console.log('WebSocket Client Connected');
};
client.onmessage = (message) => {
setMessages(messages => [...messages, message.data]);
};
setClient(client);
return () => {
client.close();
};
}, []);
const sendMessage = (message) => {
if (client) {
client.send(message);
}
};
return (
<div>
<ul>
{messages.map((message, index) => (
<li key={index}>{message}</li>
))}
</ul>
<button onClick={() => sendMessage('Hello!')}>Send Message</button>
</div>
);
}