[JS] Express + Socket.io

sjy0917·2022년 4월 28일
0

공부한것들

목록 보기
31/32
post-thumbnail

초기설정

    1. yarn을통해 프로젝트를 초기 설정
      yarn init
    1. express설치
      yarn add express
import express from "express";
import http from "http";

const app = express();
app.set("port", 3001);

// 서버를 http로 등록한다.
const server = http.createServer(app);

server.listen(app.get("port"), () => {
  console.log(`🏇${app.get("port")}에서 서버가 실행중입니다!🚴  `);
});

Socket 설정

Socket.ioCors를 설치한다.

  • Socket.io는 양방향 통신 기능을 구현하기 위한 핵심 라이브러리
  • CORSwhiteList에 있는 URL만 통신을 허락하기 위해서 설치.

Server

import express from "express";
import http from "http";
import cors from "cors";
import { Server } from "socket.io";
import socket from "./socket.js";

const app = express();
// 포트세팅
app.set("port", 3001);
// cors미들웨어 선언
app.use(
  cors({
    origin: "http://127.0.0.1:5500",
    credentials: true,
  })
);

// 서버를 http로 등록한다.
const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: "http://127.0.0.1:5500",
    credentials: true,
  },
});

socket(io);

server.listen(app.get("port"), () => {
  console.log(`🏇${app.get("port")}에서 서버가 실행중입니다!🚴🏻  `);
});

Server Socket

export default function socket(socketIo) {
  socketIo.on("connection", (socket) => {
    console.log("소켓이 연결됐습니다.");

    const room = "room1";

    socket.on("disconnect", (reason) => {
      console.log(`연결이 해제됐습니다. ${reason}`);
    });

    // Message 추가
    socket.on("messageS", (message) => {
      console.dir(message);
      console.log("message가 도착했습니다.");

      if (message.recepient === "ALL") {
        socketIo.sockets.emit("messageC", message);
      }
    });
  });
}

클라이언트에서 사용하는 socket.io.js
node_modules/socket.io client/dist/socket.io.js
를 가져와 사용했다.

Client

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="socket.io.js"></script>
    <script>
      let socket;

      $(function () {
        $("#connectButton").bind("click", (event) => {
          println("버튼이 클릭됨.");
          connectToServer();
        });

        $("#sendButton").bind("click", (event) => {
          const sender = $("#senderInput").val();
          const output = { sender: sender, recepient: "ALL", data: "Hello to All" };
          console.log(`서버로 가는 데이터 : ${JSON.stringify(output)}`);

          if (socket == undefined) {
            alert("서버에 연결되지 않앗습니다.");
            return;
          }

          socket.emit("messageS", output);
        });
      });

      const connectToServer = () => {
        let url = "http://localhost:3001";
        let options = { forceNew: true };
        socket = io(url, options);

        socket.on("connect", () => {
          println(`웹소켓이 연결됐습니다.  ${url}`);
          console.log(`socket.id : ${socket.id}`);

          socket.on("messageC", (message) => {
            console.log(JSON.stringify(message));
            println(`<p> 수신 메시지 : ${message.sender}, ${message.recepient}, ${message.data} </p>`);
          });
        });

        socket.on("disconnect", () => {
          println(`웹소켓 연결 해제.  ${url}`);
          console.log(`socket.id : ${socket.id}`);
        });
      };

      const println = (data) => {
        console.log(data);
        $("#result").append(`<p> ${data} </p>`);
      };
    </script>
  </head>
  <body>
    <div>
      <input type="button" id="connectButton" value="연결하기" />
    </div>
    <div>
      <div><span>보내는사람 아이디 :</span> <input type="text" id="senderInput" value="test01" /></div>
      <br />
      <input type="button" id="sendButton" value="전송" />
    </div>
    <hr />
    <p>결과 :</p>
    <div id="result"></div>
  </body>
</html>

0개의 댓글