ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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") 

    참고자료

    소스 코드

    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

    댓글

Designed by Tistory.