[Spring boot]oEmbed 사이트 만들기 /사용법 /코드 포함/

oEmbed란? 

oEmbed 공식사이트 에  따르면,

oEmbed는 다른 사이트 URL을 내장된 표현을 가능하게 하는 Format입니다.

유저가 Resource를 직접 파싱하지 않고 리소스에 대한 링크를 게시할 때 웹 사이트에서 포함된 사진 또는 비디오를 표시할 수 있습니다. 

 

 

기술 스택

• Bace-end : Spring boot  '2.6.6'
• front-end : 바닐라 js

 

기능 구현하기

 각 사이트마다  oEmebed 요청하는 주소가 다르므로 입력을 받으면 각각 다르게 처리를 하여 해당 사이트 형식으로 요청을 해야한다.  필자는 youtube와 vimeo를 구현을 했다.

 

순서

구조를 크게 나누면  client -> controller -> service-> dataHandler-> jsonHandler-> controller-> client 이다.

 

Controller -> client가 입력받은 값을  받고  적당한 처리를 하고 다시 돌려주는 역할

service ->  어느 url로 요청을 해야 하는지,  해당 url에 맞는 형식으로 바꿔주는 역할.

dataHandler ->  실제 url 요청 / 받은 데이터 유니코드 변환 

jsonHandler -> 데이터를 json 형식으로 변환

 

코드를 보면서 다시 설명을 하겠다. 코드는 youtube를 기준으로 설명을 했다.

 

 

 @GetMapping("/search")
    @ResponseBody
    @Override
    public JSONObject search(HttpServletRequest request, Model model) throws IOException {
        log.info("search controller 작동");
        String url = request.getParameter("url");
        return oembedserviceimpl.urlConnector(url);
    }

Controller  request.getParameter로 view에서 값을 받고 service.urlConnector를 리턴

 

public JSONObject urlConnector(String url) throws IOException {
        log.info("OembedServiceimpl.urlConnector");
        String youtube = "www.youtube.com";
        String instagram = "www.instagram.com";
        String twitter = "twitter.com";
        String vimeo = "vimeo.com";

try {
    if (url.contains(youtube)) return youtubeHandler(url);
    else if (url.contains(instagram)) return instagramHandler(url);
    else if (url.contains(twitter)) return twitterHandler(url);
    else if (url.contains(vimeo)) return vimeoHandler(url);
    else{ return getError();}
}catch (NullPointerException e){
    log.info("NullPointerException");
    getError();
         return null;}
    }

urlConnector   받은  url을 적절한 urlHandler로 연결

 

 @Override
    public JSONObject youtubeHandler(String url) throws IOException {
        log.info("OembedServiceimpl.youtubeHandler");
        String top="https://www.youtube.com/oembed?url=https%3A//youtube.com/watch%3Fv%3D";
        String mid = url.split("watch\\?v=")[1];
        String botm="&format=json";
        String result=top+mid+botm;

        String jsonData = getJsonObject(result);
        return  jsonhandler.youtubeJson(jsonData);
    }

youtubeHandler  youtube가 원하는 형태로 바꿔준다.

예를들어 https://www.youtube.com/watch?v=s-xEStGJviA 요청을 하면 

https://www.youtube.com/oembed?url=https%3A//youtube.com/watch%3Fv%3Ds-xEStGJviA&format=json 이렇게 변환을 하고 jsonhandler를 리턴

 

 @Override
    public JSONObject youtubeJson(String data){
        log.info("jsonHadnlerimpl.youtubeJson");
        JSONObject jsonobj = new JSONObject();
        String [] key = new String[]{"title","author_name","author_url","type","height","width","version","provider_name","provider_url","thumbnail_height","thumbnail_width","thumbnail_url","html"};
        data=data.replace("{","");
        jsonobj.put("url","youtube");
        for(int i=0; i<key.length; i++){
            if(i== key.length-1){
                int start = data.indexOf(key[i]);
                int end= data.indexOf("}");
                String value = data.substring(start+key[i].length()+3, end-1);
                jsonobj.put(key[i], value);
            }
            else {

                int start = data.indexOf(key[i]);
                int end = data.indexOf(key[i + 1]);
                String value = data.substring(start+key[i].length()+2, end);
                value = value.replace(",","");
                value= value.replace("\"","");
                jsonobj.put(key[i], value);
            }

        }

        return jsonobj;

 

jsonHandler.youtubeJson   text로 넘어온 데이터를 json형식으로 변환

 

function search(){
    const url = document.getElementById("search").value;
    console.log("search 함수 실행")
    $.ajax({
        type: 'GET',
        url: "/search",
       data:{"url":url},
        dataType:'json',
        success:function (data){resultHtml(data);
        },
        error:function(error){
            console.log(error);
        }
    })
}
function resultHtml(data) {
    if(data.url=="youtube") {
        // var html = "<div class=\"div_4\">";
        var html ="<table style='width:1000px;'>"
        html += "<div class='div_4'>"
        html += "<div> " + "<span>title</span><span style='font-weight: bold'>" + data.title + "</span></div>"
        html +=  "<div>" + "<span>type</span><span>" + data.type + "</span></div>"
        html +=  "<div>" + "<span style='background-color:#f4f4f4 '>version</span><span style='background-color:#f4f4f4 '>" + data.version + "</span></div>"
        html +=  "<div>" + "<span>provider_name</span><span>" + data.provider_name + "</span></div>"
        html +=  "<div>" + "<span style='background-color:#f4f4f4'>provider_url</span><span style='background-color:#f4f4f4'>" +"<a href="+ data.provider_url + ">"+data.provider_url+"</a></span></div>"
        html +=  "<div>" + "<span>author_name</span><span>" + data.author_name + "</span></div>"
        html+=  "<div>" + "<span style='background-color:#f4f4f4'>author_url</span><span style='background-color:#f4f4f4'>" +"<a href="+ data.author_url + ">"+data.author_url+"</a></span></div>"
        html+= "<div>" + "<span style='height:200px'>html<br/>(" + data.width + "/" + data.height + ")</span>" +
           "<span style='height:200px;'><xmp>" + data.html + "</xmp>"+ data.html + "</span></div>";
        html +=  "<div>" + "<span style='background-color:#f4f4f4'>width</span><span style='background-color:#f4f4f4'>" + data.width + "</span></div>"
        html +=  "<div>" + "<span>height</span><span>" + data.height + "</span></div>"
        html+="<div>" + "<span style='height: 500px; background-color: #f4f4f4'>thumbnail_url<br/>(" + data.thumbnail_width + "/" + data.thumbnail_height + ")</span><span style='height: 500px; background-color: #f4f4f4'><a href='" +data.thumbnail_url+"'>" + data.thumbnail_url + "</a><br/><br/><img src='"+data.thumbnail_url+"'/></span></div>";
        html +=  "<div>" + "<span>thumbnail_width</span><span>" + data.thumbnail_width + "</span></div>"
        html +=  "<div>" + "<span style='background-color:#f4f4f4 '>thumbnail_height</span><span style='background-color: #f4f4f4'>" + data.thumbnail_height + "</span></div>"
        html+="</div>"
        $("#content").empty();
        $("#content").append(html);
    }

 

ajax로 json 형식인 data를 받게 된다. success 함수안에 html태그를 넣어서 성공적으로 데이터를 받으면 화면에 출력

 

출력화면

youtube

 

vimeo

 

 

GitHub - kimsanhaa/Oembed