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); }); });