RabbitMQ React Native 发送示例

Question

我正在尝试将 RabbitMQ 与 React Native 结合使用。我找不到关于这个主题的例子。我遵循了这个很好的答案， 我已经从模拟器连接到服务器。我正在尝试使用rabbitmq hello world教程从服务器发送一条简单的消息。消息进入队列，我可以在浏览器的管理选项卡上看到它。我正在尝试使用以下代码将其作为react-native-rabbitmq read.me来收听。

// Receive one message when it arrives
queue.on('message', (data) => {

});

// Receive all messages send with in a second
queue.on('messages', (data) => {

});

没有从服务器获取消息。任何想法或例子都会很棒。提前致谢。干杯

Answer 1

因此，如果您熟悉我之前关于如何将react-native\napp连接到rabbitmq服务器链接的文章文章，那么这篇文章回答了如何向react本机应用程序发送消息或控制其操作的问题。如果没有，请尝试阅读这篇文章，因为我将参考上一篇文章中解释的一些细节。

\n\n

正如之前的文章所述，整个过程是在 Windows 10 操作系统和 Android 操作系统 6.0 及更高版本上进行的。

\n\n

在命令行上访问您的react-native应用程序文件夹并单独提取以下库

\n\n

npm install react-native-simple-toast -\xe2\x80\x93save\n\nnpm install react-native-phone-call --save\n\nnpm install amqplib -\xe2\x80\x93save\n

\n\n

--toast库类似于vanilla JS中的提示功能。它旨在回显应用程序屏幕上作为参数传递的任何消息

\n\n

--电话呼叫库打开呼叫菜单并记录您在屏幕上作为参数传递的任何号码\n

\n\n

在你的react-native项目文件夹中，编辑你的App.js文件，使其类似于下面的代码片段

\n\n

/**\n * Sample React Native App\n * https://github.com/facebook/react-native\n * @flow\n */\n\nimport React, { Component } from \'react\';\nimport {\n  Platform,\n  StyleSheet,\n  Text,\n  View\n} from \'react-native\';\nimport {\n  Connection,\n  Queue,\n  Exchange\n} from \'react-native-rabbitmq\';\nimport Toast from \'react-native-simple-toast\';\nimport call from "react-native-phone-call";\n\nconst instructions = Platform.select({\n  ios: \'Press Cmd+R to reload,\\n\' +\n    \'Cmd+D or shake for dev menu\',\n  android: \'Double tap R on your keyboard to reload,\\n\' +\n    \'Shake or press menu button for dev menu\',\n});\n\ntype Props = {};\nexport default class App extends Component<Props> {\n\n  constructor(props) {\n    super(props)\n\n  }\n\n  componentWillMount() {\n\n    const config = {\n      host: \'192.168.137.1,  //your hotspot IPv4 address\n      port: 5672,\n      username: \xe2\x80\x98dummy\xe2\x80\x99,   //your rabbitmq management username\n      password: \xe2\x80\x98dummy\xe2\x80\x99,   //your rabbitmq management password\n      virtualhost: \xe2\x80\x98/\xe2\x80\x99\n    };\n\n    let connection = new Connection(config)\n    connection.connect()\n\n    let connected = false;\n    let queue;\n    let exchange;\n\n    connection.on(\'connected\', (event) => {\n\n      queue = new Queue(connection, {\n        name: \'\',\n        passive: false,\n        durable: true,\n\n        exclusive: false,\n        consumer_arguments: { \'x-priority\': 1 }\n      });\n\n      exchange = new Exchange(connection, {\n        name: \'direct_log\',\n        type: \'direct\',\n        durable: false,\n        autoDelete: false,\n        internal: false\n      });\n\n      queue.bind(exchange, \'info\');\n\n      queue.on(\'message\', (data) => {\n\n        if (data.message=="make-call") {\n          const args = {\n            number: \'131\',\n            prompt: false\n          }\n\n          call(args).catch(console.error)\n\n        }\n        if (data.message=="alert-msg") {\n          Toast.show(data.message);\n\n        }\n\n\n\n      });\n\n\n\n    });\n\n    connection.on(\'error\', event => {\n\n      connected = false;\n      console.log(connection);\n      console.log(event);\n      console.log("you are not connected");\n    });\n\n  }\n\n\n  render() {\n\n    return (\n      <View style={styles.container}>\n        <Text style={styles.welcome}>\n          Welcome to React Native!\n        </Text>\n        <Text style={styles.instructions}>\n          To get started, edit App.js\n        </Text>\n        <Text style={styles.instructions}>\n          {instructions}\n        </Text>\n      </View>\n    );\n  }\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    justifyContent: \'center\',\n    alignItems: \'center\',\n    backgroundColor: \'#F5FCFF\',\n  },\n  welcome: {\n    fontSize: 20,\n    textAlign: \'center\',\n    margin: 10,\n  },\n  instructions: {\n    textAlign: \'center\',\n    color: \'#333333\',\n    marginBottom: 5,\n  },\n});\n

