Рубрики
Без рубрики

Извлечение информации из ссылки с Node.js & angularjs

Когда-либо заметил, как Facebook извлекает информацию из ссылки в той минуту, которую вы вставляете одну, или как квора извлекает название ссылки, как только вы вставили URL? В этом руководстве вы узнаете, как получить информацию из ссылки, так как Facebook и некоторые популярные веб-сайты делают это.

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