Первые шаги в ангуляр: как правильно опросить и получить сообщения с сервера?

@homeworld · Регистрация: 20.09.2022

Студворк — интернет-сервис помощи студентам

Привет!
Скажите пожалуйста а как вывести все сообщения с сервера?
Я лично хочу реализовать такую логику.
юзер логинится получает токен JWP и роутится в /api/protected-chat
там компонент messages-list-view.component на страничке на событии ngOnInit
делает следующие
1. узнаем у сервера сколько сообщений и тут же их по одному запрашиваем и пушим в общий массив messages, который уже и выводится через ngFor

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<mat-list>
    <mat-list-item *ngFor="let Message of messages">
      <mat-card>
          <mat-card-content>
              <button type="button">
              <span class="username">{{Message.username}}</span>
              <span class="name">{{Message.text}}</span>
              </button>
          </mat-card-content>
          <mat-card-footer>
              <p>message footer</p>
          </mat-card-footer>
      </mat-card>
      <mat-divider></mat-divider>
    </mat-list-item>
</mat-list>

JavaScript
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
export class MessagesListViewComponent implements OnInit, OnDestroy {
  
  // Subscription object
  private interval : any;
  count:number = 0;
  index:number = 0;
  // list of client's visibile messages from messageService
  messages:Array<Message> = [];
 
  constructor(private msgService: MessageService) {}
 
  ngOnInit() {
    
    // вынес локальные переменные count и index в сам класс иначе функция не работает как надо!
    this.msgService.getMessagesCountOnServer().subscribe(n => {
      this.count = +n.value; // превращаем строку value в число count
      for (this.index=0; this.index < this.count; this.index++) {
        this.msgService.getMessageFromServer(this.index).subscribe(Message => {this.messages.push(Message); console.log(Message.text)});
      }
    });
 
 
    this.interval = setInterval(() => { 
 
      this.updateMessagesList();
    }, 500);
  }

export class MessageService

JavaScript
1
2
3
4
5
6
7
8
9
  getMessagesCountOnServer():Observable<JsonValue> 
  {
    return this.http.get<JsonValue>('/api/get-count', this.httpOptions);  
  }
 
  getMessageFromServer(index:Number) : Observable<Message>
  {
    return this.http.get<Message>('/api/messages?index='+index+"&from=0", this.httpOptions);
  }

оно работает но сообщения дублируются и порядок может быть рандомным, иногда вообще пустой список

тут два серверных роута которые задействуются

C++
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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
    // Возвращает кол-во клиенту сообщений в базе данных в JSON формате(Body) 
    CROW_ROUTE(app,"/api/get-count").methods(crow::HTTPMethod::Get)(getMessagesCount);
    
    // Возвращает по индексу одно сообщение. Результат JSON (body)
    CROW_ROUTE(app,"/api/messages").methods(crow::HTTPMethod::Get)(getMessage);
 
void getMessagesCount(const crow::request& req, crow::response& res)
{
    std::ostringstream os;
    int messagesCount = SqlCountMessages(SqlDbFile);
    os << messagesCount;
    res.set_header("Content-Type", "'application/json'");
    nlohmann::json value;
    std::string s = "{\"value\":\"";
    s.append(os.str().c_str());
    s.append("\"}");
    value = nlohmann::json::parse(s.c_str());
    res.body.append(value.dump());
    res.code = 200;
    res.end();
}
 
void getMessage(const crow::request& req, crow::response& res)
{
    // Используем параметры /api/messages?index=0
    // {ip}:{port}/params?foo='blabla'&pew=32&count[]=a&count[]=b
    int params_count = req.url_params.keys().size();
            
    if (params_count >= 1) 
    {
        std::cout << "/api/messages?index=" << req.url_params.get("index") << std::endl;
 
        const char* index_value = req.url_params.get("index");
        int index = 0;
        if (index_value) 
        {
            index = atoi(req.url_params.get("index"));
 
            std::vector<Message> messages;
            
            // Ищем в базе данных сообщение с индексом как в запросе
            SqlSelectMessage(SqlDbFile, &messages, index);
 
            if(messages.size() > 0) {
 
                //struct Message {
                //  std::string username;
                //  std::string text;
                //  std::string time;
                //  int id;
                //};
 
                nlohmann::json j;
                j["username"] = messages[0].username.c_str();
                j["text"] = messages[0].text.c_str();
                j["time"] = messages[0].time.c_str();
                std::ostringstream os;
                os << messages[0].id;
                j["id"] = os.str().c_str();
 
                std::cout << "/api/messages = " << j.dump() << std::endl;
 
                res.body.append(j.dump().c_str());
                res.set_header("Content-Type", "'application/json'");
                //res.add_header("Content-Type", "text/plain");
                res.code = 200;
                res.end();
                return;
            }                    
        }
    }
 
    res.code = 202;
    res.end();
}

@bodynar · 14.03.2023, 16:58

Сообщение от homeworld

сообщения дублируются и порядок может быть рандомным, иногда вообще пустой список

1. Через Postman аналогичная ошибка?
Судя по тому, что вы считываете с api результат и просто пушите - проблема на сервере. Либо же вы можете на клиенте организовать нужную вам сортировку

2. Почему вы получаете по одному сообщению, а не N сразу?

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .