📌WebSocket 이란?
- 서버와 클라이언트 간에 언제든 양방향 통신이 가능하도록 하는 기술이다
- 실시간으로 데이터를 주고 받아야 하는 상황에 많이 쓰인다
📌WebSocket 특징
-
실시간, 양방향 및 지속적인 연결 가능
- HTTP는 클라이언트에서 request한 경우에만 서버에서 response 가능
- 클라이언트든 서버든 언제든 데이터를 먼저 주고 받을 수 있다
-
짧은 지연 시간의 데이터 교환
- 정보를 동시에 송수신할 수 있기 때문
-
실시간 채팅이나 게임에 적합
-
Polling, Streaming 기술을 대체
-
HTML5 표준 기술로 최신 브라우저의 경우 웹소켓을 지우너함
-
미지원 브라우저도 존재한다 (이런 경우에는 WebSocket Emulation으로 대체 할 수 있다 <socket.io, SockJS>) - 호환성 문제 해결 가능
-
클라이언트와 서버 간의 연결은 둘 중 하나에 의해 종료되거나 시간 초과에 의해 닫힐 때까지 열린 상태로 유지됨
- 연결이 종료될때까지 동일한 채널을 사용하여 통신이 수행됨- 메시지는 양방향으로 교환되며, 데이터를 암호화할 수 있음
📌WebSocket 통신 사례
웹소켓 통신은 실시간 데이터 업데이트와 클라이언트 메시지를 보내는 기능이 필요할 때 주로 사용됨
- 교환 플랫폼
- 게임 어플리케이션
- 챗봇
- 푸시 알림
- 소셜 네트워크
- 채팅 애플리케이션
- IoT 애플리케이션
📌WebSocket 환경 구축
Node.js & Express.js 활용
웹소켓 통신을 주고 받을 서버와 클라이언트가 있어야 함. 이를 위해 간단하고 빠르게 서버를 구현할 수 있는 Node.js와 Express.js 프레임워크를 사용할 수 있음
- Node.js
자바스크립트 언어로 프론트엔드 뿐 아니라 백엔드 개발 환경을 구성할 수 있기 때문에 생산성이 높고 러닝 커브를 줄일 수 있음.
빠르게 개발 환경을 구성하여 개발을 해야 하는 경우 매우 유용함.
따라서 Node.js를 이용하여 쉽게 서버를 구성할 수 있는 Express.js 프레임워크를 사용함
📌WebSocket 구현
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>
<script>
const ws = new WebSocket("ws://localhost:8001")
function sendMsg(){
ws.send("Hello")
}
</script>
</head>
<body>
<h1>Websocket 실습 과제</h1>
<button onclick="sendMsg()">전송</button>
</body>
</html>index.js
const express = require("express")
const { WebSocketServer } = require("ws")
const app = express()
app.use(express.static("front"))
app.listen(8000, ()=>{
console.log(`Server listening on port 8000`)
})
const wss = new WebSocketServer({port: 8001})
wss.on("connection", ws => {
ws.on("message", data => {
console.log(`Received from client: ${data}`)
})
})** 참고
파송송의 개발 기록