1. 웹 소켓
웹 소켓 : 실시간으로 양방향 데이터 전송을 위한 기술!
-
socket.io란?
-
Web Socket은 쌩자바스크립트 문법으로 개발할 수도 있지만
대부분의 상황에선 브라우저간 호환성이 좋은 socket.io 라이브러리를 설치해서 사용 -
웹 소켓 통신을 할 때, 브라우저간에 호환성을 높여주는 라이브러리
-
소켓의 역활
- 콘센트, 하나의 소켓이라고 할 수 있다. 네트워크에서 데이터를
송, 수신하기 위해 반드시 거쳐야하는 연결부
소켓의 종류
-
대표적으로 TCP, UDP 프로토콜이 있다.
-
안정적인 송, 수신은 TCP
-
빠른 전송 속도가 필요한 경우는 UDP
패킷이란
-
콘센트 배선에 흐르는 전기
-
소켓을 통해 송수신하는 데이터 덩어리 하나 === 패킷
TCP : 서버와 클라이언트가 양방향으로 데이터를 주고 받을 수 있다.
- 연결 지향성 프로토콜
- 신뢰성 있는 데이터 송수신 프로토콜
- UDP에 비해 비용 부담이 큼
- UDP에 비해 전송 속도가 느림
UDP : 보내는 쪽에서 일방적으로 데이터 전달만 가능
- 비연결성 프로토콜
- 데이터를 제대로 받았는지 확인하지 않아서 신뢰성이 낮다.
- TCP에 비해 비용 부담이 적다.
- TCP에 비해 전송 속도가 빠르다.
const { Server } = require("http");
const socketIo = require("socket.io");
const app = express();
const http = Server(app);
const io = socketIo(http);
// 소켓 연결 이벤트 핸들링
io.on("connection", (sock) => {
console.log('새로운 소켓이 연결되었습니다.')
io.emit('BUY_GOODS', {
nickname: '서버가 보내준 구매자 닉네임',
goodsId: 10, // 서버가 보내준 상품 데이터 고유 ID
goodsName: '서버가 보내준 구매자가 구매한 상품 이름',
date: '서버가 보내준 구매 일시'
})
sock.on('BUY', data => {
console.log(data)
})
sock.on('disconnect', () => {
console.log(sock.id, '해당하는 사용자가 연결이 끊어졌어요!')
})
});
http.listen(8080, () => {
console.log("서버가 요청을 받을 준비가 됐어요");
});-
const { Server } = require("http")
const socketIo = require("socket.io")
위 코드를 입력하여 모듈 두 개를 불러옴 -
express app을 http서버로 감싸기
-
http 객체를 socket.io 모듈로 넘겨서 소켓 핸들러를 생성하였다.
-
기존 app 대신해 http 객체로 서버를 열었다.
나의 생각 (정확한 지식이 아닐 수 있음)
io.on은 웹 소켓 모듈을 열어 클라이언트와 서버를 연결하였다는 뜻
'connection' 이벤트는 서버와 연결 되었을 시 발동, 콜백함수를 제공해 줌
(sock) => {} 콜백함수 안의 파라미터에 현재 접속한 소켓 사용자의 정보가 저장됨
io.emit은 소켓 데이터(서버)를 => 클라이언트로 전달 시 사용
sock.on은 클라이언트에서 소켓(서버)로 요청이 왔을 시
BUY 물품 구매시 물품 객체 정보를 data 변수에 저장시켜 서버에서 콘솔로 출력
sock에 사용자의 정보가 있으므로 sock.id로 사용자 id를 출력을 가능하고, 사용자 id를 출력함으로 더 명확하게 어떤 사용자인지 알 수 있게 됨
아 io로 전달하면 소켓이 연결되어 있는 모든 사용자에게 정보를 전달하는 것이고
sock으로 전달하면 1:1로 접속하고 있는 특정 사용자에게만 정보 전달을 하는 것인듯?
참조 블로그
