用react阅读Kafka的主题

krcsximq  于 2021-06-08  发布在  Kafka
关注(0)|答案(2)|浏览(508)

如果这个问题看起来很普通,我会首先说对不起,但是我很难解决这个问题。所以我来试试。
我想用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);
});

任何时候只要有新消息,消费者的活动“开”就会被调用。
但我找不到办法把它和react联系起来。
我什么都可以,教程,文章,什么都可以。
谢谢。

af7jpaap

af7jpaap1#

你应该像这样使用websocket kafka代理https://github.com/effyis/kafka2websocket 或者https://github.com/microsoft/kafka-proxy-ws,因为目前还没有与浏览器兼容的客户端。之后,你就可以通过websockets与Kafka互动了

2ul0zpep

2ul0zpep2#

下面是一个你能做的例子。本质上,让呈现消息信息的组件观察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>
        );
    }
});

相关问题