用反应阅读卡夫卡的主题

Question

如果这个问题看起来很笼统，我首先要说对不起，但我很难解决这个问题。 所以我会在这里试一试。

我想用 React 构建一个 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”就会被调用。

但我看不出有什么方法可以将它与 React 联系起来。

我什么都愿意，教程，文章，任何东西。

谢谢。

Answer 1

这是您可以做什么的示例。 本质上，让将要呈现消息信息的组件观察kafka consumer ，并将该消息设置为组件状态。 然后，该组件将以新消息处于状态的方式进行渲染（任何时候调用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>
        );
    }
});

Answer 2

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

Answer 3

您可以将 lightstreamer 用于相同的目的，您可以在此处找到更多信息https://lightstreamer.com/doc.htm 。