\n\n

在配置对象内，可以通过在命令行上的任何位置运行以下命令来获取您的主机 IP

\n\n

ipconfig\n

\n\n

在无线 LAN 适配器本地连接下查找IPv4 地址

\n\n

端口为rabbitmq端口\xe2\x80\x93 5672

\n\n

用户名和密码是您为rabbitmq管理设置的<链接>

\n\n

现在，在根文件夹中创建一个 server.js 文件并粘贴以下代码片段

\n\n

var amqp = require(\'amqplib/callback_api\');\n\namqp.connect(\'amqp://localhost\', function (err, conn) {\n\n    conn.createChannel(function(err, ch){\n\n        var ex = "direct_log";\n        var msg = process.argv.slice(2).join(\' \')|| "hello Joshua";\n        var args = process.argv.slice(2);\n\n        ch.assertExchange(ex, \'direct\', {durable:false})\n        ch.publish(ex, \'info\', new Buffer(msg));\n        console.log("message sent", \'info\', msg);\n\n        setTimeout(function() {conn.close(); process.exit(0) }, 500);\n\n    });\n});\n

\n\n

发送到react-native应用程序的数据将通过sender.js文件发起\n由于消息类型是直接类型仅具有\n相应路由密钥的收件人（信息是路由密钥）。路由密钥通过通道与交换器一起发布，一旦 App.js 文件中的队列与正确的路由密钥一起绑定到交换器，接收者（即 React-Native 应用程序）应该能够根据以下内容执行操作无论传递什么消息。

\n\n

一切设置完毕后，打开命令行的另一个终端并运行

\n\n

rabbitmq-server\n

\n\n

从命令行上的任何位置启动您的react-native应用程序（通过Android模拟器或Android手机）。屏幕上不应出现任何错误。

\n\n

通过浏览器访问您的rabbitmq管理

\n\n

host:15672  e.g  192.168.137.1:15672\n

\n\n

一旦你\xe2\x80\x99重新登录，你应该会在连接选项卡下看到一个连接。\n打开命令行的另一个终端并访问react-native应用程序的根文件夹并运行sender.js文件一个消息

\n\n

node sender.js alert-msg\n

\n\n

上面的命令应该在您的应用程序屏幕上显示一条弹出消息（alert-msg）\n检查您的rabbitmq管理中的队列选项卡，您应该在相应的选项卡下看到传入和传出的数据。\n您还可以发送一条消息打电话给

\n\n

node sender.js make-call\n

\n\n

这应该会在 Android 设备上打开通话菜单。\n一旦上述方法成功，您就可以查看其他库，它们可以帮助您在 Android 设备或 React-Native 应用程序上执行更多功能。

\n\n

为 Swap Space Systems 的实习生团队和高级同事干杯。\n在达到这一点之前，我们已经绞尽脑汁讨论了几周。

\n