[Data Science / Data Analysis] 데이터 다루기 / 데이터소스 (PART 1)

Written by Geol Choi | May. 1, 2014

데이터소스의 유형에는 다음과 같은 것들이 있다:

• 오픈 데이터
• 텍스트 파일
• Excel 파일
• SQL 데이터베이스
• NoSQL 데이터베이스
• 멀티미디어
• 웹 스크랩

이들에 대해 각각 자세히 알아보도록 하자.

데이터 소스

데이터소스란, 데이터를 추출 및 저장과 관련된 모든 기술을 설명하는데 사용되는 용어이다. 가공되지 않은 데이터의 근원지는 관찰 로그(observation logs), 센서, 트랜잭션(transaction), 사용자 행동 등이다.

데이터소스와 데이터세트에 대해 언급할 것인데, 데이터세트란 데이터의 집합체를 의미하며 일반적으로 행과 열을 갖는 테이블형으로 정리된다.

      [그림 1.] 데이터세트의 예 (출처: http://commons.wikimedia.org/wiki).

[그림 1.]은 데이터세트의 한 예를 보여주는 것인데, "OUTLOOK", "TEMPERATURE", "HUMIDITY", "WINDY", "PLAY"는 열(column)을 나타낸 것이며, 행(row)은 각 열에 대한 값으로 채워져 있다.

데이터세트에 대한 공통적인 특징은 다음과 같다:

• 데이터세트 캐릭터: 일변수 또는 다중변수 등

• 인스턴스의 개수

• 영역: 비즈니스, 자동차, 보험 등

• 속성 캐릭터: 명칭형, 실수형, 범주형 등

• 속성의 개수

• 연관 태스크: 분류 또는 클러스터링 등

• 유실 값들

오픈 데이터

오픈 데이터란, 정부 3.0으로 제공되는 공공데이터와 유사하게 누군가에 의해 배포되어 어떤 목적이든 자유롭게 사용하고 가공되고 재배포가 가능한 데이터를 의미한다. 이러한 오픈 데이터를 얻을 수 있는 곳은 다음과 같다:

• 공공데이터 포털: https://www.data.go.kr/#/L21haW4=

• 기상청 공공데이터: http://web.kma.go.kr/info_open/public_data/request.jsp

• 통계청: http://kostat.go.kr/portal/korea/index.action

• 국가통계포털: http://kosis.kr

• Datahub: http://datahub.io

• 세계 보건 기구(WHO): http://www.who.int/research/en/

• THE WORLD BANK: http://data.worldbank.org/

•  NASA: http://data.nasa.gov/

• 미국 정부: http://www.data.gov/

• 기계학습 관련 데이터세트: http://bitly.com/bundles/bigmlcom/2

• 독일 뮌스터 대학교의 과학 데이터: http://data.uni-muenster.de/

• Hilary Mason Research-Quality 데이터세트: https://bitly.com/bundles/hmason/1

텍스트 파일

텍스트 파일은 데이터 저장에 있어 가장 기본적이고도 공통적인 형태이다. 대부분의 데이터는 텍스트 형태로 저장되며 다른 포맷으로도 변환이 용이하다. 텍스트 파일의 데이터 포맷 형태는 CSV(Comma-Separated Values), TSV(Tab-Separate Values), XML(eXtensible Markup Language), JSON(JavaScript Object Notation) 등이며 이에 대해서는 차차 심도있게 다루도록 하겠다.

Excel 파일

Microsoft 사의 Excel은 아마도 데이터 분석 도구들 중 가장 과소평가된 도구가 아닌가 생각된다. 사실 Excel은 데이터 분석과 관련하여 필더링, 소팅, 데이터 시각화 등 실로 다양한 기능을 제공한다. 심지어 Visual Basic을 활용하여 SQL(Structured Query Language)을 개발할 수도 있다.

Excel의 단점을 꼽자면, 유실 데이터에 대한 처리가 미흡하며 데이터 분석 방법이 어떻게 진행되었는지에 대한 기록이 없다는 점이다. 그러나, Excel은 보다 많은 장점을 지닌 도구로써 CSV, TSV, XML 등 다른 포맷으로의 변환 도구도 제공하고 있다.

SQL 데이터베이스

데이터베이스는 데이터의 조직화 된 집합체를 의미한다. SQL이란 관계형 데이터베이스 관리 시스템(Relational Database Management Systems, RDBMS)의 데이터를 관리하고 처리하기 위한 언어 모델이다. 데이터베이스 관리 시스템(DBMS)의 역할은 저장된 데이터의 통합 및 보안을 유지하고 시스템에 문제가 생겼을 때 정보를 원복시키는 것이다. SQL 언어는 데이터 정의 언어(Data Definition Language, DDL)과 데이터 처리 언어(Data Manipulation Language, DML)의 두 가지 언어로 구성된다.

데이터는 스키마(또는 데이터베이스)로 조직화되고 논리적 관계에 따라 테이블로 정리되어 쿼리를 통해 사용자가 데이터를 불러낼 수 있도록 한다.

 [그림 2.] SQL 데이터베이스 중 하나인 MySQL.

DDL은 데이터베이스 테이블을 생성, 삭제, 변경하는 언어이다. 테이블 간에 키(keys)를 통해 관계를 정의하고 데이터베이스 테이블 간에 제약조건을 실행한다. 예를 들어 SQL의 쿼리 명령은 다음과 같다:

• CREATE TABLE: 새로운 테이블을 생성한다.

• ALTER TABLE: 테이블을 변경한다.

• DROP TABLE: 테이블을 삭제한다.

DML은 다음과 같이 데이터를 처리할 수 있는 명령어를 제공한다:

• SELECT: 데이터베이스로부터 데이터를 불러온다.

• INSERT: 데이터베이스에 새로운 데이터를 저장한다.

• UPDATE: 데이터베이스의 데이터를 변경한다.

• DELETE: 데이터베이스의 데이터를 삭제한다.

NoSQL 데이터베이스

NoSQL(Not Only SQL)은 데이터의 속성이 관계형 모델을 필요로 하지 않는 데이터에 대한 데이터베이스 모델이다. NoSQL 기술은 방대한 양의 데이터를 매우 효과적으로 높은 확장성과 고성능을 취급할 수 있게 해준다.

NoSQL 데이터 저장소의 공통된 유형은 다음과 같다:

• 도큐먼트 저장: 데이터는 도큐먼트의 컬렉션으로 저장되고 정리된다. 모델 스키마는 유동적이며 각 컬렉션은 어떤 수의 필드도 처리할 수 있다. 예를 들어, MongoDB는 BSON(Binary Format of JSON)이라는 유형의 도큐먼트를 사용하고 있으며, CouchDB는 JSON 도큐먼트를 사용한다.

• 키-값 저장: 데이터는 미리 정의된 스키마 없이 키-값의 쌍으로 저장된다. 키를 통해 값을 불러온다. 예를 들어, 이러한 모델을 사용하는 DB는 Apache Cassandra, Dynamo, HBase, Amazon SimpleDB 등이 있다.

• 그래프-기반 저장: 데이터 저장 및 검색을 위한 컴퓨터 과학을 이용하여 노드, 연결선, 속성을 갖는 그래프 구조로 데이터가 저장된다. 이러한 종류의 데이터베이스들은 소셜 네트워크 관계를 표현하는데 효과적이다. 이들에 대한 예는 Neo4js, InfoGrid, Horton 등이 있다.

멀티미디어

모바일 기기의 증가로 데이터 분석의 우선순위는 멀티미디어 데이터소스로부터 의미있는 정보를 추출하는 것이 되었다. 데이터소스에는 오디오, 이미지, 비디오 등과 같이 직접적으로 인지가 가능한 것들이 있다. 이러한 데이터소의 어플리케이션들은 다음과 같다:

• 콘텐츠 기반 이미지 검색

• 콘텐츠 기반 비디오 검색

• 영화와 비디오 분류

• 안면 인식

• 음성 인식

• 오디오 및 음악 분류

웹 스크랩핑

데이터를 가장 손쉽게 얻을 수 있는 곳은 웹이다. 웹 스크랩핑은 데이터를 추출하기 위해 HTML 웹 페이지를 처리하는 어플리케이션을 일컫는다. 웹 스크랩핑 어플리케이션은 사용자가 브라우저를 통해 웹사이트를 보고 있는 것을 시뮬레이션한다. 예를 들어 다음 그림은 www.gold.org 웹사이트의 현재 금 시세(빨간색 박스)를 보여주고 있다.

[그림 3.] www.gold.org 웹사이트의 메인페이지.

대부분의 웹브라우저들은 웹페이지의 소스 보기 기능을 제공하는데, 페이지 소스 보기를 통해 현재 페이지의 소스를 보자. 웹 페이지를 보면 현재 금에 대한 요구(ASK)가는 미국 달러로 1,284.95로 되어 있다. 웹 페이지에서 이 값이 어떤 태그를 통해 표시되는지 확인해 보자.

브라우저에 열린 페이지 소스 보기에서  cmd + F(Mac OS) 또는 ctrl + F(Windows)를 눌러 "1,284.95"로 검색해 보면 다음과 같은 태그를 확인할 수 있다:

<div class="asset ask">
	<div class="asset-inner">
		<h3 class="heading">Ask</h3>
		<dl>
			<dt class="accessibility">Value</dt>
			<dd class="value">1,284.20</dd>
			<dt class="accessibility">Variation</dt>
			<dd class="variation minus">
				<span class="icon minus" role="presentation"></span>
			</dd>
		</dl>
	</div>
</div>

<h3 class="heading">Ask</h3> HTML 태그의 <dd class="value>1,284.20</dd> 태그를 웹페이지로부터 얻어올 수 있는 방법만 안다면 현재 금에 대한 요구가를 미국 달러로 얻어올 수 있다. 만약 이 값을 한국 화폐 단위인 원으로 환산하여 표시하려면 환율 페이지 정보에서 달러-원 환율 정보를 통해 변환할 수 있다.

<Web Scraping: Python Scripting>

다음 내용은 Python 버전 2.7을 기준으로 설명된 것이다. 우선 Python용 HTML 태그 파서(parser) 모듈인 BeautifulSoup을 다운받는다.

다운로드 페이지는 http://www.crummy.com/software/BeautifulSoup/이다. 또는 터미널(또는 커맨드 쉘)을 실행하여 다음과 같이 입력하면 모듈을 다운 받을 수 있다.

$ pip install BeautifulSoup

단, 위의 명령어가 인식되려면 반드시 Python의 환경변수 설정을 해야 한다.

Python 명령 쉘인 IDLE에서 다음 명령을 입력해 보자.

1.  다음과 같이 Python 모듈을 import 한다.

>>> from bs4 import BeautifulSoup
>>> from urllib2 import urlopen
>>> from time import sleep
>>> from datetime import datetime

참고로 from urllib2 import urlopen 명령은 Python 2.x 버전에서의 명령이며, 버전 3.0부터는 from urllib.request import urlopen으로 변경되었음에 유의한다.

2.  url을 정의하고 urlopen 명령을 통해 정의된 url을 오픈한다.

>>> url = "http://gold.org"
>>> req = urlopen(url)
>>> req
<addinfourl at 4378372648 whose fp = <socket._fileobject object at 0x101a4add0>>

3.  열려있는 url의 페이지를 읽는다.

>>> page = req.read()

명령 프롬프트에서 page의 내용을 확인하면 http://gold.org 웹사이트의 HTML 태그가 줄바꿈없이 나온다.

4.  BeautifulSoup 모듈의 명령을 통해 HTML 태그를 줄바꿈으로 보기좋게 정리한다.

>>> scraping = BeautifulSoup(page)

명령 프롬프트에서 scraping의 내용을 확인하면 HTML 태그들이 줄바꿈하여 깔끔하게 정돈되어 출력되는 것을 확인할 수 있을 것이다.

5.  앞서 언급한 바와 같이 금의 ASK에 대한 미국 달러 가격의 HTML 태그는 다음과 같다.

<dd class="value">1,284.20</dd>

금 시세는 실시간 변하므로 현재 1,284.20은 아닐 것이다. 어쨌든 금 시세는 HTML의 <dd> 태그의 class가 "value"로 정의되어 있다. 웹 사이트(http://gold.org)에서 확인해보면 금 시세는 "ASK", "MID", "BID" 3개로 되어 있으며, 값을 가져오고자 하는 것은 "ASK"이며, 이 값은 <dd> 태그로 검색할 때 가장 먼저 발견될 것이다.

BeautifulSoup의 findAll 명령을 통해 <dd> 태그를 검색한다.

>>> price = scraping.findAll( "dd", attrs={"class":"value"} )[0].text
>>> price
u'1,281.40'

위의 명령어를 보면 findAll의 첫번째 인자인 HTML 태그 이름과 두번째 인자인 태그의 속성(attribute)의 값이 "value"인 것을 검색한다. 검색 결과는 검색된 순서대로 array 형태로 저장되며, 따라서 첫번째로 검색된 array의 번호는 [0]이다. 마지막의 .text는 결과를 text로 변환한다는 것이다.

6.  현재의 시간을 얻어온다.

>>> datetime.now()
datetime.datetime(2014, 5, 2, 0, 29, 36, 219374)

datetime.now() 명령은 현재의 시간을 얻어오는 것이다. 출력된 값은 년/월/일/시/분/초/밀리초로 출력된다. 이것을 다음과 같이 포맷을 지정할 수 있다.

>>> sNow = datetime.now().strftime("%I:%M:%S%p")
>>> sNow
'12:32:48AM'

출력 결과는 12시 32분 48초 AM임을 나타내고 있다.

7.  현재 시간과 그에 대응하는 금값을 출력한다.

>>> print("{0}:   {1}".format(sNow, price))
12:32:48AM:   1,281.40

IDLE에서 금값을 출력하는 대신 파일로 저장할 수 있다. 다음 코드는 파일로 출력하는 전체 코드이다.

goldPrice.py

from bs4 import BeautifulSoup
try:
    # For Python 3.0 and later
    from urllib.request import urlopen
except ImportError:
    # Fall back to Python 2's urllib2
    from urllib2 import urlopen
from time import sleep
from datetime import datetime

def getGoldPrice():
     url = "http://gold.org"
     req = urlopen(url)
     page = req.read()
     scraping = BeautifulSoup(page)
     price = scraping.findAll("dd",attrs={"class":"value"})[0].text
     return price

with open("goldPrice.out","w") as f:
     for x in range(0,60):
          sNow = datetime.now().strftime("%I:%M:%S%p")
          f.write("{0}, {1} \n".format(sNow, getGoldPrice()))
          sleep(5)

goldPrice.py를 저장한 후, IDLE을 실행 후 저장된 디렉터리로 이동한다. 예를 들어, 저장된 디렉터리를 "/Users/gchoi/Documents/Python/Practice"라고 가정하자.

>>> import os
>>> os.chdir(os.path.dirname("/Users/gchoi/Documents/Python/Practice"))

이동된 디렉터리에서 goldPrice.py를 실행한다.

>>> import goldPrice.py

실행 결과의 예는 다음과 같다.

goldPrice.out

12:50:12AM, 1,283.45
12:50:19AM, 1,283.45
12:50:26AM, 1,283.45
12:50:33AM, 1,283.45
12:50:40AM, 1,283.45
12:50:47AM, 1,283.45
12:50:54AM, 1,283.45
12:51:01AM, 1,283.45
12:51:08AM, 1,283.45
12:51:15AM, 1,283.45
12:51:22AM, 1,283.45
12:51:29AM, 1,283.45
12:51:36AM, 1,283.45
12:51:43AM, 1,283.45
12:51:49AM, 1,283.45
12:51:56AM, 1,283.45
12:52:03AM, 1,283.45
12:52:10AM, 1,283.45
12:52:17AM, 1,283.45
12:52:24AM, 1,283.45
12:52:30AM, 1,283.45
12:52:37AM, 1,283.45
12:52:44AM, 1,283.45
12:52:51AM, 1,283.45
12:52:58AM, 1,283.45
12:53:05AM, 1,283.45
12:53:12AM, 1,283.45
...

<Web Scraping: JavaScript Scripting>

프로젝트 폴더 다운로드 : WebScraping.zip

JavaScript를 지원하는 서버 스크립팅 라이브러리인 Node.js를 이용하여 다음과 같은 웹 스크랩핑을 페이지를 만들어 보자. "영화 실시간 평점" 버튼을 클릭할 때 마다 실시간으로 해당 영화의 평점을 표시해 주는 웹 페이지이다.

    [그림 4.] 웹 스크랩핑 HTML 페이지.

웹 스크랩핑 방법은 다음과 같다 (각자의 시스템에 Node.js가 설치되어 있다고 가정한다).

1.  우선 프로젝트 폴더를 하나 생성한다. 이해를 돕기 위해 이름은 WebScraping으로 하겠다.

2.  필요한 Node.js 패키지를 설치한다.

필요한 Node.js 패키지는 다음과 같이 총 3개이다 (각 패키지 모듈의 역할은 링크를 참조하기 바란다):

• connect

• request

• socket.io

• cheerio

우선 package.json 파일에 모듈 의존도(module dependencies)를 다음과 같이 정의하고 프로젝트 폴더에 저장한다:

package.json

{
  "dependencies" : {
    "connect"    : "latest",
    "request"    : "latest",
    "socket.io"  : "latest",
    "cheerio"    : "latest",
  }
}

명령 쉘(Terminal 또는 도스 명령창)을 실행하고 프로젝트 디렉터리로 이동한 후 npm install 명령을 통해 모듈 패키지를 설치한다.

$ cd <YOUR_PROJECT_DIRECTORY>
$ npm install

위와 같이 명령을 입력하면 프로젝트 디렉터리 내의 node_modules 폴더에 세 개의 Node.js 모듈 패키지 설치가 진행될 것이다. 다음 그림과 같이 node_moduls 폴더 내에 해당 패키지 모듈 이름의 폴더들이 생성된 것을 확인할 수 있을 것이다.

[그림 5.] 프로젝트 폴더에 Node.js 모듈 패키지 설치 확인.

3.  "web_scraping.html"를 작성한다.

우선 Bootstrap(CSS 파운데이션)과 jQuery를 포함시켰다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB SCRAPING</title>
<meta name = "viewport" content="width=device-width, initial-scale = 1" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="/socket.io/socket.io.js"></script>

<body> 태그 부분은 다음과 같다.

<body>
	<div style="width:500px;margin:50px">
		<h1>웹 스크랩핑 <small>by CINEMA 4D</small></h1>
		<div><span>&nbsp</span></div>
	    <div class="form-group">
	    	<button id = 'button' type="button" class="btn btn-default" style="width:100%">영화 실시간 평점</button>
	    </div>
	    <div id="content">
	    <div>
  	</div>
</body>

특히, <button> 태그의 id가 'button'임에 주목한다.

HTML 페이지와 Node.js의 서버 스크립트 간 통신은 socket.io 모듈을 통해 이루어진다. 서로 전달하고 전달받을 변수는 JSON 포맷으로 교환되며 이 포맷은 title(제목), release(개봉년도), rating(평점)의 세 변수를 포함한다.

다음 코드는 HTML 내의 <script> 태그를 통해 작성되는 JavaScript이며, id = 'button'이 클릭될 때 실행되는 코드이다.

$('#button').click(function(){
	socket.emit('message',
	{
		title: "",
		release: "",
		rating: "",
		currentTime: ""
	}
	);
});

버튼이 클릭되면 socket.io의 'message'  통해 데이터가 서버 스크립트로 전달된다.

서버 스크립트에서 웹 스크랩핑을 통해 해당 영화에 대한 데이터를 얻은 후 다음 코드를 통해 서버 스크립트로부터 얻어 온 데이터를 HTML에 표시한다.

socket.on('message',function(data){
	var output = '';
	output += '<div class="alert alert-info"><strong>';
	output += '제목 : ';
	output += data.title;
	output += ' / ';
	output += '개봉년도 : ';
	output += data.release;
	output += ' / ';
	output += '평점 : ';
	output += data.rating;
	output += '<br>';
	output += '현재시간 : ';
	output += data.currentTime;
	output += '</strong>';
	output += '</div>';
	$(output).prependTo('#content');
});

"web_scraping.html" 파일의 전체는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB SCRAPING</title>
<meta name = "viewport" content="width=device-width, initial-scale = 1" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src = "http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="/socket.io/socket.io.js"></script>

<script>
	$(document).ready(function(){
		var socket = io.connect();

		socket.on('message',function(data){
			var output = '';
			output += '<div class="alert alert-info"><strong>';
			output += '제목 : ';
			output += data.title;
			output += ' / ';
			output += '개봉년도 : ';
			output += data.release;
			output += ' / ';
			output += '평점 : ';
			output += data.rating;
			output += '<br>';
			output += '현재시간 : ';
			output += data.currentTime;
			output += '</strong>';
			output += '</div>';
			$(output).prependTo('#content');
		});

		$('#button').click(function(){
			socket.emit('message',
			{
				title: "",
				release: "",
				rating: "",
				currentTime: ""
			}
			);
		});
	});
</script>
</head>

<body>
	<div style="width:500px;margin:50px">
		<h1>웹 스크랩핑 <small>by CINEMA 4D</small></h1>
		<div><span>&nbsp</span></div>
	    <div class="form-group">
	    	<button id = 'button' type="button" class="btn btn-default" style="width:100%">영화 실시간 평점</button>
	    </div>
	    <div id="content">
	    <div>
  	</div>
</body>
</html>

4.  Node.js 서버 스크립트 "server.js" 파일을 작성한다.

Node.js의 패키지 모듈에 대한 module dependencies는 다음과 같다.

// module dependencies
var fs       = require('fs'),
    http     = require('http'),
    connect  = require('connect'),
    request  = require('request'),
    cheerio  = require('cheerio'),
    socketio = require('socket.io');

웹 브라우저로부터 '/'에 대한 요청을 처리한다.

// request from web browser
app.use('/', function(req,res,next){
	if(req.url != '/favicon.ico'){
		fs.readFile(__dirname+'/web_scraping.html', function(error, data){
			res.writeHead(200, {'Content-Type':'text/html'});
			res.write(data);
			res.end();
		});
	}
});

포트번호 8008의 서버를 생성한다.

// creates server
var server = http.createServer(app);
server.listen(8008, function(){
	console.log('server listen on port 8008');
});

socket.io의 서버를 생성한다.

// creates WebSocket Server
var io = socketio.listen(server);

다음은 socket.io가 연결이 되었을 때 실행되는 코드이다.

// executed on connection
io.sockets.on('connection', function(socket) {
   // put your code here...
});

위의 코드의 함수 내에 웹 스크랩핑을 하는 코드를 작성한다. 세계의 가장 유명한 영화 데이터베이스 사이트인 IMDB의 "어메이징 스파이더맨 2" 페이지로부터 타이틀, 개봉년도, 평점을 얻어온다. 해당 페이지의 url은 다음과 같다.

var url = 'http://www.imdb.com/title/tt1872181/?ref_=nv_sr_1/';

[그림 6.] IMDB의 어메이징 스파이더맨2 페이지.

cheer.io 모듈 패키지의 cheerio.load 함수를 통해 해당 url의 페이지 정보를 가져온다.

var $ = cheerio.load(html);

어메이징 스파이더맨 2의 타이틀(title)은 다음 그림과 같이 <h1 class="header">에 포함되어 있다.

또한 평점(rating)은 <div class="star-box-giga-star">에 포함되어 있다.

cheerio.io는 HTML 태그의 class 또는 id로 엘리먼트를 찾아내며, 해당 영화의 타이틀, 개봉년도, 평점을 스크랩핑하는 코드는 다음과 같다.

$('.header').filter(function() {
    var info = $(this);
    
    title = info.children().first().text();
    release = info.children().last().children().text();

    data.title = title;
    data.release = release;
});

$('.star-box-giga-star').filter(function() {
	var info = $(this);

	rating = info.text();

	data.rating = rating;
});

server.js의 전체 코드는 다음과 같다.

// module dependencies
var fs       = require('fs'),
    http     = require('http'),
    connect  = require('connect'),
    request  = require('request'),
    cheerio  = require('cheerio'),
    socketio = require('socket.io');

var app = connect();

// request from web browser
app.use('/', function(req,res,next){
	if(req.url != '/favicon.ico'){
		fs.readFile(__dirname+'/web_scraping.html', function(error, data){
			res.writeHead(200, {'Content-Type':'text/html'});
			res.write(data);
			res.end();
		});
	}
});

// creates server
var server = http.createServer(app);
server.listen(8008, function(){
	console.log('server listen on port 8008');
});

// creates WebSocket Server
var io = socketio.listen(server);

// executed on connection
io.sockets.on('connection', function(socket) {

	// sends message to other users + stores data(username + message) into DB
	socket.on('message', function(data) {
		// defines the url of the movie we look for from http://imdb.com : The Amazaing Spider Man 2
		var url = 'http://www.imdb.com/title/tt1872181/?ref_=nv_sr_1/';

		request(url, function(error, response, html) {
			if(!error) {
				var $ = cheerio.load(html);

				var title, release, rating;
				var currentTime = new Date();

				$('.header').filter(function() {
			        var info = $(this);
			        
			        title = info.children().first().text();
	                release = info.children().last().children().text();

			        data.title = title;
	                data.release = release;
		        });

	            $('.star-box-giga-star').filter(function() {
		        	var info = $(this);

		        	rating = info.text();

		        	data.rating = rating;
		        });

		        data.currentTime = currentTime;

		        io.sockets.emit('message', data);
			}
		})
	});
});

5.  server.js 실행

명령 쉘(터미널 또는 도스명령창)을 실행하고 다음과 같이 입력하여 server.js를 실행한다.

$ node server.js
   info  - socket.io started
server listen on port 8008
   debug - served static content /socket.io.js

6.  웹 브라우저의 주소창에 "localhost:8008" 또는 "127.0.0.1:8008"을 입력하여 웹 페이지를 연다. 열린 페이지에서 "영화 실시간 평점"을 클릭하면 실시간으로 어메이징 스파이더맨 2의 평점을 표시해 준다.