Question

我正在尝试将RabbitMQ与React Native一起使用。我无法找到关于这个主题的例子。我跟着这个伟大的 answer 我从我的模拟器连接到服务器。我正试着用rabbitmq hello world tutorial从服务器发送一条简单的消息。消息进入队列，我可以在浏览器的管理选项卡上看到它。我试着用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的帖子应用程序到rabbitmq服务器link，这篇文章回答了如何发送消息或控制本机应用程序的操作的问题。如果没有，请尝试查看帖子，因为我将参考上一篇文章中解释的一些细节。

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

在命令行上访问react-native app文件夹并单独提取以下库

npm install react-native-simple-toast -–save

npm install react-native-phone-call --save

npm install amqplib -–save

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

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

在您的react-native项目文件夹中，编辑 App.js 文件，使其看起来像下面的代码段

/**
 * 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

ipconfig

在无线LAN适配器本地区域连接

下查找 IPv4地址

该端口是rabbitmq端口 - 5672

用户名和密码是您为rabbitmq管理设置的用户名和密码＆lt; link＆gt;

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

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 App应该能够执行基于的操作无论传递什么信息。

设置好所有内容后，打开命令行的另一个终端并运行

rabbitmq-server

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

通过

在您的浏览器上访问您的rabbitmq管理

host:15672  e.g  192.168.137.1:15672

登录后，您应该会在“连接”标签下看到连接。打开命令行的另一个终端并访问react-native应用程序的根文件夹并运行sender.js文件以及消息

node sender.js alert-msg

以上命令应在您的应用屏幕上显示弹出消息（ alert-msg ）检查rabbitmq管理中的队列选项卡，您应该在相应的选项卡下看到传入和传出的数据。您也可以使用

发送电话留言

node sender.js make-call

这应该打开Android设备上的通话菜单。一旦上述方法解决了，您可以查看其他库，它们可以帮助您在Android设备或react-native应用程序上执行更多功能。

为实习生团队和Swap Space Systems的高级同事干杯。在我们达到这一点之前，我们将我们的头撞了几个星期。

RabbitMQ React Native发送示例

1 个答案: