nodejs에서 웹소켓 기능 구현하기

1. 개요

• 서버 - 유저 실시간 양방향 통신 가능

2. 설치

npm install socket.io

• 소켓 라이브러리 설치

// 소켓 사용 설정
const http = require('http').createServer(app);
const {server} = require('socket.io');
const io = new Server(http);

• server.js파일에 위 설정 추가

http.listen(process.env.PORT, function () {
    console.log("db connected");
  });

• 원래 app.listen이었는데 http.listen으로 바꿔주기

3. 코드

(1) socket.ejs

• socket.ejs파일 만들기

<!-- socket.io cdn셋팅
         socket.io의 라이브러리 버전과 동일해야 함 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js"></script> 

    <div>채팅방</div>
    <button id="send">서버에 메시지 보내기</button>

    <script>
        var socket = io();
        $('#send').click(function(){
            // 서버에 소켓으로 실시간 데이터 전송하는 코드 ('이벤트명', '전달할내용')
            socket.emit('user-send','전달할내용')
        })
    </script>

• body태그에 위 코드들 집어넣으면 됨
• 서버와 소켓통신 시작하고, 데이터 전송하는 코드임

(2) server.js

// 소켓 사용 코드
app.get('/socket', function(req,res){
  res.render('socket.ejs');
})

// 누가 웹소켓 접속하면 코드 실행
io.on('connection', function(socket){
  console.log('유저 접속됨');
  // ejs파일에서 만들어준 이벤트이름을 집어넣어줌
  // 브라우저에서 메시지 보내면 코드 실행
  socket.on('user-send', function(data){
    console.log(data);
  })
})

• socket.ejs를 렌더링 함
• 브라우저에서 소켓접속하면 코드 실행해줌
• 이후 소켓으로 데이터 전송받으면 코드 실행해줌