SocketIO(1)

app.js

• socket.emit("이름", "메세지(object)", callback함수)
• 세번째 인자 함수를 서버가 backend에서 호출하지만 실행은 front-end에서 실행됨
  socket.emit("이름", 인자 갯수 제한 없이 사용 가능 ...,)
  인자로 함수 사용해야 되는 경우는 함수는 마지막 인자로 고정

const socket = io();

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

function handleRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  socket.emit("enter_room", { payload: input.value }, () => {
    console.log("server에서 실행하는 함수!!");
  });
  input.value = "";
}

form.addEventListener("submit", handleRoomSubmit);

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);
const wsServer = SocketIO(httpServer);

wsServer.on("connection", (socket) => {
  socket.on("enter_room", (msg, done) => {
    console.log(msg);
    setTimeout(() => {
      done();
    }, 2000);
  });
});

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

함수전달

function backendDone(msg) {
  console.log(`The backend says: `, msg);
}
function handleRoomSubmit(event) {
  event.preventDefault();
  const input = form.querySelector("input");
  socket.emit("enter_room", { payload: input.value }, backendDone);
  input.value = "";
}

wsServer.on("connection", (socket) => {
  socket.on("enter_room", (msg, done) => {
    console.log(msg);
    setTimeout(() => {
      done("hello from the backend");
    }, 2000);
  });
});