React Native 无法订阅 Mercure 后端通知。

huangapple
go评论129阅读模式
英文:

react native can't subscribe to mercure backend notifications

问题

I'm working on a notifications system with React Native and Symfony.
我正在使用React Native和Symfony开发通知系统。

I configured Mercure with docker to handle front subscription to real-time updates :
我使用Docker配置了Mercure以处理前端对实时更新的订阅：

the .env file :
.env文件：

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

mercure.yaml:
mercure.yaml：

  1. mercure:
  2.     enable_profiler: '%kernel.debug%'
  3.     hubs:
  4.         default:
  5.             url: '%env(MERCURE_PUBLISH_URL)%'
  6.             jwt: '%env(MERCURE_JWT_TOKEN)%'

I created a Notifications component in my React Native application, and I use the code in the official documentation of Symfony Mercure:
我在我的React Native应用程序中创建了一个通知组件，并使用了Symfony Mercure的官方文档中的代码：

Notifications.js code :
Notifications.js代码：

  1. import React, { Component } from 'react';
  2. import { View, Text } from 'react-native';
  4. export default class Notifications extends Component {
  5.     constructor(props) {
  6.         super(props);
  7.         this.state = {};
  8.     }
  10.     componentDidMount() {
  11.         const url = new URL('http://mercure.localhost/.well-known/mercure');
  12.         url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  13.         url.searchParams.append('topic', 'http://example.com/books/1');
  14.         const eventSource = new EventSource(url);
  16.         eventSource.onmessage = (e) => console.log(e);
  17.     }
  19.     render() {
  20.         return (
  21.             <View>
  22.                 <Text>Notifications</Text>
  23.             </View>
  24.         );
  25.     }
  26. }

I tested with Postman and I get a valid response :
我使用Postman进行了测试，并获得了有效的响应：

React Native 无法订阅 Mercure 后端通知。

And I tried the JavaScript code in an HTML file for testing :
我尝试将JavaScript代码放入HTML文件中进行测试：

  1. <script type="text/javascript">
  3. const url = new URL('http://mercure.localhost/.well-known/mercure');
  4. url.searchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  6. url.searchParams.append('topic', 'http://example.com/books/1');
  7. const eventSource = new EventSource(url);
  9. eventSource.onmessage = (e) => console.log(e);
  10. </script>
  11. </html>

And I get a real-time response when I run the request with Postman :
当我使用Postman运行请求时，我会得到实时响应：

React Native 无法订阅 Mercure 后端通知。

My problem is that URL, searchParams, and eventSource are not compatible with React Native.
我的问题是URL、searchParams和eventSource与React Native不兼容。

How can I transform this JavaScript code into valid React Native code?
我该如何将这段JavaScript代码转换为有效的React Native代码？

I tried to install some libraries: whatwg-url, buffer, react-native-event-source, and my current code is :
我尝试安装了一些库：whatwg-url、buffer、react-native-event-source，我的当前代码是：

  1. import React, { Component } from 'react';
  2. import { View, Text } from 'react-native';
  4. import { URL, URLSearchParams } from 'whatwg-url';
  5. import { Buffer } from 'buffer';
  6. import RNEventSource from 'react-native-event-source';
  8. export default class Notifications extends Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {};
  12.   }
  14.   componentDidMount() {
  15.     global.Buffer = Buffer;
  16.     global.URL = URL;
  17.     global.URLSearchParams = URLSearchParams;
  18.     global.EventSource = RNEventSource;
  20.     const url = new global.URL('http://mercure.localhost/.well-known/mercure');
  21.     url.global.URLSearchParams.append('topic', 'http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}');
  23.     url.global.URLSearchParams.append('topic', 'http://example.com/books/1');
  24.     const eventSource = new global.EventSource(url);
  26.     eventSource.onmessage = (e) => console.log(e);
  27.   }
  29.   render() {
  30.     return (
  31.       <View>
  32.         <Text>Notifications</Text>
  33.       </View>
  34.     );
  35.   }
  36. }

I got this error: undefined is not an object (evaluating 'url.global.URLSearchParams')
我收到了这个错误消息：未定义对象（在'url.global.URLSearchParams'中评估）

英文:

I'm working on a notifications system with React Native and Symfony.
I configured Mercure with docker to handle front subscription to real time updates :
the .env file :

  1. ###&gt; symfony/mercure-bundle ###
  2. # See https://symfony.com/doc/current/mercure.html#configuration
  3. MERCURE_PUBLISH_URL=http://mercure.localhost/.well-known/mercure
  4. # The default token is signed with the secret key: !ChangeMe!
  5. MERCURE_JWT_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZXJjdXJlIjp7InB1Ymxpc2giOlsiKiJdfX0.9-LscFk3QfdDtZ4nyg6BiH4_qDm6pbYHydURBMsDgEc
  6. ###&lt; symfony/mercure-bundle ###

