-
socket.io 원리Programming/NodeJS 2020. 3. 31. 01:40반응형
socket.io란
-
socket.io는 웹소켓을 이용해 클라이언트에 실시간으로 데이터를 전송한다.
-
socket.io는 Socket을 구현한것으로 WebSocket 개발을 쉽게 하기 위한 것이다.
-
클라이언트에서 Event Listener로 새로운 정보를 받아 정보를 업데이트할 수 있다.
socket.io 활용되는 곳
-
실시간 분석, 메시지, 채팅
-
바이너리 스트리밍, 문서 공동작업 등
socket.io 사용
yarn add socket.io// home.pug <!DOCTYPE html> html(lang="ko") head meta(charset="UTF-8") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="styles/styles.css") title Socket body script(src="/socket.io/socket.io.js") //프론트엔드에서도 socket 연결 script(src="/js/main.js")// server.js import { join } from 'path'; import express from 'express'; import socketIO from 'socket.io'; import morgan from 'morgan'; import socketController from './socketController'; const PORT = 4000; const app = express(); app.set('view engine', 'pug'); app.use(morgan('dev')); app.set('views', join(__dirname, 'views')); app.use(express.static(join(__dirname, 'static'))); app.get('/', (req, res) => res.render('home')); const handleListening = () => console.log(`Server running: http://localhost:${PORT}`); const server = app.listen(PORT, handleListening); // io라는 변수를 만든 이유는 io가 모든 이벤트를 알아야하기 때문이다. const io = socketIO(server); // server에 socket.io 연결 , 클라이언트가 연결되면 io.on("connection" ) 이벤트가 발생 io.on('connection', socket => console.log("연결"));기존에 생성한 server를 변수에 담아 저장하고 io 변수에 socketIO(server)를 사용하여 express 서버 위에 socket.io 서버를 올린다.
위와 같이 작업하면 같은 포트에서 작업을 하게 되는데 이유는 traffic이 다르기 때문이다.
원래는 같은 포트에서 2개의 서버를 동시에 동작하게 할 수 없지만 websocket과 HTTP는 같은 서버에 존재할 수 있다.
SocketIO는 서버와 클라이언트가 동시에 될 수 있다.
WebSocket Client 와 WebSocket Server가 있고, SocketIO는 이 두 역할을 할 수 있다.
SocketIO로 서버를 프로그래밍할 수 있고, 클라이언트도 프로그래밍 할 수 있다는 걸 이해해야한다.
SocketIO는 백엔드와 프런트엔드가 서로 대화할 수 있게 해줌
위의 코드에서 io라는 변수를 만든 이유는 io가 모든 이벤트를 알아야하기 때문이다.
HTTP는 GET/POST/PUT 등이 있고 HTTP는 라우터(경로)를 가지고 있지만 Socket은 연갈만이 존재(이벤트만 가지고 있음)
위에 두 개의 JS코드와 HTML코드를 입력했다면 아래와 같이 io 변수를 가지고 있음
그리고 아래와 같이 입력했을 경우 console창에 socket.io가 연결됐다는 log창이 뜸
브라우저 console 창에서 io('/") 입력해서 socket 연결 
서버 console 에서 socket 연결 됐다는 로그창 여러개의 브라우저창을 켜놓고 콘솔창에 io("/")를 치면 여러개의 socket이 연결되는 것을 볼 수 있다.
("/")의 의미는 같은 서버일 경우를 가리킴, 다른 서버라면 /가 아닌 다른 서버에 접속해야함
만약 두 개의 브라우저에 아래와 같이 io("/") 입력하여 socket과 연결시켜놓고 서버를 죽인다음에 다시 실행 했을 경우 console에 두 개의 socket이 연결되는 것을 볼 수 있는데 이유는 Socket은 항상 서버의 이벤트를 듣고 있기 때문이다.
만약 서버가 죽으면 socket은 계속 서버에 접속하려고함, 서버가 다시 살아나면 다시 연결
브라우저1, 브라우저2 에서 socket 연결 
서버를 죽였다가 다시 연결했을 때 다시 두 개의 브라우저가 socket에 연결 이후에는 Socket.io를 이용해서 실시간 채팅을 만들어보도록 하겠습니다.
'Programming > NodeJS' 카테고리의 다른 글
socket.io 이용한 채팅 (0) 2020.04.02 passport-local, passport-local-mongoose 회원가입, 로그인 (0) 2020.03.21 Node.Js에서 AWS S3버킷에 파일 업로드 및 삭제 (0) 2020.03.19 Node.js Express 라우팅, 라우트 메소드 (GET,POST 요청 처리하기) (0) 2020.02.27 Passport 구글 로그인 인증 (oauth20) - nodeJS (0) 2020.02.26 -