고정 헤더 영역
상세 컨텐츠
본문
이번에 웹소켓을 프로젝트에 적용해볼겸 공부를 시작하였다 .
방법이야 다양하게 존재하였지만.. 예전방식들로부터 현재의 방식까지 장단점이 궁금해서 찾아보았다.
왜 기술이 변화했는지에대해 알고쓰는게 중요하다는걸 요즘들어 더욱 절실히 체감할때이다.
예전 웹소켓이라는게 나오기 이전에는 클라이언트의 단방향통신요청에의해 서버에서 특정요청주기마다 데이터를 주는방법들로 구현되어있었는데 그 방법들에대해 먼저 정리해보겠다..
Polling(폴링) - 특정주기마다 클라이언트가 request를 서버로 계속 날려서 response를 전달받는 방식이다.
장점
1.구현이 비교적 쉽고 , 간결하다
단점
1. 주기가 짧아지고 요청이 잦아질수록 서버 성능에 부하를 줄수있다 .
2. 서버측에서 보낼 내용이 없어도 클라이언트는 알 수 없기 때문에 계속해서 request를 통한 확인이 필요하다
3.HTTP는 단발성 통신이기 때문에 header가 매우 무거운 프로토콜 중 하나로 이 프로토콜이 계속해서 requeset를 날리면 서버의 부담이 증가한다.
Long Polling(롱 풀링) - 폴링의 단점을 해결하고자 나온 기술인데 클라이언트의 요청에 대해 응답을 보내지 않고 timeout이 날 때까지 기다리다가, 이벤트가 발생했을때 응답을 리턴하는 방식이다.
클라이언트는 pending 상태로 대기하고 있다가 응답이 오면(연결이 떨어지면) 다시 연결하는 것을 반복한다.
장점
1. 폴링 방식보다 서버의 부담이 줄어든다.
단점
1.데이터의 업데이트가 빈번해진다면 일반 폴링 방식과 큰 차이가 없다.
2.서버의 상태가 자주 변한다면 크게 의미가 없다.
web socket(웹소켓) -웹소켓은 매우 단순한 API로 구성이 되어있으며, 하나의 HTTP 접속으로 양방향 메시지를 자유롭게 주고받을 수 있다.웹소켓 통신과 비교하면 XMLHttprequest에서는 통신할 때마다 요청 헤더가 부여되기 때문에 불과 1바이트의 정보를 송신하기 위한 경우에도 필요하지 않은 쓸데없는 정보를 보낸다. 예를 들어, 채팅 입력을 한 문자마다 서버에 송신하고 싶은 경우처럼, 실시간 추구한 애플리케이션에서는 이 점이 성능 차이로 이어질 가능성이 크다.
간단하게 socket 통신을 구현해보았다.
npm 의 socket.io를 이용한 소켓통신이다.
-클라이언트-
<!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>test chat</title>
</head>
<body>
<ul></ul>
<input placeholder="message" />
<button>send</button>
<script src="index.js"></script>
</body>
</html>
const socket = io("ws://127.0.0.1:7070");
socket.on("message", (text) => {
const el = document.createElement("li");
el.innerHTML = text;
document.querySelector("ul").appendChild(el);
});
document.querySelector("button").onclick = () => {
const text = document.querySelector("input").value;
console.log("text", text);
socket.emit("message", text);
};
-서버-
const http = require("http").createServer();
const io = require("socket.io")(http, {
cors: { origin: "*" },
});
io.on("connection", (socket) => {
console.log("user comming!!");
socket.on("message", (message) => {
io.emit("message", `${socket.id.substr(0, 2)} said ${message}`);
});
});
const port = 7070;
http.listen(port, () => {
console.log(`웹소켓 서버 study ${port} on....`);
});
이렇게 브라우저 2개를 띄워서 간단하게 통신을 해보았다..
어떤식으로 돌아가는지 궁금했고 웹소켓 API를 언젠간 다룰날이 올것같아 요즘들어 공부중인데.. 꽤 어렵다 ㅋㅋ..
'expressJS' 카테고리의 다른 글
| 타입스크립트 generic이란 ? (0) | 2023.02.15 |
|---|---|
| 타입스크립트 - 유틸리티 타입 정리 (0) | 2023.01.16 |
