[220317] socket.io 설치 & 세팅

socket.io 설치

$ npm install socket.io

 

 

 

 

socket.io 의 구조

Namespace

    ㄴ Room

        ㄴ Socket

socket.io는 이런 구조로 이루어져있다.

Namespace에 있는 Socket끼리 통신하는 개념이고, default-NameSpace을 따로 지정해주지 않으면 '/'가 된다.

 

 

 

 

 

socket.io 세팅

원래 html 파일 header에 이 코드를 작성해야하는데, 나는 모든 정적파일을 public에서 찾도록 설정을 해놓은 상태다.

빼내려면 public 폴더를 빠져나가서 찾는 코드를 작성해야하는데 구찮아.....

<script src="/socket.io/socket.io.js"></script>
<script>
  let socket = io();
</script>

 

그래서 CDN 코드를 사용하기로 함. (이게 ES6 모듈이라고한다. 몰랐음)

( socket.io 공식 홈페이지 : https://socket.io/docs/v4/client-installation/ )

<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>

import {io} from "https://cdn.socket.io/4.5.0/socket.io.esm.min.js"

 

가져오는 또 다른 방법

( socket.io 공식 홈페이지 : https://socket.io/docs/v3/server-initialization/#ES-modules )

import { io } from "socket.io-client";

const socket = io("https://example.com", {
  path: "/my-custom-path/"
});

 

원래 io()라고 선언하는 메소드라서 ()안에 origin(출처)이 들어가야한단다.

뭔가 싶어서 검색하다가 다음 코드를 찾아냄.

socket.io 모듈 객체 선언 위에 cors에 대해 모두(*)허용해주는 코드.

let io = require('socket.io')(http, { cors: { origin: "*" } });

 

origin을 정해주고 싶다면 다음 코드를 사용하자.

( socket.io 공식 홈페이지 : https://socket.io/docs/v3/handling-cors/ )

const io = require("socket.io")(httpServer, {
  cors: {
    origin: "http://localhost:8080",
    methods: ["GET", "POST"]
  }
});

httpServer.listen(3000);

 

 

 

 

 

최종적 세팅 형태

// back/server.js
const express = require("express");
const app = express();
const http = require("http");
const cors = require("cors");

const corsOpt = {
  credentials: true,
  origin: true,
};

app.use(cors(corsOpt));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static("public"));

const server = http.createServer(app);
const io = require("socket.io")(server, {
  cors: { origin: "*" },
});

const router = require("./routes/index.js");
require("./chatSocket.js")(io);

app.use("/api", router);

server.listen(4001)

 

 

 

 

뜯어보기

먼저 http 서버를 먼저 생성한 상태다.

그 위에 만든 socket.io 서버 io를 생성하고, 모든 상태의 서버에서 접속할 수 있도록 origin(출처)를 *로 지정했다.

// back/server.js
const server = http.createServer(app);
const io = require("socket.io")(server, {
  cors: { origin: "*" },
});

 

 

따로 만들어놓은 socket.io 세팅값을 가져와서 socket.io 서버 io와 같이 연결해주었다.

최종적으로 모든것이 연결되어있는 server로 4001포트를 가동한다.

// back/server.js
const router = require("./routes/index.js");
require("./chatSocket.js")(io);

server.listen(4001)

 

 

서로 메세지를 주고받은 기록들을 화면에 보여주기위해서 front에 파일을 생성했다.

require을 쓰면 사용할 수 없다고 에러가 뜨기 때문에 ES6형태로 socket.io를 가져왔다.

socket.io로 연결되기 위한 기본 서버를 http://localhost:4001/chat으로 정해주었다.

앞으로 저 url을 통해서 socket.io통신이 가능하다.

// front/public/chat.js
import { io } from "https://cdn.socket.io/4.5.0/socket.io.esm.min.js";

let socket;
socket = io("http://localhost:4001/chat");