[39] Socket.io

minjeong·2024년 2월 21일

ON emit socket.io 백엔드 부트캠프 코딩교육 코딩온 포스코

코딩온x포스코 - 나의 공부기록

목록 보기

43/55

Socket.io

클라이언트와 서버 간의 짧은 지연 시간, 양방향 및 이벤트 기반 통신을 실시간으로 가능하게 하는 라이브러리

기본 이벤트

connection : 클라이언트가 서버에 연결되었을 때 발생, 클라이언트와의 상호작용을 초기화하거나 초기 데이터를 전달할 수 있음
disconnect : 클라이언트가 연결을 해제했을 때 발생
disconnecting : 클라이언트가 연결을 해제하려는 경우에 발생
error : 연결 중에 오류가 발생했을 때 발생

사용자 지정 이벤트

Socket.io 불러오기

터미널에 입력해서 설치한다.

npm install socket.io

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

➡️ <head>에 추가한다.
➡️ Socket.IO 라이브러리를 웹 페이지에 포함시켜 해당 웹 페이지에서 Socket.IO를 사용할 수 있도록 한다. 이를 통해 클라이언트와 서버 간의 실시간 통신을 구현할 수 있다.

실습 코드

우선, 시작하기 전 server setting 하면된다. 터미널에서 작성하면 된다.

npm init -y
npm i express ejs socket.io

server.js

//가장 기본으로 들어가는 세팅
const http = require('http');
const express = require('express');
const socketIo = require('socket.io');
const app = express();
const PORT = 8000; 

//http 서버
const server = http.createServer(app);
//socket 서버전체
const io = socketIo(server);
//미들웨어
app.set('view engine', 'ejs');

//라우터
app.get('/', (req, res) => {
    res.render('client');
});

//접속하는 브라우저
//프론트에서 생성하는 이벤트를 받는 곳
io.on('connection', (socket) => {
    //프론트에서 보낼때 이벤트명과 백엔드의 이벤트명이랑 동일하게 해야한다.
    socket.on('open_message', (arg, arg2, cb) => {
        console.log('arg', arg, arg2);
        cb(arg, arg2); //콜백 함수를 이용해서 프론트에서 받자마자 다시 프론트로 보낼 수 있다.
    });
    socket.on('form_message', (arg) => {
        console.log(arg); //프론트에서 form_message으로 된 이벤트를 보냈기에 받은 것이다.
        socket.emit('backend_message', arg); //백으로 받은 것을 emit을 이용해 프론트로 보냄.
    });
});

server.listen(PORT, () => {
    //http를 이용해서 express와 socket을 연결하는거니까 server. 으로 시작
    console.log(`http://localhost:${PORT}`);
});

client.ejs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="/socket.io/socket.io.js"></script>
        <title>Document</title>
    </head>
    <body>
        <h1>Socket.io</h1>
        <ul></ul>
        <form id="chat">
            <input type="text" id="user" placeholder="사용자명" />
            <input type="text" id="message" placeholder="채팅내용" /><br />
            <button>채팅</button>
        </form>
    </body>
    <script>
        const socket = io(); //io() 함수는 클라이언트 소켓을 생성하고, 서버와의 연결을 설정함
        const chatForm = document.querySelector('#chat');
        const ul = document.querySelector('ul');
        //이벤트 생성(보내는 곳)
        //접속 되었을때 보여지는 이벤트
        socket.emit('open_message', '접속되었습니다.', '행복한 일만!', (res, res2) => {
            console.log(res, res2); //응답
            // 접속되었습니다 : arg로 들어가는 값(백엔드) 
            // open_message 옆에 글들은 계속해서 추가할 수 있다.
            //백에서도 개수만 동일하게만 하면 된다.
        });
        //이벤트명이 backend_message를 백에서 받음
        //프론트 화면에 보여지는 이벤트
        socket.on('backend_message', (arg) => {
            const li = document.createElement('li');
            li.textContent = `${arg.user}: ${arg.message}`;
            ul.appendChild(li);
        });
        //폼 이벤트
        chatForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const user = chatForm.querySelector('#user'); //chatForm에 해당되는 걸 가져오기 때문에 document라고 하지않고 chatForm이라 한다.
            const msg = chatForm.querySelector('#message');
            //form으로 쓴게 이벤트로 서버에 보내서 백으로 보내진다.
            socket.emit('form_message', { user: user.value, message: msg.value });
            msg.value = '';
        });
    </script>
</html>