1. SocketIO SetUp

1. 간략한 소개

• SocketIO: node.js 기반 실시간 웹 애플리케이션 지원 라이브러리

• Websocket을 이용해 실시간, 양방향, event기반의 통신을 가능케 함. Websocket은 SocketIO가 시간, 양방향, event기반의 통신을 제공하는 방법 중 하나임. 즉, Websocket이 작동하지 않더라고 SocketIO는 다른 방법을 이용해 계속 작동함.
  다음 사진은 양방향의 이해를 돕는 사진임.
  

• SocketIO는 프론트엔드와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 또는 라이브러리임.

• 실시간 기능을 Websocket으로 만들어도 되지만, SocketIO로 만드는게 더 쉽고 간편해서 이용함.

• 신뢰성도 굉장히 높음. -> 자동 재연결 지원, 연결 끊김 확인, 바이너리 지원
  
  -> 서버가 끊겨서 자동으로 재연결 시도하고 있음

• SocketIO 설명서

• SocketIO는 websocket과 다르므로 브라우저의 websocket API가 적용되지 않아, 브라우저(frontend)에 따로 설치해줘야 함.

2. 설치(backend)

npm i socket.io

3. socketIO server만들기

• server.js

import SocketIO from "socket.io";

const httpServer = http.createServer(app);//http 서버 만들기.
const io = SocketIO(httpServer);//SocketIO로 서버를 만든 것임. 이전처럼 http위에 서버를 덮어썼지만.

const handleListen = () => console.log(`Listening on http://localhost:3000, ws://localhost:3000`);
httpServer.listen(3000,handleListen);

4. user에게 제공해야 되는 url(API)

io server만들면 생기는 url
-> 유저에게 제공해줘야 하는 것임. 왜냐하면 SocketIO가 websocket의 부가기능이 아니기 때문임. websocket을 이용할 때는 browser에 Websocket API가 있어서 유저가 따로 설치를 안해도 됐지만, SocketIO != Websocket이므로 따로 유저에게 API를 제공해야함. 즉, SocketIO를 브라우저에 설치해야함.

5. 유저의 브라우저에 SocketIO API설치하는 법.(frontend)

• home.pug로 ㄱ ㄱ, 마지막 줄에 다음 코드 추가.

script(src="/socket.io/socket.io.js") 

2. SocketIO fornt-back Socket연결

• 이전의 만든 app.js전체 다 지우기.
• home.pug의 main 내에 있는 코드 다 지우기.
• server.js 이렇게 만들어주기.

import http from "http";
import SocketIO from "socket.io";
import express from "express";


const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views"); 
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (_, res) => res.render("home"));
app.get("/*", (_, res) => res.redirect("/"));

const httpServer = http.createServer(app);//http 서버 만들기.
const io = SocketIO(httpServer);//SocketIO로 서버를 만든 것임. 이전처럼 http위에 서버를 덮어썼지만.



const handleListen = () => console.log(`Listening on http://localhost:3000, ws://localhost:3000`);
httpServer.listen(3000,handleListen);

1. backend와 frontend SocketIO를 이용해 socket연결해주기.(정확히는 frontend에서 backend로 socketIO를 연결하고 backend는 이걸 리슨함.)

• server.js -> frontend의 socket의 연결을 리슨할 준비가 됨.

ioServer.on("connection",(backSocket) => {
    console.log(backSocket);
});

-> SocketIO 의 socket은 Websocket의 socket과 다름. socketIO의
socket에는 다음 그림과 같이 연결된 브라우저들(sockets)가 내장돼 있음.

• app.js, 함수 io: 자동으로 backend의 socket.io와 연결해주는 함수임. socket.io를 설치하면 저절로 사용할 수 있음. -> 대신 home.pug에서 script(src="/socket.io/socket.io.js")가 있어야 하며, script 중 맨 위에 있어야함. -> io()를 실행함으로써, socket을 연결하는 함수를 발동함.

const frontSocket = io();