230109 항해99 64일차 [Node express & React] socket-io 연결하기

// server.js
import { createServer } from "http";
import { Server } from "socket.io";
import express from "express";
import path from "path";
import { fileURLToPath } from "url";
import views from "express-react-views";

const __filename = fileURLToPath(import.meta.url);

const __dirname = path.dirname(__filename);

const app = express();

app.set("view engine", "jsx");
app.engine("jsx", views.createEngine());
app.set("views", __dirname + "/src");
app.use("/public", express.static(__dirname + "/public"));
app.get("/", (req, res) => res.render("App"));

const server = createServer(app);
const io = new Server(server, {
  cors: {
    origin: "*",
  },
});

const handleListen = () => console.log("Listening on 8080");

io.on("connection", (socket) => {
  console.log(socket);
  socket.on("yay", (msg) => console.log(msg));
});

server.listen(8080, handleListen);

// src/App.jsx
import React from "react";
import io from "socket.io-client";

const socket = io("http://localhost:8080", {
  cors: {
    origin: "*",
  },
});

function App() {
  const sendServer = () => {
    socket.emit("yay", { payload: "yay" });
  };

  return <button onClick={sendServer}>방 만들기</button>;
}

export default App;

• 노마드코더 zoom clone 강의를 들으면서 직접 만들어보고 싶었는데, 강의에서는 Vanilla JS랑 express를 사용하고 있어서 그대로 적용할 수가 없었다.
• express-react-views를 사용하면 서버 포트에서도 클라이언트 페이지를 볼 수 있어서 좋은 것 같다.
• 이런 식으로 이제 db도 연결하고 하면 작은 풀스택 프로젝트를 만들 수 있지 않을까,,?!?!