Arhn - архитектура программирования

React Native не может подписаться на уведомления серверной части mercure

Я работаю над системой уведомлений с React Native и Symfony. Я настроил Mercure с докером для обработки предварительной подписки на обновления в реальном времени: файл .env:

###> symfony/mercure-bundle ###
# See https://symfony.com/doc/current/mercure.html#configuration
MERCURE_PUBLISH_URL=http://mercure.localhost/.well-known/mercure
# The default token is signed with the secret key: !ChangeMe!
MERCURE_JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.9-LscFk3QfdDtZ4nyg6BiH4_qDm6pbYHydURBMsDgEc
###< symfony/mercure-bundle ###

mercure.yaml:

mercure:
    enable_profiler: '%kernel.debug%'
    hubs:
        default:
            url: '%env(MERCURE_PUBLISH_URL)%'
            jwt: '%env(MERCURE_JWT_TOKEN)%'

Я создал компонент уведомлений в своем приложении React Native и использую код из официальной документации symfony mercure: https://symfony.com/doc/4.3/mercure.html#subscribing Код Notifications.js:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class Notifications extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        const url = new URL('http://mercure.localhost/.well-known/mercure');
        url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');

        url.searchParams.append('topic', 'http://example.com/books/1');
        const eventSource = new EventSource(url);

        eventSource.onmessage = e => console.log(e);
    }

    render() {
        return (
            <View>
                <Text> Notifications </Text>
            </View>
        );
    }
}

Я протестировал Postan и получил правильный ответ:  Postman test mercure

И я попробовал код javaScript в файле html для тестирования:

<script type="text/javascript">

const url = new URL('http://mercure.localhost/.well-known/mercure');
url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');

url.searchParams.append('topic', 'http://example.com/books/1');
const eventSource = new EventSource(url);

eventSource.onmessage = e => console.log(e); 
</script>
</html>

И я получаю ответ в реальном времени, когда запускаю запрос с помощью Postman:  console log in html file Моя проблема в том, что URL, searchParams и eventSource несовместимы с response native. Как я могу преобразовать этот код javaScript, чтобы он реагировал на собственный действительный код? Я попытался установить несколько библиотек: whatwg-url, buffer, response-native-event-source, и мой текущий код:

import React, { Component } from 'react';
import { View, Text } from 'react-native';

import { URL, URLSearchParams } from 'whatwg-url';
import { Buffer } from 'buffer';
import RNEventSource from 'react-native-event-source';

export default class Notifications extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    global.Buffer = Buffer;
    global.URL = URL;
    global.URLSearchParams = URLSearchParams;
    global.EventSource = RNEventSource;

    const url = new global.URL('http://mercure.localhost/.well-known/mercure');
    url.global.URLSearchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');

    url.global.URLSearchParams.append('topic', 'http://example.com/books/1');
    const eventSource = new global.EventSource(url);

    eventSource.onmessage = e => console.log(e); 
  }

  render() {
    return (
      <View>
        <Text> Notifications </Text>
      </View>
    );
  }
}

Я получил эту ошибку: undefined не является объектом (оценка url.global.URLSearchParams)


Ответы:


1

Я исправил проблему, она была связана с URL-адресом публикации. Я не могу использовать локальный URL-адрес, поэтому я создаю хост и настраиваю URL-адрес следующим образом:

http://mercure.preprod.oryx-immobilier.com/.well-known/mercure

Теперь я могу получать ответ в режиме реального времени от поддержанного

26.02.2020

2

Вы можете использовать вместо URLSearchparams просто адрес URL, подобный этому - ›

const url = `http://blablabla.com/?topic=<your_topic1>&
01.11.2020
Новые материалы

Коллекции публикаций по глубокому обучению
Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

Представляем: Pepita
Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

Советы по коду Laravel #2
1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

3 способа решить квадратное уравнение (3-й мой любимый) -
1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

Создание VR-миров с A-Frame
Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

Демистификация рекурсии
КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..