3. SocketIO 기능

대충 클라이언트의 문서에

form
      input(placeholder="room name", required, type="text")
      button Enter Room

이렇게,

 

스크립트에

const socket = io();

const $welcome = document.getElementById("welcome");
const $form = welcome.querySelector("form");


$form.addEventListener("submit", (e)=>{
  e.preventDefault();
  const $input =  $form.querySelector("input");
  socket.emit("enter_room", {payload : $input.value});
  $input.value = "";
});

이렇게 해 줬는데,

 

보면 저 form을 찾아오고,

form을 submit했을 때 이벤트를 추가 시켰다.

input:text에 있는 내용을 socket을 통해 전송한다.

근데, 이번에는 message 이벤트가 아니다.

 

이제 이벤트를 우리 마음대로 정의할 수 있다.

그냥 socket.emit("이벤트", 객체)

하고,

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

서버에서 이렇게 똑같은 이벤트로 받으면 된다.

실제로 잘 동작한다. 정말 간결해 졌다.

이제 그냥 서버랑 클라이언트 둘다 이름만 맞춰서 딱딱 동작을 정의하면 된다.

 

아 그리고,

이게 좋은점이 이제 우리가 막 문자열로 변환하고 그런 거 안해도 된다.

그냥 알아서 전송할 때 문자열로 변환해서 보내고, 

받았을 때는 알아서 객체로 변환시킨다.

 

그리고 또 놀라운 점이 하나 있는데,

  socket.emit("enter_room", {payload : $input.value}, ()=>{
    console.log("good man");
  });

이렇게 인자 맨 마지막에 콜백을 보낼 수 있다.

 

그리고 이 콜백을 서버에 보낸다고 서버에서 실행하는 게 아니라,

 

socket.on("enter_room", (msg, callback)=>{
    console.log(msg);
    callback();
})

이렇게 서버에서 저 콜백을 호출하면,

 

클라이언트 쪽에서 실행이 된다.

 

그러니까, 

클라이언트가 서버에 콜백함수를 주면, 서버는 클라이언트에게 그 콜백함수를 실행하라고 신호를 줄 수 있다.

그러면 이제 또 서버쪽에서 데이터를 가공해서 저 콜백에 인자로 넣어준다면..

 

그러니까, 클라이언트가 서버에 데이터를 전송하고, 서버가 응답받은 후 클라이언트가 해야 할 동작을 저 콜백을 넘김으로써 서버가 클라이언트쪽의 함수를 작동할 타이밍을 신호를 줌으로써 되게 깔끔해 진다.

 

 

app.js

const socket = io();

const $welcome = document.getElementById("welcome");
const $form = welcome.querySelector("form");


$form.addEventListener("submit", (e)=>{
  e.preventDefault();
  const $input =  $form.querySelector("input");
  socket.emit("enter_room", {payload : $input.value}, (cm)=>{
    console.log(cm);
  });
  $input.value = "";
});

이렇게 콜백으로 뭔가 넣어주는 값을 클라이언트 쪽에서 실행토록 하고

 

server.js

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 =>{
  socket.on("enter_room", (msg, callback)=>{
    console.log(msg);
    callback("하이요");
  })
})

server.listen(3000, handleListen);

이렇게 하면 실제로 클라이언트 쪽에 하이요 라고 찍힘.

 

 

 

인자도 오브젝트 뿐만 아니라 여러 종류, 여러 개를 보낼 수 있음.

순서만 잘 맞춰서 받으면 됨.

단, 콜백함수는 무조건 마지막이여야 함.

 

 

 

그리고 서버쪽이 다운되면, 클라이언트 쪽에서 기본값이 5초였나? 5초마다 재연결 시도함.

 

 

그리고 콜백함수 보내는게 서버쪽에서 실행되지 않아야 한다.

안 그럼 보안문제가..

 

 

 

socket.on이 메시지 받는거고,

socket.emit이 메시지 전송