用反應閱讀卡夫卡的主題

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 。