01. TCP / UDP
- TCP 란?
- 서버와 클라이언트간 신뢰성 있는 데이터 송수신을 위해 만들어진 프로토콜
- 연결 지향성 프로토콜
- 데이터를 나눠서 보낼 수 있으며, 데이터를 받는 쪽에서 나눠 받은 데이터를 재조립한다.
( 누락된 데이터가 존재하면 다시 요청해서 받아와 완전한 데이터를 만든다.) - TCP로 연결이 된 경우 데이터를 양방향으로 주고 받을 수 있다.
- 데이터의 순서가 뒤바뀌는 일이 없으며 안정적이라 신뢰 가능하다.
- UDP에 비해 데이터 송수신 비용(부담)이 크다. 또한, UDP보다 전송 속도가 느리다.
- UDP 란?
- 비연결성 프로토콜
- 데이터를 보내고 확인하지 않는다. 따라서 데이터가 제대로 도착했는지 보장되지 않아 신뢰도가 비교적 낮다.
- 데이터를 순차적으로 보내도 받는 쪽에서는 다른 순서로 전달 받을 수 있다.
- 데이터를 보내기만 하고 별 다른 처리를 하지 않기 때문에 TCP에 비해 비용(부담)이 적다.
- TCP보다 전송 속다가 빠르다.
02. Socket
- Socket?
- 네트워크에서 데이터를 송수신하기 위해 반드시 거쳐야 하는 연결부
- 소켓의 종류는 많다. 대표적으로 TCP, UDP 프로토콜을 사용하는 소켓이 있다.
- TCP 소켓: 안정적인 데이터 송수신이 필요할 때
- UDP 소켓: 빠른 전송 속도의 데이터 송수신이 필요할 때
- 패킷이란?
==> 소켓을 통해 송수신하는 데이터 덩어리 하나가 한개의 패킷이다.
- 웹 소켓이란?
==> 웹 서비스를 제공하기 위해 만들어진 Socket이다.
==> 일부 브라우저들은 웹소켓을 지원하지 않기 때문에 모든 브라우저에서의 동작을 보장하지는 못한다. - socket.io?
==> JS에서 가장 많이 사용되는 웹소켓 라이브러리.
==> 웹소켓 기술은 아직 모든 브라우저에서 동작하지 못하는 어려움이 있다. 이 어려움을 극복하기 위해 socket.io는 웹소켓을 사용할 수 없는 브라우저인 경우 서버에서 데이터를 일정 간격마다 받아오는 polling기능으로 실시간 기능 구현을 가능하게 해준다.
==> 따라서 웹소켓과 socket.io는 완전히 동일하다 생각하면 안된다. 웹소켓과 비슷하게 사용이 가능하도록 구현해놓은 라이브러리라 이해하는게 좋다.
03. socket.io 사용해보기
- 프로젝트 세팅
1. 폴더 생성
2. 모듈 설치
npm init -y
npm i socket.io -S- 프로젝트 세팅
3. index.html 파일 추가
4. app.js 파일 생성
<!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);
});
});- socket 연결 여부 확인하기
1. 백엔드 연결
==> 서버를 열고 index.html 파일의 Open with Live Server를 연다.
==> 서버를 실행한 터미널에 새로운 소켓이 연결됐어요!라는 메세지가 출력되면 성공
2. 프론트엔드 연결
==> 서버를 열고 index.html 파일의 Open with Live server를 연다.
==> 개발자 도구(Ctrl + Shift + i)를 연다.
==> Network 탭을 누르고 페이지 새로고침을 한다. 이 때, Name에 빨간색이 없으면 된다. - 서버에서 데이터 보내는 코드 작성
io.on("connection", (socket) => {
socket.send("Hello!");
socket.on("message", (data) => {
console.log(data);
});
});==> app.js에 추가로 작성하면 된다.
- index.html 파일에 커스텀 이벤트 핸들링 코드 추가
socket.on("customEventName", (data) => {
console.log(data);
});==> index.html 파일 안의 script 태그 맨 아래에 넣기
- 서버의 커스텀 이벤트로 데이터 발행
socket.emit("customEventName", "this is custom event data");==> app.js에 추가하기
io.on("connection", (socket) => {
console.log("새로운 소켓이 연결됐어요!");
socket.emit("customEventName", "this is custom event data");
socket.on("message", (data) => {
console.log(data);
});
});==> 서버를 다시 접속, html 파일 확인, 브라우저의 Console에서 출력된 메시지를 확인가능
- express와 같이 사용하기
1. express 모듈 설치 (npm i express)
2. express로 앱(app)을 생성, http 모듈로 래핑하여 서버를 생성
const express = require("express");
const { createServer } = require("http");
const app = express();
const http = createServer(app);- 3. socket.io 모듈 붙이기
const express = require("express");
const { createServer } = require("http");
const app = express();
const http = createServer(app);
const io = require('socket.io')(http, {
cors: {
origin: "*",
methods: ["GET", "POST"],
},
});
http.listen(3000, () => {
console.log("서버가 요청을 받을 준비가 됐어요");
});==> app 객체는 express로 기존처럼 API을 개발하거나 프론트엔드 파일을 서빙하는 용도로 사용할 수 있고, io 객체도 기존처럼 클라이언트와 데이터를 주고 받는 용도로 사용이 가능하다.
'JavaScript Dev. > Node.js' 카테고리의 다른 글
| Layered Architecture Pattern (0) | 2023.05.19 |
|---|---|
| Access, Refresh Token?? (0) | 2023.05.08 |
| Prettier 란? (0) | 2023.05.08 |
| sequelize (0) | 2023.05.06 |
| 미들웨어(Middleware) (0) | 2023.05.01 |
