用react阅读kafka的话题 [英] Reading a topic of kafka with react

问题描述

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

我想使用 react 构建一个 kafka 主题的使用者，因此每次我的主题中有新消息时，它都会呈现我不知道的类似网格的东西.

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

var kafka = require('kafka-node'),消费者 = kafka.Consumer,客户端 = 新 kafka.Client(),消费者 = 新消费者(客户，[{主题:'日志'，分区:0}],{自动提交:假}),生产者 = kafka.Producer,客户端 = 新 kafka.Client(),生产者 = 新生产者(客户)；消费者.on('消息'，函数(消息){控制台日志(消息)；});

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

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

我准备好了任何东西，教程、文章，任何东西.

谢谢.

解决方案

以下是您可以执行的操作的示例.本质上，让将呈现消息信息的组件观察 kafka consumer 并在组件的状态中设置该消息.然后组件将使用状态中的新消息进行渲染(任何时候 setState 被调用，都会导致组件更新自身).

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

var MessageDetails = React.createClass({//为此创建一个渲染函数以渲染有关消息的详细信息});var MessageDisplay = React.createClass({getInitialState:函数(){返回{消息:[]}；},onComponentDidMount:函数(){消费者.on('消息'，函数(消息){//这会更新状态，因此组件将重新渲染var messageList = this.state.messages;messageList.push(message);this.setState({messages: messageList});}.bind(this));},onComponentWillUnmount:函数(){//取消订阅这里的消费.},渲染:函数(){var messageList = this.state.messages.map(function(message) {return (<MessageDetails id={message.id} etc./>);});返回 (<div className="commentBox">{消息列表}

);}});

I'll start by saying I'm sorry if this question looks generic, but I'm having trouble to solve this. So I'll give it a shot here.

I want to build a consumer of a kafka topic with react, so it'll render I don't know something like a grid everytime there's a new message in my topic.

I already have the code of the consumer:

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);
});

anytime there's a new message the consumer's event "on" will be called.

But I can't see a way to hook it up with react.

I'm up for anything, a tutorial, article, anything at all.

Thanks.

解决方案

Here's an example of what you could do. In essence, have the component that will render the message information observe the kafka consumer and set that message in the component's state. The component will then render with the new message in state (any time setState is called, causes the component to update itself).

This assumes you want to display a list of messages and the consumer.on callback provides a single message that needs to be added to the list.

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>
        );
    }
});

这篇关于用react阅读kafka的话题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！