2. Socket IO 설치

npm i socket.io

 

설치하고, 이제 사용해 보자.

 

기존에 사용하던 websocket 지우고, socket.io를 사용할 것이다.

 

const server = http.createServer(app);
const wss = new WebSocketServer({server});

기존에 이렇게 http 서버를 웹소켓으로 감싸면서 둘이 연결하였다.

 

socket.io도 마찬가지 이다.

 

const server = http.createServer(app);
const io = SocketIO(server);

이렇게 하고 사용하면 된다.

 

이렇게 하면, 또 하나 자동으로 만들어지는 url이 있다.

http://localhost:3000/socket.io/socket.io.js

이 url인데, 이게 뭐냐면,

클라이언트에게도 Socket.IO를 설치해 줄 필요가 있어서 그 코드를 보내주는 거다.

저거를 이제 클라이언트 app.js에서 import 해서 쓰면 된다.

import SocketIO from 'http://localhost:3000/socket.io/socket.io.js';

이런 식일듯?

Socket.IO는 외부 라이브러리 인가 보다. websocket API는 자바스크립트 공식 지원 API이고.

 

그럼 이미 서버쪽에선 설치를 했고, 클라이언트에서 그렇게 import해서 설치하면 양쪽 다 설치되는 상태가 된다.

 

 

이제는, 전처럼 한 서버에서 모두에게 message를 전하는 게 아니라, room을 만들어 room 안의 사람들 끼리 소통하게 할 것이다.

 

일단 클라이언트에게도 socketIO를 설치하게끔 하려면,

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

이렇게 그냥 문서에 cdn처럼 가져오면 된다.

 

 

 

import express, { json } from "express";
import http from "http";
import SocketIO from 'socket.io'

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

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

const server = http.createServer(app);
const io = SocketIO(server);

io.on("connection", socket =>{
  console.log(socket);
})

server.listen(3000, handleListen);

서버.

소켓 하면서 추가된 부분은

 

import SocketIO from 'socket.io'

const io = SocketIO(server);

io.on("connection", socket =>{
  console.log(socket);
})

이렇게 세 부분.

소켓 가져오고,

SocketIO로 httpServer 감싸는 건 이전과 똑같이 소켓과 http server를 결합하는 방법이고,

io.on("connection", (sc)=>)

이거는 연결되었을 때 이벤트

 

 

클라이언트 문서

doctype html
html(lang="en")
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    title Noom
  body 
    header 
      h1 Noom!
    main 
    
    script(src="/socket.io/socket.io.js")
    script(src="/public/js/app.js")

cdn처럼 만들어지는 url로 socket을 가져옴.

 

 

그럼 이제 저걸 사용하여 클라이언트 -> 서버로 소켓 연결

const socket = io();

app.js

이거 한줄임.

저렇게 하면 알아서 찾아서 서버 연결해 줌.

알아서 생기는 저 socket.io.js 저기에 뭔가 있나봄.