Автор оригинала: Shahid Shaikh.
Вступление
Вы когда-нибудь замечали, как Facebook извлекает информацию из ссылки в той минуту, которую вы вставляете одну, или как квора извлекает название ссылки, как только вы вставили URL? В одной или другой форме они оба используют технологию открытого вложения, которая также называется Oembed.
В этом руководстве я собираюсь продемонстрировать вам, как получить информацию из ссылки, так же как Facebook и некоторые популярные веб-сайты делают это.
Наш проект
Чтобы продемонстрировать этот сценарий, я построил простое приложение, которое требует URL в качестве входа (вы также можете добавить текст и другую информацию), и извлеките информацию из ссылки, чтобы показать ее прямо на вашу консоль.
Я использовал Node.js на спине, чтобы обеспечить веб-сервис, и Angularjs на интернет-конце, чтобы сделать вызов AJAX.
О oembed-auto
Oembed-auto это узел-модуль, который помогает нам получить информацию о oembed из ссылки. Вы можете скачать и установить этот пакет в Ваш проект, использующий следующую команду:
npm install --save oembed-auto
Выполнение
Структура каталогов
├── index.html ├── node_modules ├── js │ ├── angular.js │ ├── app.js │ └── core.js ├── package.json └── server.js
Package.json.
{
"name": "oembed-api",
"version": "1.0.0",
"dependencies": {
"express": "~4.9.3",
"oembed-auto": "0.0.3",
"body-parser": "^1.12.3"
}
}
Переключитесь на каталог проекта и установите зависимости, выполняя следующую команду:
npm install
Вот что твой index.html должен выглядеть как:
OEmbed
Вот твой app.js :
var app=angular.module('status_app',[]);
И ваш Core.js :
app.controller('status_controller',function($scope,$http,$sce){
$scope.add_status=function(){
var url=$scope.status_box;
var request = $http({
method: "post",
url: "/get_meta",
data: {
data: url
},
headers: { 'Content-Type': 'application/json' }
});
/* Check whether the HTTP Request is successful or not. */
request.success(function (data) {
if(data.error) {
$scope.response_data = $sce.trustAsHtml(data.link);
} else {
$scope.response_data = $sce.trustAsHtml(""+data.title+"
" + data.html);
}
});
};
});
Вот что должен выглядеть файл сервера:
var express = require("express");
var app =express();
var oembed=require("oembed-auto");
var bodyParser = require("body-parser");
app.use(express.static(__dirname + '/js'));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.get('/',function(req,res,next){
res.sendFile(__dirname + '/index.html');
});
app.post('/get_meta',function(req,res){
oembed(req.body.data, function(error, result) {
if (error)
res.json({"error" : true,"link" :req.body.data});
else
res.json(result);
});
});
app.listen(3000,function(){
console.log("We are listening at 3000");
});
Как запустить приложение
Перейдите в каталог проекта и запустите приложение, используя
node server.js
Перейти к localhost: 3000 Для просмотра приложения. Скопируйте вставку любой ссылки на YouTube и нажмите кнопку «Отправить», чтобы увидеть информацию извлеченной ссылки.
Заключение
Я надеюсь, что вы, ребята, как статья, пожалуйста, посетите Github Ссылка для загрузки всех файлов для этой реализации.