Получение данных с сервера: Получение данных с сервера — Изучение веб-разработки

javascript — Получение в JS большого массива данных с сервера


Вопрос задан


Изменён
1 год 1 месяц назад


Просмотрен
123 раза

Дорогие форумчане.
Возникла проблема.
Есть сервер с php, есть данные с этого сервера, около 1.200.000 строк, суммарно +- 10мб чистого текста, который пробовал либо считывать с MySql и ро строкам запихивать в массив либо считывать по строком с текстового файла и так же сувать в массив ( уже ужал как мог). Все это необходимо для отрисовки на canvas картинки, которая может меняться. ( Просто отрисовать картинку drawimage не выйдет ). В строчке значения цветов в hex-кодировке под каждый пиксель по порядку.

Задача как то передать с сервера эти данные в Js, для корректной отрисовки страницы.

Я запихиваю каждую строчку как ячейку массива и отправляю этот массив Ajax ( XML ) запросом. Ну и на стороне пользователя все это дело обрабатывается как нужно. Проблема в том, что таким образом дольше всего времени занимает скачивание такого большого массива. Это, конечно напрямую зависит от скорости интернета пользователя, но со средним 3g это прям секунд 20.

Долго думал, много где рылся, в гугле лазил — все безуспешно. Допускаю, что чего то не знаю, или туплю, но очень надеюсь на вашу помощь.

Заранее спасибо 🙂

  • javascript
  • php
  • ajax
  • xml
  • передача-данных






2

Как и предложили участники форума, возпользовался библиотекой GD для php,чтобы обрабатывать и данные еще на сервере и составлять картинку из них, а затем отправлять уже готовую картинку.







Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации



Почта

Необходима, но никому не показывается




By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.


HttpClient и отправка запросов ⚡️ Angular с примерами кода

Для взаимодействия с сервером и отправки запросов по протоколу HTTP применяется класс HttpClient. Этот класс определяет ряд методов для отправки различного рода запросов: GET, POST, PUT, DELETE. Данный класс построен поверх стандартного объекта в JavaScript — XMLHttpRequest.

Для использования этого класса в проект необходимо установить пакет @angular/common:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
{
  "name": "helloapp",
  "version": "1.0.0",
  "description": "First Angular 7 Project",
  "author": "Eugene Popov <metanit.com>",
  "scripts": {
    "dev": "webpack-dev-server --hot --open",
    "build": "webpack"
  },
  "dependencies": {
    "@angular/common": "~7.0.0"
    // остальные пакеты
  },
  "devDependencies": {
    // остальные пакеты
  }
}

