-
Client가 서버의 변수 공유하기Project using node.js/Cloning Catch-Mind 2020. 12. 14. 14:20
socketIO
// server.js import socketIO from "socket.io"; import { socketController } from "./socketController"; const server = app.listen(PORT, handleListening); const io = socketIO(server); io.on("connection", (socket) => socketController(socket, io)); export default io;
socket.io는 브라우저와 서버가 실시간으로 event 기반으로 양방향 통신을 할 수 있게 하는 라이브러리다.
// socketController.js export const socketController = (socket, io) => {};
이 모듈은 Client로부터 오는 event들을 처리하는 모듈이다. 앞으로 Client가 emit 같은 것으로 데이터를 전송할 때 socket.on이나 io.on으로 데이터를 받는다.
Server의 변수를 Client에서 global하게 사용하기
// events.js const events = { newUser: "newUser", addPlayer: "addPlayer", }; export default events;
socket에 사용될 event 목록이다.
import events from "../events"; import io from "../server"; const superBroadcast = (event, data) => io.emit(event, data); export const home = (req, res) => { try { res.render("home", { pageTitle: "home", events: JSON.stringify(events) }); } catch (error) { console.log(error); } };
home을 보면 events: JSON.stringify(events)가 있다. events(key)에 JSON 형식의 events(value)를 보내면 Client는 밑에 script. {개행} window.events = !{events}로 값을 받을 수 있다.
// main.pug 일부 script. window.events = !{events} script(src="/socket.io/socket.io.js") script(src="/static/js/main.js")
참고자료
- socket.io : socket.io/docs/v3
- 노마드 코더 : nomadcoders.co/
소스 코드
github.com/zpskek/guessMind-v3/commit/74dbbe75ee74d5e06d7366e3ba560bc1ebe27b53
'Project using node.js > Cloning Catch-Mind' 카테고리의 다른 글
Chat with socketIO (0) 2020.12.15 socket.io로 로그인 알리기 (0) 2020.12.14 gulp (0) 2020.12.14 Logout (0) 2020.12.14 login on Catch Mind (0) 2020.12.13