소켓이란?
-
네트워크상에서 동작하는 프로그램 간 통신의 종착점 즉, 프로그램이 네트워크에서 데이터를 통신할 수 있도록 연결해주는 연결부라고 할 수 있다.
-
아주 일반적으로는 안정적인 데이터 송수신을 위해 TCP 소켓을 사용하는 경우가 대부분이지만, 일부 패킷이 손실되어도 괜찮거나 빠른 전송 속도가 필요한 경우 UDP 소켓을 사용하기도 한다.
웹 소켓이란?
-
실시간 웹 서비스를 제공하기 위해 만들어진 Socket
-
최근 Google Docs 등 여러 협업툴이 실시간 공동 편집 기능, 웹 메신저 등에서 많이 사용되는 기술로 최근 점점 많이 사용하는 기술이지만 일부 브라우저들이 웹소켓을 지원하지 않기 때문에 모든 브라우저에서의 동작을 보장하지는 못한다.
socket.io
-
자바스크립트를 사용해 웹소켓을 사용하길 원한다면 가장 많이 사용되는 라이브러리. 하지만 순수한 웹소켓 기술만 이용한건 아니다.
위에서 말했듯 모든 브라우저들이 웹소켓을 지원하는게 아니기 때문에 실시간 기능 구현에 어려움이 생긴다. -
이 어려움을 해결하기 위해 socket.io는 웹소켓을 사용할 수 없는 브라우저인 경우 서버에서 데이터를 일정 간격마다 받아오는 polling 기능으로 실시간 기능 구현을 가능케 해준다.
엄밀히 따지면 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"],
},
});//프론트 예시
<!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>스파르타 강의는 쇼핑몰에서 누군가가 상품을 구매하면 왼쪽하단에 알림창이 나타나게 구현해놨다.
이걸 조금만 손보면 원하는 실시간 알림설정을 할 수 있지 않을까??
https://medium.com/@su_bak/term-socket%EC%9D%B4%EB%9E%80-7ca7963617ff
