Colin's Blog
소켓 통신을 위한 자바스크립트 미들웨어 사용법

소개

소켓 통신은 서버와 클라이언트 간 실시간으로 데이터를 주고받을 수 있는 방법 중 하나입니다. 자바스크립트 미들웨어는 소켓 통신을 쉽게 구현하도록 도와주는 도구입니다. 본 포스트에서는 자바스크립트를 사용하여 소켓 통신을 위한 미들웨어의 사용법에 대해 알아보겠습니다.

필요한 도구

자바스크립트 소켓 통신을 위해서는 다음과 같은 도구들이 필요합니다:

설치 및 설정

  1. Node.js 설치: Node.js 공식 웹사이트에서 Node.js를 다운로드 받고 설치합니다.
  2. 프로젝트 생성: 원하는 위치에 새로운 디렉토리를 생성하고, 해당 디렉토리로 이동합니다.
  3. 패키지 초기화: 명령 프롬프트나 터미널에서 npm init 명령을 실행하여 프로젝트의 패키지를 초기화합니다. 이 과정에서 package.json 파일이 생성됩니다.
  4. Socket.io 설치: 명령 프롬프트나 터미널에서 npm install socket.io 명령을 실행하여 Socket.io를 설치합니다.
  5. 서버 파일 작성: 프로젝트 디렉토리 안에 server.js 파일을 생성하고 아래의 코드를 작성합니다.
const app = require('http').createServer();
const io = require('socket.io')(app);

// 클라이언트가 연결되었을 때 실행되는 이벤트 핸들러
io.on('connection', (socket) => {
    console.log('클라이언트가 연결되었습니다.');

    // 클라이언트로부터 메시지를 받으면 실행되는 이벤트 핸들러
    socket.on('message', (data) => {
        console.log('받은 메시지:', data);
        // 받은 메시지를 다른 클라이언트들에게 전송
        io.emit('message', data);
    });

    // 클라이언트와의 연결이 끊어졌을 때 실행되는 이벤트 핸들러
    socket.on('disconnect', () => {
        console.log('클라이언트와의 연결이 끊어졌습니다.');
    });
});

// 서버를 3000번 포트로 시작
app.listen(3000, () => {
    console.log('서버가 시작되었습니다.');
});
  1. 클라이언트 파일 작성: 프로젝트 디렉토리 안에 index.html 파일을 생성하고 아래의 코드를 작성합니다.
<!DOCTYPE html>
<html>
<head>
    <title>Socket.io Example</title>
    <script src="https://cdn.socket.io/socket.io-3.1.3.min.js"></script>
    <script>
        // 소켓 연결
        const socket = io.connect('http://localhost:3000');

        // 서버로 메시지 보내기
        function sendMessage() {
            const message = document.getElementById('message').value;
            socket.emit('message', message);
            document.getElementById('message').value = '';
        }

        // 서버로부터 메시지 받기
        socket.on('message', (data) => {
            const messageBox = document.getElementById('messageBox');
            messageBox.innerHTML += '</br>받은 메시지: ' + data;
        });
    </script>
</head>
<body>
    <h1>Socket.io Example</h1>
    <div id="messageBox"></div>
    <input type="text" id="message" placeholder="메시지 입력">
    <button onclick="sendMessage()">전송</button>
</body>
</html>

실행

  1. 명령 프롬프트나 터미널에서 node server.js 명령을 실행하여 서버를 시작합니다.
  2. 웹 브라우저에서 http://localhost:3000 주소로 접속합니다.
  3. 메시지를 입력하고 전송 버튼을 클릭하면 다른 클라이언트들로부터 받은 메시지를 확인할 수 있습니다.
  4. 소켓 통신이 정상적으로 작동하는지 확인합니다.

마무리

위의 예제를 통해 자바스크립트를 사용하여 소켓 통신을 위한 미들웨어인 Socket.io의 사용법에 대해 알아보았습니다. Socket.io를 사용하여 간편하게 실시간 웹 어플리케이션을 개발할 수 있습니다. 자세한 설정 및 API에 대해서는 Socket.io 공식 문서를 참고하시기 바랍니다.

참고 자료

© 2018 Colin. All rights reserved.