[새싹X코딩온] 풀스택 웹 개발자 과정 | Socket

Socket

1. 소켓(Socket)

• 서버와 클라이언트를 연결해주는 도구로써 인터페이스 역할을 하는 것
  - 서버 : 클라이언트 소켓의 연결을 요청을 대기하고, 연결 요청이 오면 클라이언트 소켓을 생성해 통신을 가능하게 하는것
  - 클라이언트 : 실제로 데이터 송수신이 일어나는 곳
• 소켓은 프로토콜, IP 주소, 포트 넘버로 정의

WebSocket

2. WebSocket이란?

양방향 소통을 위한 프로토콜

• 빠르게 작동하며 통신할 때 아주 적은 데이터를 이용한다
• 이벤트를 단순히 듣고, 보내는 것만 가능

Socket.io

3. Socket.io

• 클라이언트와 서버 간의 짧은 지연시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리
• 특징 : 1) 이벤트 기반 2) 자동 재연결

3-1. 기본 이벤트

• connection 클라이언트가 서버에 연결되었을 때 발생

• disconnect 클라이언트가 연결을 해제했을 때 발생

• disconnecting 클라이언트가 연결을 해제하려는 경우에 발생

• error 연결 중에 오류가 발생했을 때 발생

3-2. 사용자 지정 이벤트

• 이벤트를 보내는 쪽

// emit(전송할 이벤트 이름 [, 전송할 데이터])
// 전송할 데이터의 형태는 자유롭게 (문자열, 숫자, 객체)
socket.emit("hello", {
	message: "안녕하세요"
})

• 이벤트를 받는 쪽

// on을 이용해, 클라이언트에서 socket을 이용해서 보내준 데이터를
// 받을 이벤트를 등록함.
socket.on("hello", (res) => {
	// res : socket을 이용해 보내준 데이터
	console.log(res);
	socket.emit("bye", { message: "안녕히 가세요~" });
});

Socket.io 실습

4-1. Socket.io 불러오기 (server)

• npm install socket.io cors

const http = require("http");
const express = require("express");
const app = express();
// 소켓이 http모듈로 생성된 서버에서만 동작
const server = http.createServer(app);
const PORT = 8000;

// cors 이슈 : 다른 서버에서 보내는 요청을 제한함
const cors = require("cors");
app.use(cors());

const io = require("socket.io")(server, {
  cors: {
    origin: "http://localhost:3000",
  },
});


server.listen(PORT, function () {
  console.log(`Sever Open: ${PORT}`);
});

4-2. Socket.io 불러오기 (client)

• React 기준
• npm install socket.io-client

import io from "socket.io-client";

const socket = io.connect("http://localhost:8000", { autoConnect: false });

* 이 문서는 SeSAC X 코딩온 풀스택 웹 개발자 과정 강의자료 내용을 일부 포함하고 있습니다. *