# 오픈 그래프
오픈그래프란 임의의 인터넷 주소의 미리보기 화면을 구성할 수 있게 만들어주는 기능입니다.
오픈그래프 프로토콜은 Meta(구 페이스북)에서 처음 만들어졌고, 기능의 유용성과 간편한 구현으로 인해 많은 플랫폼에서 사용하게 되었습니다. 사용하는 태그로는 og:url
(링크될 URL), og:type
(웹/앱에 대한 타입 지정), og:title
(문서의 제목), og:description
(문서의 설명), og:image
(문서의 썸네일 이미지)가 있습니다.
작동 원리로는 채팅방에 URL을 붙여 넣는 순간 vchatcloud서버에서 입력한 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해준 데이터를 받아서 보여주는 것입니다.
vchatcloud에서는 위와 같이 오픈 그래프 기능을 제공하고 있으며 해당 라이브러리를 통해 간편하게 구현할 수 있습니다.
# 라이브러리 사용 방법
해당 라이브러리는 따로 API KEY를 발급받거나 CMS에서 설정해야하는 사전 설정이 없습니다.
아래 내용을 읽고 진행하시면 됩니다.
- Pettern Matcher 를 통한 url 유효성 검사
메시지의 내용에 url 이 포함이 되어있는지 검사를 먼저 실행합니다.
아래는 대표적인 도메인으로 끝이 났는지 판별하는 코드입니다.
이후 도메인에 http 가 없을경우 붙여주는 작업을 하여 targetUrl
을 작성합니다.
Pattern pattern = Pattern.compile("([^/ ])+(\\.)(kr|com|net|io|co|org|biz|info|name|asia|tel|shop|ai|be)(:([^\\\\/]*))?([^#\\s\\?])(\\\\?([^#\\s]*))(#(\\\\w*))?");
Matcher matcher = pattern.matcher(message.getMessage());
if (matcher.find()) {
String targetUrl = matcher.group();
if (!targetUrl.startsWith("http")) {
targetUrl = "http://" + targetUrl;
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
- 서버로 오픈 그래프 요청하기
찾은 도메인 주소를 서버로 전송하여 데이터를 수집합니다. 리턴되어진 데이터를 화면에 노출 시켜줍니다.
VChatCloudApi.getInstance().getOepnGraph(targetUrl, new ApiCallback() {
@Override
public void onFailure(VChatCloudException e) {
changedHandler.sendMessage(changedHandler.obtainMessage());
}
@Override
public void onSuccess(JSONObject jsonObject) {
if (jsonObject.get("data") != null) {
JSONObject data = (JSONObject) jsonObject.get("data");
if (data != null && data.get("image") != null && data.get("title") != null && data.get("description") != null ) {
message.setOepnGraph(data);
}
}
changedHandler.sendMessage(changedHandler.obtainMessage());
scrollHandler.sendMessage(scrollHandler.obtainMessage());
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
JSONObject 리턴 데이터
값 | 서브 | 식별자 | 설명 |
---|---|---|---|
result_msg | - | String | 실패 시 사유 |
result_cd | - | int | 성공 (1), 실패(0) |
data | ▽ | Object | 서버에서 받은 OpenGraph정보 - 없을경우 빈값으로 대체 |
image | String | 노출 이미지 | |
host | String | 호스트 주소 | |
description | String | 상세 설명 | |
ogUrl | String | og태그 url링크 주소 | |
title | String | 타이틀 제목 | |
url | String | 이동 url링크 주소 |