⚡ WebSocket
- 서버와 클라이언트 간에 언제든 양방향 통신이 가능하도록 하는 기술
WebSocket 특징
- 실시간, 양방향 및 지속적인 연결
- 짧은 지연 시간의 데이터 교환
- 실시간 채팅이나 게임에 적합
- HTML5 표준 기술로 최신 브라우저의 경우 웹소켓 지원
- 미지원 브라우저도 존재 - WebSocket Emulation으로 대체 (socket.io, SockJS)
WebSocket 통신 비교
| 기본적인 HTTP 통신 | WebSocket |
| 단방향 통신 | 양방향 통신 |
| 클라이언트가 요청을 보내면 서버가 응답 | 별도의 요청을 보내지 않고도 데이터 수신 |
기본적으로 HTTP 통신은 클라이언트가 요청(Request)을 보내면 서버가 응답(Response)하는 구조이다. 서버는 능동적으로 클라이언트에 먼저 데이터를 전송할 수 없기 때문에 클라이언트가 서버의 데이터를 얻기 위해 요청을 먼저 해야 한다. 서버는 이에 수동적으로 응답하는 구조이다.
반면에 웹소켓 통신은 클라이언트와 서버를 연결하고 실시간으로 통신이 가능하도록 하는 기술이다. HTTP와 다르게 별도의 요청을 보내지 않고도 데이터를 수신할 수 있다. 요청을 보낼 필요없이 바로 메시지를 수신할 수 있다. 이 프로토콜은 정보를 동시에 송수신할 수 있으므로 정보 교환이 더 빨라진다.
WebSocket 사용 예시
실시간 데이터 업데이트와 클라이언트 메시지 기능이 필요할 때 주로 사용한다.
- 교환 플랫폼, 게임 어플리케이션, 챗봇, 푸시 알림, 소셜 네트워크, 채팅 애플리케이션, IoT 애플리케이션
🎈 실습
- Express, WebSocket 서버 설정
const express = require('express')
const { WebSocket } = require('ws')
const app = express()
app.listen(8000, () => {
console.log('Server listening on port 8000')
})
const wss = new WebSocket.Server({ port: 8001 })
- 유저 접속
wss.on('connection', ws => {
users.push(ws)
broadcast(`새로운 유저 접속 [현재: ${users.length}명]`);
// ...
})
- 채팅
ws.on('message', message => {
broadcast(message)
})
- 유저 연결 해제
ws.on('close', () => {
users = users.filter(user => user !== ws)
broadcast(`유저 연결 해제 [현재: ${users.length}명]`);
})
💻 전체 코드
- index.js
const express = require('express')
const { WebSocket } = require('ws')
const app = express()
app.use(express.static('front'))
app.listen(8000, () => {
console.log('Server listening on port 8000')
})
// WebSocket 서버 인스턴스 생성
const wss = new WebSocket.Server({ port: 8001 })
// 현재 연결된 유저
let users = []
// 클라이언트가 서버에 연결
wss.on('connection', ws => {
// 새로운 유저 접속
users.push(ws)
broadcast(`새로운 유저 접속 [현재: ${users.length}명]`); // 클라이언트에게 알림
// 클라이언트가 메시지를 보냄
ws.on('message', message => {
broadcast(message)
})
// 유저 연결 종료
ws.on('close', () => {
users = users.filter(user => user !== ws)
broadcast(`유저 연결 해제 [현재: ${users.length}명]`);
})
})
const broadcast = (data) => {
users.forEach((user) => {
if (user.readyState === WebSocket.OPEN) {
user.send(data.toString())
}
})
}- index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Websocket 실습</title>
<style>
p {
margin: 0;
}
#chat {
width: 350px;
height: 200px;
background-color: rgb(226, 226, 226);
border-radius: 10px;
padding: 30px;
margin-bottom: 10px;
text-align: left;
}
#nickname {
width: 60px;
}
#message {
width: 220px;
}
</style>
</head>
<body>
<div align="center">
<h1>WebSocket 실습</h1>
<div id="chat"></div>
<input type="text" id="nickname" placeholder="닉네임">
<input type="text" id="message" placeholder="메시지를 입력하세요">
<button id="send">전송</button>
</div>
<script>
const ws = new WebSocket('ws://localhost:8001')
ws.onmessage = e => {
const chat = document.getElementById('chat');
chat.innerHTML += `<p>${event.data}</p>`;
chat.scrollTop = chat.scrollHeight;
};
document.getElementById('send').onclick = e => {
const nickname = document.getElementById('nickname');
const message = document.getElementById('message');
const fullMessage = `${nickname.value}: ${message.value}`
ws.send(fullMessage);
nickname.value = '';
message.value = '';
};
</script>
</body>
</html>
반응형
'WEB > etc' 카테고리의 다른 글
| [Chrome] 개발자 도구 활용법 (2) | 2024.06.26 |
|---|