이번 챕터에서는 Socket.io라이브러리에 대해 소개합니다.
Socket.io란?
Socket.io는 WebSocket 연결을 통해 클라이언트와 서버 간에 실시간 양방향 통신 채널을 제공하는 라이브러리입니다. 채팅 응용 프로그램, 멀티플레이어 게임 및 공동 편집 도구와 같은 실시간 응용 프로그램을 개발하는 데 아주 유용한데 특히 채팅 서버 구현에 특화된 기능을 제공합니다. Room 기능을 사용하면 1:1, 1:N을 대상으로 하는 메시지전송 기능을 쉽게 구현할 수 있으며 Broad Casting을 기능을 사용하여 메시지를 사용하면 서버가 연결된 모든 클라이언트 또는 특정 클라이언트 그룹에만 메시지를 보낼 수 있습니다.
지원 플랫폼
Socket.io는 데스크톱 및 모바일 브라우저를 포함한 다양한 웹 브라우저를 지원합니다. Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge 및 Opera를 포함한 모든 최신 웹 브라우저에서 지원됩니다.
또한 클라이언트의 브라우저가 WebSocket을 지원하지 않는 경우에도 Socket.io는 자동으로 긴 폴링 또는 서버 전송 이벤트와 같은 다른 통신 프로토콜로 대체됩니다. 이를 통해 WebSocket이 지원되지 않거나 네트워크 제한이 있는 환경에서도 Socket.io가 작동할 수 있습니다.
광범위한 플랫폼에서의 실행을 지원하기 때문에 직접 WebSocket을 사용하지 않아도 다양한 환경에서의 동작이 보장됩니다.
지원언어
Socket.io는 주로 JavaScript용으로 설계되었고 일반적으로 Node.js와 함께 사용되지만 WebSocket과 함께 작동할 수 있는 다른 프로그래밍 언어 및 플랫폼도 지원합니다. 예를 들어 Java, Python, Ruby, C# 및 Swift, C++와 같은 다양한 언어에 사용할 수 있는 Socket.io 클라이언트 라이브러리가 있습니다.
https://github.com/orgs/socketio/repositories
위 링크에서 다양한 언어들로 구현된 예제들을 찾아 볼수 있습니다.
Socket.IO를 통해 간단한 데이터를 주고 에코 서버 예제를 작성해 보겠습니다.
socket_io 디렉토리를 생성하고 이동후에 npm으로 socket.io라이브러리를 설치합니다.
mkdir socket_io
cd socket_io
npm install socket.io
const http = require('http');
const { Server } = require("socket.io");
const httpServer = http.createServer();
const io = new Server(httpServer, {cors: {
origin: "*"
}
});
io.on('connection', (socket) => {
console.log('A client has connected');
socket.on('message', (message) => {
console.log(`Received message: ${message}`);
socket.emit('message', message);
});
socket.on('disconnect', () => {
console.log('A client has disconnected');
});
});
httpServer.listen(3000);<sock_io_server.js>
http.createServer()를 호출하여 HTTP서버 객체를 생성후에 Socket.IO에 연결후 3000번 포트로 HTTP서버를 기동후 클라이언트의 접속을 수신하기 위해 connection 이벤트 리스너들을 등록합니다. 이후 클라이언트가 새로 연결될 때마다 해당 리스너가 호출될 것입니다. HTTP객체 생성시 cors옵션에 주목하셔야 합니다. 이 옵션이 없으면 실제 크롬 브라우져에서 접속시 Cross Domain오류가 발생하면서 접속이 불가능합니다!!
이제 socket 객체를 사용하여 해당 클라이언트에서 발생하는 이벤트를 등록할 수 있습니다. Socket.io는 이벤트 이름을 자유롭게 정의하여 사용할 수 있습니다. 보통 식별하기 쉬운 이름을 사전 정의하고 해당 메시지 이름으로 데이터를 송수신합니다. 위 예제에서는 'message' 이벤트명으로 리스너를 등록하였습니다.
클라이언트로부터 메시지가 수신되면 'message'이벤트가 호출됩니다. 에코 서버임으로 받은 메시지를 그대로 반향합니다. 반향시에도 'message'이벤트명을 사용합니다. 'disconnect'는 socket.io내부 정의 이벤트 리스너로 클라이언트의 접속종료를 감지합니다.
이제 Socket.io 클라이언트를 작성해서 서버 접속 시험을 보도록 하겠습니다. 일전에 소개한 PostMan을 이용할 수도 있지만 직접코드를 작성하는것이 더 의미있을 것입니다.
브라우져에서 사용하려면 socket.io 클라이언트 라이브러리를 추가해야 합니다. 직접 다운로드하여 포함할수 있지만 여기서는 편의상 CDN서버의 javascript파일을 포함시켜 보겠습니다.(실제 서비스시에는 Socket.io 라이브러리를 다운로드한 후 패키지에 포함시켜 배포하시길 바랍니다.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Socket.io Example</title>
</head>
<body>
<script src="https://cdn.socket.io/4.6.0/socket.io.min.js" integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+" crossorigin="anonymous"></script>
<script>
const socket = io("http://localhost:3000");
socket.on('connect', () => {
console.log('Connected to server');
socket.emit('message', "Hi! I am a socket.io client!!");
});
socket.on('message', (message) => {
console.log(`Received message: ${message}`);
});
</script>
</body>
</html><ws_client.html>
브라우져에서 실행후 F12를 눌러 콘솔을 확인합니다. 서버로 전송한 메시지 그대로 반향되었음을 확인 할 수 있습니다.
socket.io를 이용한 메시지 통신에 대해서 알아보았습니다. 네트워크에서 발생하는 여러가지 예외적인 상황들은 Socket.io가 처리해주기 때문에 어플리케이션 개발자는 프로토콜 정의에만 신경쓰면 됩니다. 이는 생산성을 측면에서 큰 잇점을 얻을 수 있기에 가능하면 Socket.io를 적극 활용하시길 추천합니다.
읽어주셔서 감사합니다.
'Node.js' 카테고리의 다른 글
| Node.js Socket Programming (3) (0) | 2023.02.23 |
|---|---|
| Node.js Socket Programming (2) (0) | 2023.02.21 |
| Node.js Socket Programming (1) (0) | 2023.02.18 |
| Node.js로 Restful API Server 만들기(5) (1) | 2023.02.16 |
| Node.js로 Restful API Server 만들기(4) (0) | 2023.02.15 |
