[Node.js] Socket.io를 이용하여 실시간 통신하기

저번에 채팅기능을 구현할 SSE방식을 사용했는데

서버->유저 방향으로만 실시간 통신이 된다.

 

socket.io를 이용하여 양방향 통신을 해보자.

 

---

우선 socket.io를 설치한다.

npm install socket.io

설치를 끝냈다면

const http = require('http').createServer(app);
const {Server} = require("socket.io");
const io = new Server(http);

server.js파일에 위와같은 코드를 추가하고,

 

app.listen으로 작성했던 코드를 http.listen으로 수정한다.

(express라이브러리를 이용하던 것을 http로 수정)

 

---

그리고 실시간 통신을 할 HTML파일을 하나 만든다.

여기서는 socket.ejs파일을 만들었다.

 

이 HTML파일에도 socket.io를 설치해주어야 정상적으로 통신을 할 수 있는데,

 

https://cdnjs.com/libraries/socket.io

socket.io - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

이곳에 접속해

내가 설치한 socket.io 버전과 같은 버전의 cdn 설치코드를 찾고,

HTML파일의 스크립트코드로 추가해 넣는다.

 

 

 

    <div>채팅방</div>

    <button id="send">서버에 메세지 보내기</button>
  
 
	<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js" integrity="sha512-xbQU0+iHqhVt7VIXi6vBJKPh3IQBF5B84sSHdjKiSccyX/1ZI7Vnkt2/8y8uruj63/DVmCxfUNohPNruthTEQA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        var socket = io();

        $('#send').click(function(){
            //서버에세 메시지 보내기. .emit(작명,메세지)
            socket.emit('user-send','안녕하세요');
        })
    </script>

그리고 ejs파일에서 script태그를 열고,

var socket = io();를 작성하면 소켓채널을 열 수 있고,

데이터를 보내는 것은 

socket.emit()메소드를 이용하면 된다.

socket.emit의 인자로는 (데이터명,데이터)를 넣으면 된다.

 

 

이제 sever.js로 돌아가서

io.on('connection',function(socket){
    //웹소켓에 접속하면 실행하는 코드
    console.log('접속됨');

    //수신하는 코드. .on('데이터이름')
    socket.on('user-send',function(data){
        console.log(data);
    })
})

위와 같은 코드를 작성하면 데이터를 수신할 수 있다.