알씨타운
소켓 아이오란? 본문
소켓 아이오라는 이름만 들어도 소켓이 뭔지 알아야 할거 같은 느낌적인 느낌을...
소켓이 무엇인지 알아봅시다. 두등 탁!
서버와 유저가 데이터를 주고받기 위한 방법으론
전통적인 방법인 HTTP 통신이 있습니다.
유저가 요청을 보낼 때만 서버가 응답하는 단방향 통신
서버로부터 응답을 받은 후 바로 연결 종료
실시간 연결이 아니고, 필요한 경우에만 Server로 요청을 보내는 상황에 유용.
요청을 보내 Server의 응답을 기다리는 애플리케이션의 개발에 주로 사용.
지속적으로 데이터를 받고 싶다면 지속적으로 http 요청을 해야 합니다.
서버에 요청이 많아지므로 서버의 부담이 커집니다.
지속적으로 데이터를 가지고 오고 싶다면 전통적인 방법으로는 비효율적입니다.
그래서 나온 기술이 socket 통신 입니다.
양방향 실시간 통신이 가능합니다
클라이언트와 서버가 특정 "port"를 통해 실시간 양방향 통신을 할 수 있게 됩니다.
아지만 이 소켓 기술은 데스크톱 애플리케이션, 모바일 애플리케이션에서만 사용이 가능합니다.
웹브라우저에서도 실시간 웹서비스를 위한 시도를 많이 했는데요
ajax, polling, long polling, streaming, 웹소켓 등등이 있습니다.
그중 채팅이나 주식 같은 소통이 필요한 곳에 웹소켓이 쓰였습니다.
하지만 웹소켓은 너무 다양한 브라우저가 문제가 되었습니다.
바로 브라우저별, 버전별 웹소켓을 지원 안 하는 브라우저들이 존재했습니다.
이런 브라우저별 지원 여부에 대해 개발자가 고민하지 않고,
브라우저별 통신 가능 한 방법을 찾아 소켓을 연결해 주는 라이브러리가 생겼는데요.
그게 바로 node.js의 Socket.io 입니다
node.js 자체가 비동기식이기 때문에 속도가 빠르고
많은 클라이언트가 접속을 해도 다른 서버에 비해 빠르게 처리를 해줄 수 있습니다.
Socket IO란?
Node.js 웹소켓 라이브러리
호환이 되는 기술 자동 선택
Websock, Polling, Streaming 등 다양한 방법을 하나의 API로 추상화
브라우저의 종류에 상관없이 실시간 웹 구현 가능
Websocket을 기반으로 실시간 웹 애플리케이션을 위한 자바스크립트 라이브러리
Websocket 프로토콜이 지원되지 않는 경우, http 프로토콜로 반복적으로 서버와 통신하는 polling 방식을 이용한다.
간단한 소켓 아이오 구현을 해볼까요~?
소켓 아이오를 구현하기 위해서는 서버 측과 클라이언트 측에서 준비를 해야 합니다.
서버 측에서는
socket.io 서버를 준비해야 하고요.
socket.io 연결을 위한 js 파일을 보내줄 준비도 해야 합니다.
클라이언트 측에서는
브라우저가 준비되어 있어야 서버 측으로 요청을 보낼 수 있겠죠?
그리고 socket.io 서버에서 보내준 js 파일을 받고 소통을 할 수 있는 준비를 해야 합니다.
흐름은 아래 그림의 순서대로 진행됩니다.
서버 코드
const express = require('express');
const http = require('http');
const app = express();
//http서버 생성
const server = http.createServer(app);
server.listen(9090);
app.get('/', function(req,res){
res.sendFile(__dirname + '/index.html');
})
//socket.io 서버 생성
const io = require('socket.io')(server);
//연결 이벤트 connection
io.on('connection', (socket)=>{
console.log('클라이언트 접속');
socket.on('disconnect', ()=>{
console.log('클라이언트 종료');
})
setInterval(()=>{
socket.emit('message', '메세지');
},3000);
})
클라이언트 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket =io();
socket.on('connect', ()=>{
console.log('서버와 연결');
});
socket.on('message', function(data) {
const element = document.getElementById('content');
const br = document.createElement('br');
const content = document.createTextNode(data);
element.appendChild(content);
element.appendChild(br);
});
</script>
</head>
<body>
<h1>소켓아이오 샘플</h1>
<div id="content">
</div>
</body>
</html>
결과 화면
클라이언트에서 접속하고
서버 측에서 내용을 클라이언트에 보내주고
접속 중인 클라이언트는 서버에서 보내준 내용을 받아 뿌려주는 간단한 소켓을 구현해 보았습니다.
자세한 구현 방법은 아래를 참고해 주세요
다음에는 더 유익한 내용으로 돌아오겠습니다
여기까지 알씨타운 이였습니다. : )
'RCTOWN 리뷰 > 기술 리뷰' 카테고리의 다른 글
| 코드이그나이터에 대해! (0) | 2022.07.25 |
|---|---|
| 구글 웹 바이탈(Web Vitals) 이란? (0) | 2022.07.20 |
| Web GL이란? (0) | 2022.07.07 |
| PWA 란? (0) | 2022.07.07 |
| POLLING이란? (0) | 2022.06.23 |
