추상화: 코드를 이해하기 쉽게 원래 있던 코드를 분리하면서 새로운 함수를 만들어 나가는 과정
//소켓 연결 이벤트
io.on("connection", (sock) => {
const { watchBuying, watchByeBye } = initSocket(sock);
watchBuying();
watchByeBye();
});
function initSocket(sock) {
console.log("새로운 소켓이 연결되었습니다.");
//sock.on을 대신해서, 어떤 역할을 하는지 추상화 한 함수
function watchEvent(eventName, func) {
sock.on(eventName, func);
}
function sendMessageAll(eventName, data) {
io.emit(eventName, data);
}
return {
watchBuying: () => {
watchEvent("BUY", (data) => {
console.log(data);
const emitDate = {
nickname: data.nickname,
goodsId: data.goodsId,
goodsName: data.goodsName,
date: new Date().toISOString(),
//string으로 date타입을 보여줄수있도록
};
//io.emit하면 소켓이 연결된 모든 사용자들에게 이벤트로 데이터가 전달됨
//sock.emit하면 로그인으로 연결된 사용자 1명에게만 전달
//추상화해서 sendMessageAll로
sendMessageAll("BUY_GOODS", emitDate);
});
},
watchByeBye: () => {
watchEvent("disconnect", () => {
console.log(sock.id, "해당하는 사용자가 연결이 끊어졌어요!");
});
},
};
}
- 소켓 관련된 코드만 따로 정리해둘 socket.js 파일 만들기
- 서버를 여는 코드만 따로 뺴서 server.js 파일을 생성
=> 추상화를 통해 소켓 관련 코드의 가독성을 높이고, app.js 파일에 있던 소켓과 관련된 모든 코드를 socket.js 파일로 분리해서 app.js 파일의 가독성을 높일 수 있게 됨.
//socket.js
const socketIo = require("socket.io");
const http = require("./app");
const io = socketIo(http);
io.on("connection", (sock) => {
const {watchBuying, watchByeBye} = initSocket(sock);
watchBuying();
watchByeBye();
});
function initSocket(sock) {
console.log("새로운 소켓이 연결됐어요!");
// 특정 이벤트가 전달됐는지 감지할 때 사용될 함수
function watchEvent(event, func) {
sock.on(event, func);
}
// 연결된 모든 클라이언트에 데이터를 보낼때 사용될 함수
function notifyEveryone(event, func) {
io.emit(event, func);
}
return {
watchBuying: () => {
watchEvent("BUY", (data) => {
const emitData = {
nickname: data.nickname,
goodsId: data.goodsId,
goodsName: data.goodsName,
date: new Date().toISOString(),
}
notifyEveryone("BUY_GOODS", emitData);
});
},
watchByeBye: () => {
watchEvent("disconnect", () => {
console.log(sock.id, "연결이 끊어졌어요!");
});
},
}
}
//server.js
const http = require("./app");
require("./socket"); // 이렇게 불러오기만 해도 소켓에 연결이 됩니다.
http.listen(8080, () => {
console.log("서버가 요청을 받을 준비가 됐어요");
});