Client가 서버의 변수 공유하기

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