웹 소켓 공부 - 001

Express와 Socket.io를 이용한 실시간 통신 프로젝트 연습

이번 프로젝트에서는 Express와 Socket.io를 통합하여 간단한 실시간 통신 환경을 구현했습니다. 프로젝트의 기본 구조와 각 부분에 대한 설명을 아래에 정리했습니다.

1. 프로젝트 설정

이 프로젝트에서는 Express.js를 사용하여 정적 파일을 제공하고, Socket.io를 사용하여 웹 소켓(WebSocket) 연결을 관리했습니다. 프로젝트의 기본 구조는 Express 서버가 HTML 파일을 제공하고, HTML 파일 내의 JavaScript가 Socket.io를 통해 웹 소켓 서버와 상호 작용하는 방식으로 구성됩니다.

2. 백엔드 코드: basics.js

이 파일은 Express 서버와 Socket.io 서버를 설정합니다. 코드는 다음과 같습니다

const express = require("express");
const app = express();
const socketio = require("socket.io");

app.use(express.static(__dirname + "/public"));

const expressServer = app.listen(8000);
const io = socketio(expressServer);

io.on("connection", (socket) => {
  console.log(socket.id, "has connected");
  socket.emit("messageFromServer", { data: "Welcome to the socket server!" });

  socket.on('messageFromClient', (data) => {
    console.log("Data", data);
  });
});

• 설명:
  • Express를 사용하여 /public 디렉터리의 정적 파일을 제공했습니다.
  • Socket.io는 Express 서버에서 실시간 통신을 처리하는 데 사용됩니다.
  • 클라이언트가 연결되면 connection 이벤트가 발생하며, 연결 로그를 남기고 클라이언트에게 환영 메시지를 전송합니다.
  • 서버는 클라이언트로부터 messageFromClient 이벤트로 전송된 메시지를 수신하고, 데이터를 로그에 기록합니다.

이 코드는 기본적인 Socket.io 서버를 설정하여 연결된 클라이언트와 실시간으로 통신할 수 있는 환경을 구성합니다.

3. 프론트엔드 코드: basics.html

이 HTML 파일은 클라이언트 측에서 Socket.io 스크립트를 통해 웹 소켓 서버와 상호 작용합니다. 아래 코드를 참고하세요

<script src="socket.io/socket.io.js"></script>

<script>
  const socket = io("http://localhost:8000");
  console.log(socket);

  socket.on("connect", () => {
    console.log(socket.id);

    socket.on("messageFromServer", (data) => {
      console.log(data);
    });

    socket.emit('messageFromClient', {data: "Hello, from the browser!"});
  });
</script>

• 설명:
  • Socket.io 클라이언트가 스크립트 태그를 통해 로드됩니다.
  • 클라이언트가 웹 소켓 서버에 연결되면 클라이언트의 소켓 ID를 로그에 기록하고, 서버로부터 메시지를 수신합니다.
  • 연결이 완료되면 클라이언트는 서버에 messageFromClient 메시지를 전송합니다.

4. 프로젝트 실행

프로젝트를 실행하려면
1. 서버를 시작하려면 node basics.js 명령어를 실행합니다.
2. 브라우저에서 basics.html 파일을 엽니다.
3. 서버와 클라이언트에서 실시간으로 메시지를 주고 받는 것을 콘솔 로그를 통해 확인 할 수 있습니다.