728x90
1. 들어가기 전에..
※ 소켓이란 무엇인가..??
소켓 : 네트워크에서 데이터를 송수신하기 위해 반드시 거쳐야하는 연결부!
- TCP : 서버와 클라이언트 간 신뢰성 있는 데이터 송수신을 위해 만들어진 프로토콜 / 연결지향성 / 데이터를 양방향으로 주고 받을 수 있다 / 안정적 / 비용이 많이 든다 / 전송속도가 느리다
- UDP : 비연결성 프로토콜 / 신뢰도가 낮다 / TCP에 비해 비용이 적고 전송 속도가 빠르다
패킷 : 소켓을 통해 송수신하는 데이터 덩어리 하나가 한개의 패킷이라고 부른다
2. Socket.io
: 자바스크립트를 이용해서 웹소켓을 사용할 때 가장 많이 사용되는 라이브러리 ( but 웹소켓과 완전히 동일하지는 않다! )
2-1. socket.io 사용법
#1 아무 빈 폴더를 만든다.
#2 모듈을 설치해준다.
npm init -y
npm i socket.io -S
#3 index.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>
#4 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);
});
});
#5 socket 연결 여부 확인하기
- 백엔드
: 터미널창에 node app.js를 치고 서버를 킨다 -> 크롬으로 index.html 파일을 끌어서 연다 -> 터미널 창에 "새로운 소켓이 연결됐어요!"라는 메세지가 출력되면 성공!
-프론트엔드
: 똑같이 서버를 킨다 -> 크롬으로 index.html 파일을 끌어서 연다. -> 개발자 도구를 연다 -> Network 탭을 누른다 -> 페이지를 새로고침한다 -> 아래 사진과 같이 빨간줄이 없으면 성공!
See you next time :)
728x90
'프로그래밍 > Node.js' 카테고리의 다른 글
| [11] 객체 지향 프로그래밍 (절차지향 vs 객체지향) (0) | 2023.07.12 |
|---|---|
| [10] JWT 토큰인증에 대해서.. ( 쿠키 / 세션 / 토큰 ) - Access Token, Refresh Token (0) | 2023.07.10 |
| [7] node.js - CRUD 개발환경 구축하기 [+ mySQL] (0) | 2023.07.04 |
| [6] Node.js PalPalGram 프로젝트 (node.js 8조) (0) | 2023.06.26 |
| [5] 늘 헷갈리는 GET과 POST의 차이.. (0) | 2023.06.22 |
