Есть ли чистый способ выполнения функции сразу после настройки подписки RxJs?

Что я хочу сделать:

Отправьте событие запроса на сервер веб-сокета.
Получите событие немедленного ответа вместе с некоторыми дополнительными данными.
Продолжайте получать ответы с течением времени.

У меня вопрос:

Есть ли более чистый способ сделать то, что я делаю ниже? Без использования setTimeout.

Сначала посмотрите на этот упрощенный рабочий пример:

const { Subject, defer, interval, of} = rxjs;
const EventEmitter = EventEmitter3;


const emitter = new EventEmitter();
const subject = new Subject();

// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
  subject.next(`Immediate response`);
  interval(1000).subscribe((index) =>
    subject.next(`Delayed response...${index}`)
  );
});



// Imagine the following code being present in the browser
function getData() {
  return defer(() => {
    // The next line mocks a websocket client sent event
    setTimeout(() => emitter.emit("request"), 0);
    return subject;
  });
}

getData().subscribe((data) => console.info(data));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src = "https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js"></script>

Теперь посмотрим на нерабочий пример. Здесь клиент не получает немедленного ответа, потому что событие «запрос» отправляется до настройки подписки.

const { Subject, defer, interval, of} = rxjs;
const EventEmitter = EventEmitter3;


const emitter = new EventEmitter();
const subject = new Subject();

// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
  subject.next(`Immediate response`);
  interval(1000).subscribe((index) =>
    subject.next(`Delayed response...${index}`)
  );
});


// Imagine the following code being present in the browser
function getData() {
  return defer(() => {
    emitter.emit('request');
    return subject;
  });
}

getData().subscribe((data) => console.info(data));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src = "https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js"></script>

Примечание: rxjs предоставляет оболочку webSocket, которая возвращает тему, которую вы можете использовать для отправки (.next()) и получения (.subscribe()) сообщений.

— 08.04.2021 23:09

javascript events websocket rxjs

08.04.2021 22:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 1

Вы можете использовать BehaviorSubject вместо Subject:

const { BehaviorSubject, defer, interval, of } = rxjs;
const EventEmitter = EventEmitter3;


const emitter = new EventEmitter();
const subject = new BehaviorSubject();

// The next lines mock a websocket server message listener, imagine this being present on server side
emitter.on("request", () => {
  // the timing of this synchronous response would be impossible in a real socket
  subject.next(`Immediate response`);
  interval(1000).subscribe((index) =>
    subject.next(`Delayed response...${index}`)
  );
});


// Imagine the following code being present in the browser
function getData() {
  return defer(() => {
    emitter.emit('request');
    return subject;
  });
}

getData().subscribe((data) => console.info(data));

<script src = "https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.3/rxjs.umd.min.js"></script>
<script src = "https://unpkg.com/eventemitter3@latest/umd/eventemitter3.min.js"></script>

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

08.04.2021 23:14

Другие вопросы по теме

Установите значения на странице в соответствии со значениями данных в кнопке

Как я могу остановить выполнение асинхронной программы при выполнении какой-либо задачи?

Как узнать, из какого потомка создается событие в vue.js 3?

AddEventListener с React + TypeScript

Как запустить событие в Laravel pusher

Событие нажатия клавиши не работает для FigureCanvas в tkinter

C#, почему при назначении обработчика событий используется оператор + =, а не =

Как вызвать одиночную функцию при щелчке по сетке Кендо в каждой строке

Как запустить код при входе в Blazor WebAssembly?

C++ Builder добавляет обработчики событий

Есть ли чистый способ выполнения функции сразу после настройки подписки RxJs?

Ответы 1

Другие вопросы по теме

Похожие вопросы