Socket.io

leehangeul·2021년 3월 15일
1

JavaScript

목록 보기
31/32
post-thumbnail

Web Socket 란?

사람들은 상호작용하는 웹 서비스를 위해 Long Polling, Stream 등 다양한 방법을 사용했다. 하지만 이러한 방식은 브라우저가 HTTP Request 요청을 보내고 웹 서버가 이 요청에 대한 HTTP Response 응답을 보내는 단방향 메세지 교환이였다. 그렇기 때문에 상호작용하는 웹 페이즈를 복잡하고 어려운 코드로 구현해야 했다.

사용자들은 더 편리하고 자유로운 양방향 메시지 송수신을 원했고 필요로했다. 그래서 HTML5 표준안의 일부로 Web Socket API가 등장했다.

사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하고 Web Socket API를 통해 서버로 메세지를 보내고, 요청 없이 응답을 받아오는 것이 가능하다. Web Socket API은 별도의 포트를 사용하지 않고 HTTP와 같은 80번 포트를 사용하고 있는데, 이 때문에 클라이언트인 웹 브라우저 뿐만 아니라 웹 서버도 기능을 지원하고 있어야 한다고한다.

socket.io 란?

Socket.ioJavaScript를 이용하여 브라우저 종류에 상관없이 실시간 웹을 구현할 수 있도록 한 기술이다.
WebSocket, FlashSocket, AJAX Long Polling, AJAX Multi part Streaming, IFrame, JSONP Polling을 하나의 API로 추상화한 것이다. 즉 브라우저와 웹 서버의 종류와 버전을 파악하여 가장 적합한 기술을 선택하여 사용하는 방식이다.

Socket.io 웹 서버에 설치

npm install socket.io

위의 명령어로 터미널을 통해 Socket.io를 설치한다.

그리고 HTML에서 사용하기 위해

<script src="/socket.io/socket.io.js"></script>

CSS에 링크를 걸듯
head 태그 안에 작성해준다.

Socket.io 예시

express app.js

const express = require('express');
const app = express();
const http = require('http').Server(app); 
const io = require('socket.io')(http);    

// 연결되었을 때
io.on('connection', function(socket){ 
  	console.log('connected');  
	
    // 연결이 끊겼을 때
	socket.on('disconnect', function(){ 
	  console.log('disconnect');
	});
});
profile
풀스택 개발자가 되고싶은 코린이 이한글

3개의 댓글

comment-user-thumbnail
2021년 3월 15일

꿀팁 감사합니다! 저도 이거 하고싶었는데 ㅠ

답글 달기
comment-user-thumbnail
2021년 3월 15일

대박 나중에 실시간 통신할 때 펭도리님의 글 참고하겠습니다

답글 달기
comment-user-thumbnail
2021년 3월 15일

잘 보고 갑니다~~~펭돌 짱!

답글 달기