Node.js

Socket.IO 사용하기

Socket.IO 설치

npm i socket.io@2

 

Socket.IO 연결 파일 만들기

socket.js

const SocketIO = require('socket.io');  //소켓 모듈 연결

module.exports = (server) => {
	const io = SocketIO(server, { path: '/socket.io' }); //SocketIO객체의 두번째 인수로 서버에 관한 여러가지 옵션을 줄 수 있다. 여기서는 클라이언트가 접속할 경로인 path 옵션만 사용했다.
    
	io.on('connnection', (socket) => { // 웹소켓 연결 시
    	const req = socket.request;
        const ip = req.headers['x-forwarded-for'] || req.connection.remoteAddress; // 클라이언트의 IP를 알아내는 유명한 방법이라고 함.
        console.log('새로운 클라이언트 접속!', ip, socket.id, req.ip); // socket.id는 소켓 고유의 아이디이다.
        socket.on('disconnect', () => { // 연결 종료 시
        	console.log('클라이언트 접속 해제', ip, socket.id);
            clearInterval(socket.interval); // close 이벤트에서 setInterval을 clearInterval로 정리함. 이 부분이 없다면 메모리 누수가 발생한다.
        });
        socket.on('error', (error) => { // 에러 시
        	console.error(error);
        });
        socket.on('reply', (data) => { // 클라이언트로부터 메시지 수신 시
        	console.log(data);
        });
        socket.interval = setInterval(() => { // 3초마다 클라이언트로 메시지 전송
        	socket.emit('news', 'Hello Socket.IO');
        }, 3000);
    });
});

'disconnect','error', 'reply' 는 클라이언트에서 데이터를 보낼 때 사용하는 이벤트명이다.

 

 

 

클라이언트 소켓 코드

views/index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <title> GIF 채팅방 </title>
</head>
<body>
	<script src="/socket.io/socket.io.js"></script> //Socket.IO에서 클라이언트로 제공하는 스크립트이며, 실제 파일이 아니다. 이 스크립트를 통해 서버와 유사한 API로 웹 소켓 통신이 가능하다.
    <script>
    	const socket = io.connect('http://localhost:8005', {
        	path: '/socket.io',
        }); //스크립트가 제공하는 io 객체에 서버 주소를 적어 연결한다. 옵션의 path 부분이 서버의 path 옵션과 일치해야 통신이 가능하다.
        
        
        socket.on('news', function (data) { //서버에서 보내는 news 이벤트를 받는다.
        	console.log(data);
            socket.emit('reply', 'Hello Node.JS'); //이벤트가 발생하면 emit 메서드로 다시 서버에 답장한다. 서버의 reply 이벤트 리스너로 답장이 간다.
            });
        </script>
</body>
</html>

 

 

서버를 실행하고 개발자 도구 네트워크 탭에 보면 폴링 연결(xhr)이 있다.

Socket.IO는 먼저 폴링 방식으로 서버와 연결한다. 그래서 코드에서 ws 프로토콜이 아니라 HTTP 프로토콜을 사용한 것.

폴링 연결 후, 웹 소켓을 사용할 수 있다면 웹 소켓으로 업그레이드 한다.

웹 소켓을 지원하지 않는 브라우저는 폴링 방식으로, 웹 소켓을 지원하는 브라우저는 웹 소켓 방식으로 사용 가능하다.

<script>
    	Const socket = io.connect('http://localhost:8005', {
        	path: '/socket.io',
            transports: ['websocket']
        });
        </script>

웹 소켓만 사용하고 싶다면, 클라이언트 부분에 위와 같은 옵션을 준다.

 

'Node.js' 카테고리의 다른 글

auth-middleware 테스트 코드 작성  (0) 2021.08.07
socket 관련 모듈 설치  (0) 2021.07.30
Socket.IO 사용하기  (0) 2021.07.29
Sequelize bulkCreate  (0) 2021.07.27
Node 자동 재실행  (0) 2021.07.26
jest를 활용한 테스트 코드 작성  (0) 2021.07.20