mercure.yaml:

  1. mercure:
  2.     enable_profiler: &#39;%kernel.debug%&#39;
  3.     hubs:
  4.         default:
  5.             url: &#39;%env(MERCURE_PUBLISH_URL)%&#39;
  6.             jwt: &#39;%env(MERCURE_JWT_TOKEN)%&#39;

I created a Notifications component in my React Native application and i use the code in the official documentation of symfony mercure:
https://symfony.com/doc/4.3/mercure.html#subscribing
Notifications.js code :

  1. import React, { Component } from &#39;react&#39;;
  2. import { View, Text } from &#39;react-native&#39;;
  4. export default class Notifications extends Component {
  5.     constructor(props) {
  6.         super(props);
  7.         this.state = {
  8.         };
  9.     }
  11.     componentDidMount() {
  12.         const url = new URL(&#39;http://mercure.localhost/.well-known/mercure&#39;);
  13.         url.searchParams.append(&#39;topic&#39;, &#39;http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}&#39;);
  15.         url.searchParams.append(&#39;topic&#39;, &#39;http://example.com/books/1&#39;);
  16.         const eventSource = new EventSource(url);
  18.         eventSource.onmessage = e =&gt; console.log(e);
  19.     }
  21.     render() {
  22.         return (
  23.             &lt;View&gt;
  24.                 &lt;Text&gt; Notifications &lt;/Text&gt;
  25.             &lt;/View&gt;
  26.         );
  27.     }
  28. }

I tested with Postan and i get a valid response :
React Native 无法订阅 Mercure 后端通知。

And i tried the javaScript code in a html file for testing :

  1. &lt;script type=&quot;text/javascript&quot;&gt;
  3. const url = new URL(&#39;http://mercure.localhost/.well-known/mercure&#39;);
  4. url.searchParams.append(&#39;topic&#39;, &#39;http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}&#39;);
  6. url.searchParams.append(&#39;topic&#39;, &#39;http://example.com/books/1&#39;);
  7. const eventSource = new EventSource(url);
  9. eventSource.onmessage = e =&gt; console.log(e); 
  10. &lt;/script&gt;
  11. &lt;/html&gt;

And i get a real time response when i run request with Postman :
React Native 无法订阅 Mercure 后端通知。
My problem is that URL, searchParams and eventSource are not compatible with react native.
How can i transform this javaScript code to react native valid code ?
I tried to install some librairies : whatwg-url, buffer, react-native-event-source and my current code is :

  1. import React, { Component } from &#39;react&#39;;
  2. import { View, Text } from &#39;react-native&#39;;
  4. import { URL, URLSearchParams } from &#39;whatwg-url&#39;;
  5. import { Buffer } from &#39;buffer&#39;;
  6. import RNEventSource from &#39;react-native-event-source&#39;;
  8. export default class Notifications extends Component {
  9.   constructor(props) {
  10.     super(props);
  11.     this.state = {
  12.     };
  13.   }
  15.   componentDidMount() {
  16.     global.Buffer = Buffer;
  17.     global.URL = URL;
  18.     global.URLSearchParams = URLSearchParams;
  19.     global.EventSource = RNEventSource;
  21.     const url = new global.URL(&#39;http://mercure.localhost/.well-known/mercure&#39;);
  22.     url.global.URLSearchParams.append(&#39;topic&#39;, &#39;http://dev.api.partage-mandats.proprietes-privees.com/mandate_shares/{id}&#39;);
  23.     
  24.     url.global.URLSearchParams.append(&#39;topic&#39;, &#39;http://example.com/books/1&#39;);
  25.     const eventSource = new global.EventSource(url);
  26.     
  27.     eventSource.onmessage = e =&gt; console.log(e); 
  28.   }
  30.   render() {
  31.     return (
  32.       &lt;View&gt;
  33.         &lt;Text&gt; Notifications &lt;/Text&gt;
  34.       &lt;/View&gt;
  35.     );
  36.   }
  37. }

I got this error : undefined is not an object (evaluating 'url.global.URLSearchParams')

答案1

得分: 0

我修复了问题，问题出在发布网址上。
我无法使用本地网址，所以我创建了一个主机，并将网址配置为如下：

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

现在我可以实时从后端收到响应。

英文:

I fix the issue, it was about the publish url
I can't use a local url so i create a host and i config the url like this :

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

Now i can receive real time response from the backned

答案2

得分: 0

你可以使用URLSearchparams的代替，只需像这样填写URL地址 ->

  1. const url = `http://blablabla.com/?topic=&lt;your_topic1&gt;&amp;
英文:

You can use instead of URLSearchparams just plate url address like this one ->

  1. const url = `http://blablabla.com/?topic=&lt;your_topic1&gt;&amp;

huangapple
  • 本文由 发表于 2020年1月6日 17:45:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/59609805.html
  • javascript
  • mercure
  • notifications
  • react-native
  • symfony4
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定