Автор оригинала: 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 Ссылка для загрузки всех файлов для этой реализации.