오픈 그래프

오픈그래프란 임의의 인터넷 주소의 미리보기 화면을 구성할 수 있게 만들어주는 기능입니다.
오픈그래프 프로토콜은 Meta(구 페이스북)에서 처음 만들어졌고, 기능의 유용성과 간편한 구현으로 인해 많은 플랫폼에서 사용하게 되었습니다. 사용하는 태그로는 og:url(링크될 URL), og:type(웹/앱에 대한 타입 지정), og:title(문서의 제목), og:description(문서의 설명), og:image(문서의 썸네일 이미지)가 있습니다.
작동 원리로는 채팅방에 URL을 붙여 넣는 순간 vchatcloud서버에서 입력한 URL을 먼저 방문해서 웹페이지에 있는 오픈그래프 데이터를 수집해 미리 보기 형식으로 구성해준 데이터를 받아서 보여주는 것입니다.

vchatcloud에서는 위와 같이 오픈 그래프 기능을 제공하고 있으며 해당 라이브러리를 통해 간편하게 구현할 수 있습니다.

라이브러리 사용 방법

해당 라이브러리는 따로 API KEY를 발급받거나 CMS에서 설정해야하는 사전 설정이 없습니다.
아래 내용을 읽고 진행하시면 됩니다.

---

1. Overview의 내용을 따라합니다.

2. script.js에 아래의 Methods를 참조하여 적절한 코드를 작성합니다.

const openGraph = new OpenGraph();

// 새 메시지를 받았을 때
channel.onNotifyMessage = function(event) {
  openGraph.getOpenGraph(event.message, (html, url, data) => {
    // 데이터를 가져왔을 때 사용할 callback을 작성하세요.
    // * 사용자가 입력한 메시지에 URL이 포함되어있을 때 만 callback이 실행됩니다.
  });
};

---

• 파라미터 값 없음

Methods

• getOpenGraph(msg, callback)

값	식별자	설명
message*	String	사용자가 입력한 메시지
callback*	Function	html과 url, data를 인자로 실행하는 콜백 함수

callback함수의 파라미터

값	식별자	설명
html	String	채팅방에 삽입될 html 문자열
url	String	사용자가 입력한 url
data	Object	서버에서 받은 OpenGraph정보 - (image, title, description, host)