И также в файле модуля AppModule должен быть импортирован класс HttpClientModule из пакета @angular/common/http:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { AppComponent } from '. /app.component'
import { HttpClientModule } from '@angular/common/http'
@NgModule({
  imports: [BrowserModule, FormsModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Стоит отметить, что в предыдущих версиях Angular (2,4) использовался для взаимодействия с сетью тип HttpModule из пакета @angular/http. Начиная с версии Angular 5 тип HttpModule и вообще пакет @angular/http являются устаревшими, поэтому рекомендуется применять именно классы HttpClient и HttpClientModule, которые собственно и используются в данном руководстве.

Вначале рассмотрим выполнение простейших GET-запросов. Пусть у нас есть стандартная структура проекта:

В корневую папку проекта добавим файл user.json, который будет представлять данные:

1
2
3
4
{
  "name": "Bob",
  "age": 28
}

Для представления данных в папку src/app добавим новый файл user. ts и определим в нем следующий код:

1
2
3
4
export class User {
  name: string
  age: number
}

Для оправки запроса определим в компоненте AppComponent следуюший код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, OnInit } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { User } from './user'
@Component({
  selector: 'my-app',
  template: `
    <div>
      <p>Имя пользователя: {{ user?.name }}</p>
      <p>Возраст пользователя: {{ user?.age }}</p>
    </div>
  `,
})
export class AppComponent implements OnInit {
  user: User
  constructor(private http: HttpClient) {}
  ngOnInit() {
    this.http
      .get('user.json')
      .subscribe((data: User) => (this.user = data))
  }
}

В данном случае в шаблоне выводятся данные объекта User, которые мы хотим получить с сервера. Однако загрузка данных, скажем, в конструкторе компонента не очень желательна. В этом плане метод ngOnInit(), который определен в интерфейсе OnInit и который вызывается при инициализации компонента представляет более предпочтительное место для загрузки данных. В конструкторе же мы просто получаем сервис HttpClient.

Далее в методе ngOnInit() получаем данные из сервиса. Сам метод http.get() возвращает объект Observable<any>. Observable представляет своего рода поток, и для прослушивания событий из этого потока применяется метод subscribe. Этот метод определяет действие над результатом запроса — полученными с сервера данными. В данном случае действие определено в виде стрелочной функции. Причем поскольку между схемой класса User и данными из файла json есть прямое сопоставление, то получаемые данные мы можем определить как объект User, и присвоить их переменной данного класса:

;(data: User) => (this. user = data)

В итоге при запуске веб-страницы мы увидим загруженные данные из файла user.json.

Создание сервиса

При взаимодействии с сервером, как правило, обращения к серверу происходят не непосредственно из компонента, а из вспомогательных сервисов. Поскольку сервис может определять дополнительную логику обработки полученных с сервера данных, которую могли бы сделать код компонента перегруженным. Кроме того, сервисы могут определять функционал, который будет использоваться несколькими компонентами. Компоненты же выступают в качестве потребителей данных, которые получены от сервисов.

Поэтому для работы с http добавим в папку src/app новый файл http.service.ts со следующим содержимым:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
@Injectable()
export class HttpService {
  constructor(private http: HttpClient) {}
  getData() {
    return this. http.get('user.json')
  }
}

Для отправки запросов сервис получает объект HttpClient. Чтобы данный сервис также могли использовать и другие компонетны через механизм dependency injection, к классу применяется декоратор @Injectable.

Для выполнения get-запроса у объекта HttpClient вызывается метод get(), в который передается адрес запроса — в нашем случае json-файл с данными.

В итоге структура проекта будет выглядеть следующим образом:

Теперь используем этот сервис в компоненте AppComponent:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { Component, OnInit } from '@angular/core'
import { HttpService } from './http.service'
import { User } from './user'
@Component({
  selector: 'my-app',
  template: `
    <div>
      <p>Имя пользователя: {{ user?.name }}</p>
      <p>Возраст пользователя: {{ user?. age }}</p>
    </div>
  `,
  providers: [HttpService],
})
export class AppComponent implements OnInit {
  user: User
  constructor(private httpService: HttpService) {}
  ngOnInit() {
    this.httpService
      .getData()
      .subscribe((data: User) => (this.user = data))
  }
}

Загрузка сложных данных

В примерах выше определение json-файла соответствует определению класса User, поэтому простое присвоение this.user=data пройдет успешно. И подобным образом мы можем загружать и другие более сложные данные. Например, определим в корневой папке проекта файл users.json:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
{
  "userList": [
    {
      "name": "Bob",
      "age": 28
    },
    {
      "name": "Tom",
      "age": 45
    },
    {
      "name": "Alice",
      "age": 32
    }
  ]
}

Изменим в классе HttpService адрес загрузки данных:

getData(){
        return this. http.get('users.json')
}

И изменим код компонента:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { Component, OnInit } from '@angular/core'
import { HttpService } from './http.service'
import { User } from './user'
@Component({
  selector: 'my-app',
  template: `
    <ul>
      <li *ngFor="let user of users">
        <p>Имя пользователя: {{ user?.name }}</p>
        <p>Возраст пользователя: {{ user?.age }}</p>
      </li>
    </ul>
  `,
  providers: [HttpService],
})
export class AppComponent implements OnInit {
  users: User[] = []
  constructor(private httpService: HttpService) {}
  ngOnInit() {
    this.httpService
      .getData()
      .subscribe((data) => (this.users = data['userList']))
  }
}

В данном случае мы хотим получить массив объектов User. Но напрямую данные из users. json не соответствуют массиву. Массив в файле определен по ключу userList. Поэтому, используя данный ключ, мы достаем нужные данные из ответа сервера: this.users=data["userList"].

Получить данные с управляемых серверов

Твиттер

LinkedIn

Фейсбук

Электронная почта

  • Статья

 

Применяется к: Windows Server 2012 R2, Windows Server 2012

Контрольный список: развертывание сервера IPAM > установка сервера IPAM > выбор метода подготовки IPAM > настройка обнаружения сервера > обнаружение серверов в сети | Добавление сервера в список серверов вручную > Создание объектов групповой политики подготовки IPAM | Настройка параметров доступа DHCP вручную | Ручная настройка параметров доступа к DNS | Ручная настройка параметров доступа к контроллеру домена и NPS > Выберите управляемые серверы > Проверить доступ к управляемому серверу > Получить данные с управляемых серверов

После того, как вы убедились, что сервер IPAM имеет доступ к управляемым серверам, вы можете получить данные с управляемых серверов, чтобы начать заполнение базы данных IPAM. Вы также можете получить данные сервера после изменения конфигурации или просто для получения обновленной информации. Вам не нужно вручную извлекать данные с управляемых серверов, поскольку запланированные задачи на IPAM-сервере будут выполнять эту задачу автоматически. Выполните следующую процедуру, если вы не хотите ждать выполнения этих запланированных задач. Дополнительные сведения о запланированных задачах сбора данных IPAM см. в разделе Архитектура IPAM.

Членство в группе администраторов или аналогичной группе является минимальным требованием для выполнения этой процедуры. Ознакомьтесь с подробными сведениями об использовании соответствующих учетных записей и членстве в группах в локальных и доменных группах по умолчанию (https://go.microsoft.com/fwlink/?LinkId=83477).

Используйте представление ИНВЕНТАРИЗАЦИЯ СЕРВЕРА для получения всех данных сервера. Определенные типы данных сервера также можно получить с помощью представлений в разделе IP ADDRESS SPACE (для данных адресного пространства), МОНИТОРИНГ И УПРАВЛЕНИЕ (для данных конфигурации и мониторинга) и КАТАЛОГ СОБЫТИЙ (для данных аудита). Вы можете получить данные для одного управляемого сервера или для нескольких управляемых серверов.

Для получения данных с управляемых серверов

  1. В верхнем дереве навигации IPAM нажмите ИНВЕНТАРИЗАЦИЯ СЕРВЕРА .

  2. Выберите управляемые серверы, с которых вы хотите собирать данные. Нажмите и удерживайте CTRL или SHIFT, чтобы выбрать несколько серверов.

  3. Щелкните правой кнопкой мыши выбранные серверы и выберите Получить все данные сервера .

  4. На выбранных серверах будут немедленно запущены следующие задачи сбора данных: AddressExpiry , AddressUtilization , Audit , ServerAvailability , ServiceMonitoring , ServerConfiguration .

  5. Дождитесь завершения задач сбора данных.

Получение данных: getServerSideProps | Next.

js

Если вы экспортируете функцию с именем getServerSideProps (рендеринг на стороне сервера) со страницы, Next.js будет предварительно отображать эту страницу при каждом запросе, используя данные, возвращаемые getServerSideProps .

 тип импорта {InferGetServerSidePropsType, GetServerSideProps} из "далее"
 
введите репо = {
  имя: строка
  stargazers_count: число
}
 
экспортировать константу getServerSideProps: GetServerSideProps<{
  репо: репо
}> = асинхронный () => {
  const res = ожидание выборки('https://api.github.com/repos/vercel/next.js')
  константное репо = ожидание res.json()
  вернуть {реквизит: {репо}}
}
 
функция экспорта по умолчанию Page({
  репо,
}: InferGetServerSidePropsType) {
  вернуть репо.stargazers_count
}

Обратите внимание, что независимо от типа рендеринга любые свойства будут переданы компоненту страницы и могут быть просмотрены на стороне клиента в исходном HTML. Это необходимо для того, чтобы страница была правильно увлажнена. Убедитесь, что вы не передаете конфиденциальную информацию, которая не должна быть доступна на клиенте в props .

getServerSideProps работает только на стороне сервера и никогда не запускается в браузере. Если страница использует getServerSideProps , затем:

  • Когда вы запрашиваете эту страницу напрямую, getServerSideProps запускается во время запроса, и эта страница будет предварительно обработана с возвращенными реквизитами
  • Когда вы запрашиваете эту страницу на переходах страниц на стороне клиента через next/link или next/router , Next.js отправляет запрос API на сервер, который запускает getServerSideProps

getServerSideProps возвращает JSON, который будет использоваться для отображения страницы. Вся эта работа будет выполняться автоматически Next. js, так что вам не нужно делать ничего дополнительно, пока у вас есть Определено значение getServerSideProps .

Вы можете использовать инструмент устранения следующего кода, чтобы проверить, что Next.js удаляет из пакета на стороне клиента.

getServerSideProps можно экспортировать только со страницы . Вы не можете экспортировать его из нестраничных файлов.

Обратите внимание, что вы должны экспортировать getServerSideProps как отдельную функцию — она не будет работать, если вы добавите getServerSideProps в качестве свойства компонента страницы.

Справочник по API getServerSideProps охватывает все параметры и реквизиты, которые можно использовать с getServerSideProps .

Вы должны использовать getServerSideProps , только если вам нужно отобразить страницу, данные которой должны быть получены во время запроса. Это может быть связано с характером данных или свойств запроса (таких как заголовки авторизации или географическое положение). Страницы, использующие getServerSideProps , будут отображаться на стороне сервера во время запроса и кэшироваться только в том случае, если настроены заголовки управления кешем.

Если вам не нужно отображать данные во время запроса, вам следует рассмотреть возможность получения данных на стороне клиента или getStaticProps .

getServerSideProps или маршруты API

Может возникнуть соблазн обратиться к маршруту API, если вы хотите получить данные с сервера, а затем вызвать этот маршрут API из getServerSideProps . Это ненужный и неэффективный подход, так как он вызовет дополнительный запрос из-за getServerSideProps и маршруты API, работающие на сервере.

Возьмем следующий пример. Маршрут API используется для получения некоторых данных из CMS. Затем этот маршрут API вызывается непосредственно из getServerSideProps . Это создает дополнительный вызов, снижая производительность. Вместо этого напрямую импортируйте логику, используемую внутри вашего маршрута API, в getServerSideProps . Это может означать вызов CMS, базы данных или другого API непосредственно из getServerSideProps .

getServerSideProps с маршрутами Edge API

getServerSideProps можно использовать как с бессерверной, так и с пограничной средами выполнения, и вы можете устанавливать реквизиты в обеих. Однако в настоящее время в Edge Runtime у вас нет доступа к объекту ответа. Это означает, что вы не можете, например, добавить файлы cookie в getServerSideProps . Чтобы иметь доступ к объекту ответа, вы должны продолжать использовать среду выполнения Node.js , которая является средой выполнения по умолчанию.

Вы можете явно установить время выполнения для каждой страницы, изменив config , например:

 export const config = {
  время выполнения: «nodejs», // или «край»
}
 
export const getServerSideProps = async () => {}

Если ваша страница содержит часто обновляемые данные, и вам не нужно предварительно отображать данные, вы можете получить данные на стороне клиента. Примером этого являются пользовательские данные:

  • Во-первых, сразу показать страницу без данных. Части страницы могут быть предварительно обработаны с помощью статической генерации. Вы можете показать состояния загрузки для отсутствующих данных
  • Затем извлеките данные на стороне клиента и отобразите их, когда будете готовы

Этот подход хорошо работает, например, для страниц панели инструментов пользователя. Поскольку информационная панель — это частная страница, предназначенная для конкретного пользователя, SEO не имеет значения, и страницу не нужно предварительно отображать. Данные часто обновляются, что требует выборки данных во время запроса.

В следующем примере показано, как получить данные во время запроса и предварительно отобразить результат.

 функция Страница({данные}) {
  // Отрисовка данных...
}
 
// Это вызывается при каждом запросе
экспортировать асинхронную функцию getServerSideProps() {
  // Получаем данные из внешнего API
  const res = ожидание выборки(`https://. ../data`)
  константные данные = ожидание res.json()
 
  // Передаем данные на страницу через пропсы
  вернуть {реквизит: {данные}}
}
 
экспорт по умолчанию Страница

Вы можете использовать заголовки кэширования ( Cache-Control ) внутри getServerSideProps для кэширования динамических ответов. Например, используя stale-while-revalidate .

 // Это значение считается свежим в течение десяти секунд (s-maxage=10).
// Если запрос повторяется в течение следующих 10 секунд, предыдущий
// кэшированное значение все еще будет свежим. Если запрос повторяется до 59 секунд,
// кэшированное значение будет устаревшим, но все равно будет отображаться (stale-while-revalidate=59).
//
// В фоновом режиме будет сделан запрос на повторную проверку для заполнения кеша
// со свежим значением. Если вы обновите страницу, вы увидите новое значение.
экспортировать асинхронную функцию getServerSideProps ({req, res}) {
  res.setHeader(
    'Кэш-Контроль',
    'public, s-maxage=10, stale-while-revalidate=59'
  )
 
  возвращаться {
    реквизит: {},
  }
}

Узнайте больше о кэшировании.