问题描述
我正在尝试将 RabbitMQ 与 React Native 结合使用.我找不到有关此主题的示例.我遵循了这个很棒的答案我已经从我的模拟器连接到服务器.我正在尝试使用 rabbitmq hello world tutorial.消息进入队列，我可以在浏览器的管理选项卡上看到它.我试着把它听成 react-native-rabbitmq read.me，使用下面的代码.
I'm tryin to use RabbitMQ with React Native. I could'nt find an example about this topic. I've followed this great answerI've got a connection to the server from my emulator. I'm tryin to send a simple message from server with rabbitmq hello world tutorial. Message goes to queue, I can see it on the management tab on browser. I'm tryin to listen to it as react-native-rabbitmq read.me, using below code.
// Receive one message when it arrives
queue.on('message', (data) => {
});
// Receive all messages send with in a second
queue.on('messages', (data) => {
});
未从服务器获取消息.任何想法或例子都会很棒.提前致谢.干杯
Not getting the message from the server. Any idea or example would be great. Thanks in advance. Cheers
推荐答案
所以如果你熟悉我之前关于如何连接 react-native 的帖子应用到rabbitmq 服务器链接，这篇文章回答关于如何向本机应用程序发送消息或控制其操作的问题.如果没有，请尝试通读这篇文章，因为我将参考上一篇文章中解释的一些细节.
So if you are familiar with my previous post on how to connect a react-nativeapp to a rabbitmq server link, this post answers the question on how to send messages to or control the actions of a react native app. If not, try to go through the post because I will be making reference to some details explained in the previous post.
如之前的帖子所述，整个过程是在 Windows 10 操作系统和 Android 操作系统 6.0 及更高版本上进行的.
As stated in the earlier post, the whole process was carried out on a windows 10 OS and Android OS 6.0 and above.
在命令行访问你的 react-native app 文件夹并单独拉取以下库
Access your react-native app folder on the command line and pull the following libraries individually
npm install react-native-simple-toast -–save
npm install react-native-phone-call --save
npm install amqplib -–save
--toast 库类似于 vanilla JS 中的提示功能.它的目的是在应用程序屏幕上回显作为参数传递的任何消息
--The toast library is similar to the prompt function in vanilla JS. It is meant to echo any message passed as arguments on the app screen
--电话呼叫库打开呼叫菜单并记录您作为参数传递的任何号码屏幕
--The phone call library opens up the call menu and logs any number you pass as argument on thescreen
在您的 react-native 项目文件夹中，编辑您的 App.js 文件，使其看起来像下面的代码片段
Inside your react-native project folder, edit your App.js file to look like the snippet below
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import {
Connection,
Queue,
Exchange
} from 'react-native-rabbitmq';
import Toast from 'react-native-simple-toast';
import call from "react-native-phone-call";
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props)
}
componentWillMount() {
const config = {
host: '192.168.137.1, //your hotspot IPv4 address
port: 5672,
username: ‘dummy’, //your rabbitmq management username
password: ‘dummy’, //your rabbitmq management password
virtualhost: ‘/’
};
let connection = new Connection(config)
connection.connect()
let connected = false;
let queue;
let exchange;
connection.on('connected', (event) => {
queue = new Queue(connection, {
name: '',
passive: false,
durable: true,
exclusive: false,
consumer_arguments: { 'x-priority': 1 }
});
exchange = new Exchange(connection, {
name: 'direct_log',
type: 'direct',
durable: false,
autoDelete: false,
internal: false
});
queue.bind(exchange, 'info');
queue.on('message', (data) => {
if (data.message=="make-call") {
const args = {
number: '131',
prompt: false
}
call(args).catch(console.error)
}
if (data.message=="alert-msg") {
Toast.show(data.message);
}
});
});
connection.on('error', event => {
connected = false;
console.log(connection);
console.log(event);
console.log("you are not connected");
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
在配置对象中，可以通过在命令行的任何位置运行以下命令来获取您的主机 ip
Inside the config object, your host ip can be gotten by running the following anywhere on your command line
ipconfig
在无线局域网适配器本地连接
端口是rabbitmq端口——5672
The port is the rabbitmq port – 5672
用户名和密码是您为rabbitmq管理设置的链接>
The username and password are those you set for your rabbitmq management <link>
现在，在您的根文件夹中创建一个 server.js 文件并粘贴以下代码片段
Now, create a server.js file inside your root folder and paste the following code snippet
var amqp = require('amqplib/callback_api');
amqp.connect('amqp://localhost', function (err, conn) {
conn.createChannel(function(err, ch){
var ex = "direct_log";
var msg = process.argv.slice(2).join(' ')|| "hello Joshua";
var args = process.argv.slice(2);
ch.assertExchange(ex, 'direct', {durable:false})
ch.publish(ex, 'info', new Buffer(msg));
console.log("message sent", 'info', msg);
setTimeout(function() {conn.close(); process.exit(0) }, 500);
});
});
将发送到 react-native 应用程序的数据将通过 sender.js 文件启动由于消息类型是直接类型 只有具有一个相应的路由键(info 在这种情况下是路由键).路由密钥通过通道与交换一起发布，一旦 App.js 文件中的队列与正确的路由密钥一起绑定到交换，接收者，即 React-Native 应用程序应该能够执行基于无论传递什么消息.
The data which will be sent to the react-native app will be initiated via the sender.js fileSince the message type is a direct type only a recipient witha corresponding routing key (info is the routing key in this case). The routing key is published along with the exchange via the channel and once the queue in the App.js file is bound to the exchange along with the correct routing key, the recipient i.e. the React-Native App should be able to perform actions based on whatever message is passed.
一切都设置好后，打开命令行的另一个终端并运行
Once everything is set up, open another terminal of your command line and run
rabbitmq-server
从命令行的任何位置启动您的 react-native 应用程序(通过 Android 模拟器或您的 Android 手机).屏幕上不应出现错误.
from anywhere on the command line start up your react-native app (via Android emulator or your Android phone). There should be no errors rendered on the screen.
通过
host:15672 e.g 192.168.137.1:15672
登录后，您应该会在连接选项卡下看到一个连接.打开命令行的另一个终端并访问 react-native 应用程序的根文件夹并运行 sender.js 文件和一条消息
Once you’re logged in, you should see a connection under the connections tab.Open yet another terminal of your command line and access the root folder of your react-native app and run the sender.js file along with a message
node sender.js alert-msg
上述命令应在您的应用屏幕上显示一条弹出消息 (alert-msg)检查rabbitmq管理中的队列选项卡，您应该在相应的选项卡下看到传入和传出数据.您还可以使用
the above command should show a pop-up message (alert-msg) on your app screencheck the queues tab in your rabbitmq management, you should see incoming and outgoing data under the respective tabs.You could also send a message for the phone call with
node sender.js make-call
这应该会在安卓设备上打开通话菜单.一旦上述方法奏效，您可以查看其他库，这些库可以帮助您在 Android 设备或 react-native 应用程序上执行更多功能.
this should open up the call menu on the android device.Once the above methods work out, you could check out other libraries which could help You perform more functions on your android device or on the react-native app.
为 Swap Space Systems 的实习生团队和我们的高级同事干杯.在我们走到这一步之前，我们一起撞了几个星期.
Cheers to the team of Interns and our Senior colleagues at Swap Space Systems.We banged our heads together for several weeks before we got to this point.
这篇关于RabbitMQ React Native 发送示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！