실시간 서비스를 제공함에 있어서 http방식은 한계가 있습니다.
이를 해결하기 위해 socket을 사용합니다.
socket은 실시간 분석, 메시지, 채팅 등 실시간으로 데이터를 교환해야 하는 서비스에 사용합니다.
실시간 웹 서비스를 만들기 위해 웹소켓들이 나왔는데 다양한 웹 브라우저가 있어 호환에 문제가 많습니다.
socket.io을 사용하면 호환되는 기술을 자동으로 선택할 수 있습니다.
오늘은 nodejs express에서 socket.io를 사용하는 방법에 대해 알아보도록 하겠습니다.
우선 패키지를 설치해주셔야 합니다.
다음 코드를 사용해 주세요.
'npm install socket.io'
사용방법에 대해 알아보도록 하겠습니다.
http,socket.io서버와 http, socket.io 클라이언트가 필요합니다.
http 서버는 express로 만들어진 서버라고 생각하시면 됩니다.
http서버를 만들고 socketio서버를 만들고 http서버와 연결합니다.
socket.io 클라이언트는 http서버로 요청을 보내 socketio를 포함한 html 코드를 받습니다.
웹브라우저는 socketio를 실행합니다.(socketio클라이언트 준비)
socketio서버와 통신이 시작됩니다.
socketio클라이언트가 하는 것들에 대해 정화하게 알아보도록 하겠습니다.
http서버에 socketio 초기화 html을 요청하고
서버로부터 받은 html을 로딩합니다. 여기에는 socketio를 포함한 코드가 있겠지요.
그러면 socketio 클라이언트가 초기화되고 socketio서버와 연결됩니다.
클라이언트 이벤트에는 connet, error, disconnect 등이 있습니다.
특이한 것은 서버와 연결이 끊어지면 자동 재접속을 시도하는 이벤트가 있다는 것입니다.
서버는 클라이언트의 요청에 대해 html 코드를 제공해주는 기능을 수행한다.
정리하면 서버는 http,socket.io서버가 필요하고, 이 서버는 socket코드를 포함한 html 코드를 브라우저에 보내고
브라우저는 socket코드를 실행함으로써 socket서버와 실시간 데이터 교환을 준비합니다.
서두가 길었네요.
역시 예시를 통해 이해하는 것이 확실하죠.
express서버에 socket.io 서버를 넣으면 됩니다.
클라이언트에서 접속이 오게 되면 connection이벤트가 발생하게 됩니다.
var express = require('express')
var http = require('http');
const { Socket } = require('socket.io');
//http서버 만드는 부분입니다.
var app=express();
var server = http.Server(app);
server.listen(8080);
app.get('/',(req,res)=>{
res.sendFile(__dirname+'/socketio.html')
})
//socket.io서버를 만드는 부분입니다.
var io = require('socket.io')(server);
io.on('connection',(Socket)=>{
console.log("클라이언트 접속")
})
서버가 응답으로 보내줄 socket.io 관련 코드를 포함한 '/socketio.html' 파일 코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- socketio 라이브러리 로딩하는 cdn -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
<script>
// 클라이언트를 만드는 코드
// 접속시도을 합니다.
var socket = io();
//연결되면 connect이벤트가 발생한다.
socket.on('connect',function(arg){
console.log('server connect success')
});
</script>
</body>
</html>접속이 제대로 된 것을 확인할 수 있습니다.
'기타 > Express.js' 카테고리의 다른 글
| socket io namespace room(1) (2) | 2020.12.13 |
|---|---|
| express socket.io 기본 사용법(2) (0) | 2020.12.11 |
| express 오류 처리 미들웨어 (0) | 2020.11.26 |
| express 미들웨어 만들기, body-parser, cors 사용하기 (0) | 2020.11.26 |
