阅读kafka的主题与反应

Question

我首先要说的是,如果这个问题看起来很通用,我很抱歉,但是我很难解决这个问题.所以我会在这里试一试.

我想用反应来构建一个kafka主题的使用者,所以每当我的主题中有新消息时,它就会呈现我不知道类似网格的东西.

我已经有了消费者的代码:

var kafka = require('kafka-node'),
Consumer = kafka.Consumer,
client = new kafka.Client(),
consumer = new Consumer(
    client,
    [
        { topic: 'logs', partition: 0 }
    ],
    {
        autoCommit: false
    }
),
Producer = kafka.Producer,
client = new kafka.Client(),
producer = new Producer(client);

consumer.on('message', function (message) {
    console.log(message);
});

只要有新消息,就会调用消费者的"on"事件.

但我无法通过反应找到一种方法.

我需要任何东西,教程,文章,任何东西.

谢谢.

Answer 1

您应该使用 websocket Kafka 代理，如https://github.com/Effyis/kafka2websocket或https://github.com/Microsoft/kafka-proxy-ws，因为，AFAIK，还没有浏览器兼容的客户端可用。之后，您就可以通过 websockets 与 Kafka 进行交互了

Answer 2

这是您可以执行的操作的示例。本质上，让渲染消息信息的组件观察 kafkaconsumer并在组件的状态中设置该消息。然后，组件将在状态中呈现新消息（任何时候调用 setState 都会导致组件更新自身）。

这假设您想要显示消息列表，并且 Consumer.on 回调提供了一条需要添加到列表中的消息。

var MessageDetails = React.createClass({
    //create a render function for this to render the details about a message
});

var MessageDisplay = React.createClass({
    getInitialState: function() {
        return { messages: [] };
    },

    onComponentDidMount: function() {
        consumer.on('message', function (message) {
            // This updates the state so component will re-render
            var messageList = this.state.messages;
            messageList.push(message);
            this.setState({messages: messageList});
        }.bind(this));
    },

    onComponentWillUnmount: function() {
        // Unsubscribe from the consume here.
    },

    render: function() {
        var messageList = this.state.messages.map(function(message) {
            return (<MessageDetails id={message.id} etc. />);
        });
        return (
          <div className="commentBox">
              {messageList}
          </div>
        );
    }
});