[Express / jQuery] RSS 서비스 활용 (node.js로 xml 파싱하기)

RSS 서비스 (Rich Site Summary)

rss는 블로그나 뉴스 , 기상청처럼 컴텐츠 업데이트가 자주 일어나는 웹사이트에서 업데이트된 정보를 쉽게 사용자에게 전달하기 위해서 xml 기반의 데이터 배포 형식입니다.

 

이번 실습에서는 JTBC의 RSS를 이용하겠습니다.

https://news.jtbc.joins.com/Etc/RssService.aspx

 

이중에서 골라서 rss를 이용하시면 됩니다.

스포츠 rss를 가지고 실습해 보겠습니다.

http://fs.jtbc.joins.com/RSS/sports.xml

 주의할것은 위에 스크린샷처럼 https 말고 http로 바꿔야합니다.

---

그 rss 주소로 가보면 xml파일을 어떤 태그를 중심으로 파싱해야하는지 알 수 있습니다.

title , link의 정보를 파싱해서 이용해봅시다.

---

app.js 작성하기

express 기본 모듈 설정하는것은 express, nodejs 웹서버 구축하기

를 보고 오시면 됩니다.

app.js

// express
var express = require('express');
var http = require('http');
// path
var path = require('path');

var static = require('serve-static');

// express
var app = express();


app.set('port' , process.env.PORT || 8080);
app.set('host' , '127.0.0.1');

app.use(static(__dirname)) 


var router = express.Router();

router.route('/').get(function(req,res){
    res.redirect('/source/jquery.html');
});
router.route('/routetest').get(function(req,res){
    res.redirect('http://google.co.kr');
});

router.route("/rss").get(function (req, res) {
    console.log("rss data requested");
    var feed = "http://fs.jtbc.joins.com/RSS/sports.xml";
    http.get(feed, function (httpres) {
        var rss_res = "";
        httpres.on("data", function (chunk) {
            rss_res += chunk;
        });
        httpres.on("end", function () {
            res.send(rss_res);
            console.log("rss response completed");
            res.end();
        });
    });
});

app.use('/',router);


http.createServer(app).listen(app.get('port'),app.get('host'),()=>{
    console.log('Express server running at '+app.get('port')+":"+app.get('host'));
});

 

---

app.js 라우터 부분의 코드

요청과 응답의 구조

jQuery가 /rss으로 get 요청을 하면, 그것을 저희가 구축한 백엔드서버가 라우터(router)를 통해 요청을 받습니다.

요청을 받은 app.js 서버는 지정한 rss주소(JTBC 서버)로 http get 요청을 하고, 콜백함수의 첫번째 인자로는 rss서버의 응답(httpres)을 받습니다.

 

httpres.on("data" , function()) 함수는 응답으로 데이터를 받으면 실행되는 함수로 그 데이터는 chunk 인자로 받습니다.

그 chunk 데이터를 rss_res 문자열에 저장합니다.

httpres.on("end" , function()) 함수는 응답이 종료됐을때 함수로, jtbc 서버의 응답(httpres)이 종료되면, 다시 html로 rss_res 문자열을 응답으로 보냅니다.

router.route("/rss").get(function (req, res) {
    console.log("rss data requested");
    var feed = "http://fs.jtbc.joins.com/RSS/sports.xml";
    http.get(feed, function (httpres) {
        var rss_res = "";
        httpres.on("data", function (chunk) {
            rss_res += chunk;
        });
        httpres.on("end", function () {
            res.send(rss_res);
            console.log("rss response completed");
            res.end();
        });
    });
});

---

jQuery.html , js 부분

jQuery.js에서 브라우저를 로딩하면 바로 ajax요청을 보내도록 작성합니다.

ajax함수은 요청을 반환하므로 req변수에 저장을 하고, dataType를 xml로 설정해 파싱하도록 합니다.

//브라우저 로딩하자마자 실행
$(document).ready(function () {
	// /rss를 app.js 라우터로 요청
    var req = $.ajax({
        url: "/rss",
        dataType: "xml" //xml로 자동 파싱
    });

    req.done(function(data) {
        
    });

    req.fail(function (jqXHR, textStatus){
        alert("failed: " + textStatus);
    });
    
});

---

html에서 news div 태그에 최신 5개의 뉴스의 링크를 리스트 형식으로 출력하는 코드를 작성하겠습니다.

<div class="lab">
            <div id="news">
            </div>
</div>

 

---

req.done 함수

xml은 태그들로 이루어진 형식이기 때문에(html 처럼) 파싱된 데이터는 find함수를 이용해서 해당 태그를 찾을 수 있습니다.

item 태그를 find 하면 item 태그들이 여러개가 저장됩니다(items).

json 처럼 js 오브젝트가 아니기 때문에 배열 인덱스로 접근은 못하고, each 함수를 이용해서 각각 접근 할 수 있습니다.

req.done(function(data) {
        var items = $(data).find("item");
        if(items.length > 0){
            items = items.slice(0,5);
            var uTag = $("<ul />");
            items.each(function() {
                var item = $(this);
                var link = item.find("link").text();
                var title = item.find("title").text()
                var aTag = $("<a />")
                .attr({
                    "href" : link,
                    "target" : "_blank"
                })
                .text(title);
                var liTag = $("<li />")
                .append(aTag);
                uTag.append(liTag);
            });
            $("#news").html(uTag);
        }
    });

---

실행 결과