개발자의 개발 블로그

1. 클라이언트와 서버

클라이언트와 서버

이전의 일반적인 사이트는 단순히 클라이언트의 요청(request)과 서버의 응답(response)로 작동했다.

주소창에 URL주소를 입력하거나, 웹사이트에 들어가 뉴스 링크를 클릭하는 등의 동작으로 Request가 발생하는데 

이 Request가 서버로 전달되면 서버는 Response를 보낸다. 즉, 서버는 클라이언트의 Request가 없으면 데이터를 전송하지 않는다. Request가 클라이언트쪽에서 먼저 시작되고, 그 request에 대한 response만 전달된다.

결론 : 서버는 클라이언트의 요청에만 응답하므로 단방향성을 갖는 연결 관계라고 할 수 있다.

웹 소켓

웹의 발전하면서, 클라이언트의 요청에 응답만 하는 단방향성이 아닌 양방향성의 웹사이트가 유행하게 되었다.

즉, 클라이언트와 서버의 연결이 항상 유지된다. 연결이 유지된 상태에서 서버 또는 클라이언트상의 이벤트가 발생하면 Event listener에 의해 서버에서 클라이언트로, 또는 클라이언트에서 서버로 데이터의 전달이 이뤄진다. 

이것이 웹 소켓(WebSocket)이다. 아쉬운점은 오래된 브라우저의 경우 지원을 하지 않아 동작하지 않는 문제가 있다.

결론 : 웹소켓은 웹 서버와 웹 브라우저 간의 양방향 통신을 위해 만들어진 프로토콜이다.

socket.io

socket.io는 자바스크립트 모듈로, 양방향 통신이 가능한 웹사이트를 구축하기 위해서 node.js와 함께 사용된다.

웹소켓과 유사하나, 브라우저 간 호환이나 이전 버전 호환을 고려하여 개발된 node.js 모듈이다.

2. socket.io사용법

1) 새 폴더 생성

2) 터미널(또는 CMD)을 열고 1) 폴더 경로로 이동한다.

3) npm init --> package.json이 생성된다.

4) npm install express socket.io --save

5) 에디터(vs code 또는 atom 등등..)으로 열고 1) 경로로 Open.. 한다.

6) index.html과 server.js 파일을 생성한다.

이렇게 하면 세팅이 완료되었다.

server.js부터 작성해보자

먼저, 서버를 생성하고 접속 가능한 코드는 간단하지만 한번 해보면

var app = require('express')();

var http = require('http').Server(app);

app.get('/', function(req, res){

  res.send('<h1>Hello world</h1>');

});

http.listen(3000, function(){

  console.log('server on & port : 3000');

});

이렇게만 작성한 뒤, 터미널에서 node index.js 를 입력하면 생성한 서버가 동작하게 된다.

정상적으로 실행이 되었다면 server on & port : 3000이 뜰 것이다.

그리고 

http://localhost:3000/

으로 접속을 해보면

Hello world가 크게 보인다. 이렇게하면 node.js로 서버를 동작시키는 입문 오브 입문 예제를 완성한 것이다.

이제 socket.io를 사용해서 실시간 채팅을 만들어보려고 한다.