英文:
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文件:
###> 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.yaml:
mercure:
enable_profiler: '%kernel.debug%'
hubs:
default:
url: '%env(MERCURE_PUBLISH_URL)%'
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代码:
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>
);
}
}
I tested with Postman and I get a valid response :
我使用Postman进行了测试,并获得了有效的响应:
And I tried the JavaScript code in an HTML file for testing :
我尝试将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>
And I get a real-time response when I run the request with Postman :
当我使用Postman运行请求时,我会得到实时响应:
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,我的当前代码是:
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>
);
}
}
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 :
###> 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)%'
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 :
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>
);
}
}
I tested with Postan and i get a valid response :
And i tried the javaScript code in a html file for testing :
<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>
And i get a real time response when i run request with Postman :
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 :
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>
);
}
}
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地址 ->
const url = `http://blablabla.com/?topic=<your_topic1>&
英文:
You can use instead of URLSearchparams just plate url address like this one ->
const url = `http://blablabla.com/?topic=<your_topic1>&
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论