TCP ?
서버와 클라이언트 간 신뢰성 있는 데이터 송수신을 위해 만들어진 프로토콜(약속)
연결 지향성 프로토콜
데이터를 나누거나 받는 쪽에서 재조립이 가능하다.
누락된 데이터가 존재시 재요청을 통해 완전한 데이터를 만들 수 있다
TCP로 서버 / 클라이언트간 연결이 된 경우 데이터를 양방향으로 주고 받을 수 있다.
데이터의 순서가 뒤바뀌는 일 없이 안정적이라 신뢰가 가능하다.
UDP에 비해 전송속도가 느리고 데이터 송수신 비용(부담)이 크다.
UDP ?
비연결성 프로토콜
데이터를 보내고 확인하는 과정이 없어 신뢰도가 낮다.
데이터를 순차적으로 보내도 받는 쪽에서는 다른 순서로 받을 수 있다.
데이터를 보내고 별다른 처리를 하지 않아 비용(부담)이 적고 전송속도가 빠르다.
Socket ?
역할
비유하자면 벽에 있는 콘센트 구멍과 비슷하다.
네트워크의 소켓은 네트워크에서 데이터를 송수신하기 위해 반드시 거쳐야 하는 연결부.
종류
대표적으로 TCP, UDP 프로토콜을 사용하는 2가지가 있는데
일반적으로 안정적인 데이터 송수신을 위해 TCP 소켓을 사용하는 경우와
일부 패킷이 손실되어도 괜찮거나 빠른 전송 속도가 필요한 경우 UDP 소켓을 사용한다.
웹소켓 ?
실시간 웹 서비스를 제공하기 위해 만들어진 Socket
Google Docs 등 여러 협업툴이 실시간 공동 편집 기능, 웹 메신저 등에서
많이 사용되는 기술이다.
일부 브라우저들이 웹소켓을 지원하지 않기 때문에 모든 브라우저에서의 동작을
보장하지는 못한다.
socket.io ?
JavaScript를 사용하여 웹소켓을 사용한다면 가장 많이 사용되는 라이브러리
순수한 웹소켓 기술만 이용한 라이브러리가 아닌 웹소켓을 사용할 수 없는
브라우저인 경우 서버에서 데이터를 일정 간격마다 받아오는 polling 기능으로
실시간 기능 구현을 가능하게 해준다.
socket.io와 웹소켓의 차이
socket.io는 웹소켓을 포함하여 웹소켓을 사용하지 못하는 환경에서도 비슷하게
사용이 가능하도록 구현해놓은 라이브러리이기 때문에 완전히 동일하다고
볼수는 없다.
socket.io 사용법
모듈설치
npm init -y
npm i socket.io -Sindex.html 생성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<title>Hello Socket.io!</title>
</head>
<body>
<script>
const socket = io("ws://localhost:3000");
socket.on("connect", () => {
socket.send("Hello!");
});
socket.on("message", (data) => {
console.log(data);
});
</script>
</body>
</html>app.js 파일 생성
// app.js
const io = require("socket.io")(3000, {
cors: {
origin: "*",
methods: ["GET", "POST"],
},
});
io.on("connection", (socket) => {
console.log("새로운 소켓이 연결됐어요!");
socket.on("message", (data) => {
console.log(data);
});
});3) socket 연결 여부 확인하기
백엔드
node app.js크롬으로 index.html 파일을 열었을 때 터미널에 '새로운 소켓이 연결됐어요!' 라는 메세지가 출력되면 성공
프론트엔드
node app.js크롬으로 index.html 파일을 열고 개발자 도구(F12)로 들어가
Networt 탭을 누른뒤 새고고침해서 에러가 없다면 정상.
서버에서 데이터 보내는 코드 작성
io.on("connection", (socket) => {
socket.send("Hello!");
socket.on("message", (data) => {
console.log(data);
});
});'Tools > libraries' 카테고리의 다른 글
| 프로젝트 협업에 필요한 Swagger autogen설치 및 사용 가이드 (0) | 2022.10.12 |
|---|---|
| Node.js Express Swagger Page 이용하는 방법 (0) | 2022.10.12 |
