{"id":654,"date":"2024-07-03T14:11:20","date_gmt":"2024-07-03T14:11:20","guid":{"rendered":"https:\/\/zahiralam.com\/blog\/?p=654"},"modified":"2024-07-28T16:52:02","modified_gmt":"2024-07-28T16:52:02","slug":"integrating-kafka-with-react-and-node-js-for-real-time-user-interaction-tracking","status":"publish","type":"post","link":"https:\/\/zahiralam.com\/blog\/integrating-kafka-with-react-and-node-js-for-real-time-user-interaction-tracking\/","title":{"rendered":"Integrating Kafka with React and Node.js for Real-Time User Interaction Tracking"},"content":{"rendered":"\n<p>In this tutorial, we will explore how to integrate Apache Kafka with React and Node.js to monitor user interactions in real-time, specifically tracking selections from a dropdown menu.\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"1024\" src=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/07\/dropdown2.webp\" alt=\"\" class=\"wp-image-660\" srcset=\"https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/07\/dropdown2.webp 1024w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/07\/dropdown2-300x300.webp 300w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/07\/dropdown2-150x150.webp 150w, https:\/\/zahiralam.com\/blog\/wp-content\/uploads\/2024\/07\/dropdown2-768x768.webp 768w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>\n\n\n\n<h3 class=\"wp-block-heading\">What Are Producers and Consumers?<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Producer<\/strong>: In our example, the producer is the React front-end. It captures the dropdown selection and sends this data to Kafka.<\/li>\n\n\n\n<li><strong>Consumer<\/strong>: The Node.js backend acts as the consumer, processing the messages from Kafka.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Setting Up Your Environment<\/strong><\/h2>\n\n\n\n<p>1<strong>. Install Kafka<\/strong>:  Please refer to the installation guide in the article below to set up Kafka.\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-zahirs-blog wp-block-embed-zahirs-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"1K6IVld5Wr\"><a href=\"https:\/\/zahiralam.com\/blog\/how-to-install-and-set-up-apache-kafka-on-ubuntu-a-step-by-step-guide\/\">How to Install and Set Up Apache Kafka on Ubuntu 24.04: A Step-by-Step Guide<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;How to Install and Set Up Apache Kafka on Ubuntu 24.04: A Step-by-Step Guide&#8221; &#8212; Zahirs Blog\" src=\"https:\/\/zahiralam.com\/blog\/how-to-install-and-set-up-apache-kafka-on-ubuntu-a-step-by-step-guide\/embed\/#?secret=fcrMnnMfKQ#?secret=1K6IVld5Wr\" data-secret=\"1K6IVld5Wr\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>2. <strong>Create a Kafka Topic<\/strong>: Set up a topic named &#8220;dropdown_activity&#8221; using the command:\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-1\">kafka-topics.sh --create --topic dropdown_activity --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#kafka-topics.sh%20--create%20--topic%20dropdown_activity%20--bootstrap-server%20localhost%3A9092%20--replication-factor%201%20--partitions%201\">\n                            <button class=\"copy-button\" data-label=\"kafka-topics.sh --create --topic dropdown_activity --bootstrap-server localhost:9092 --replication-factor 1 --partitions 1\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Building the Frontend<\/strong> <\/h2>\n\n\n\n<p>3. <strong>React Setup<\/strong>:\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up a basic React application.<\/li>\n\n\n\n<li>Implement a dropdown component:<\/li>\n<\/ul>\n\n\n\n<p><strong>Dropdown Menu<\/strong>: The dropdown component allows users to select an option.\n\n\n\n<p><strong>Event Handling<\/strong>: When an option is selected, the data is sent to Kafka using a Kafka producer.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-2\">import React, { useState } from &#039;react&#039;;\nimport kafka from &#039;kafka-node&#039;;\n\nconst Dropdown = () =&gt; {\n  const [selectedValue, setSelectedValue] = useState(&#039;&#039;);\n\n  \/\/ Configure Kafka producer\n  const client = new kafka.KafkaClient({ kafkaHost: &#039;localhost:9092&#039; });\n  const producer = new kafka.Producer(client);\n\n  const handleDropdownChange = (event) =&gt; {\n    setSelectedValue(event.target.value);\n    const payloads = [\n      {\n        topic: &#039;dropdown_activity&#039;,\n        messages: event.target.value.toString(),\n      },\n    ];\n\n    \/\/ Send the selected value to Kafka\n    producer.send(payloads, (err, data) =&gt; {\n      if (err) {\n        console.error(&#039;Error sending data to Kafka:&#039;, err);\n      } else {\n        console.log(&#039;Data sent to Kafka:&#039;, data);\n      }\n    });\n  };\n\n  return (\n    &lt;select value={selectedValue} onChange={handleDropdownChange}&gt;\n      &lt;option value=&quot;&quot;&gt;Select an option&lt;\/option&gt;\n      &lt;option value=&quot;option1&quot;&gt;Option 1&lt;\/option&gt;\n      &lt;option value=&quot;option2&quot;&gt;Option 2&lt;\/option&gt;\n      &lt;option value=&quot;option3&quot;&gt;Option 3&lt;\/option&gt;\n    &lt;\/select&gt;\n  );\n};\n\nexport default Dropdown;<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#import%20React%2C%20%7B%20useState%20%7D%20from%20%27react%27%3B%0Aimport%20kafka%20from%20%27kafka-node%27%3B%0A%0Aconst%20Dropdown%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20const%20%5BselectedValue%2C%20setSelectedValue%5D%20%3D%20useState%28%27%27%29%3B%0A%0A%20%20%2F%2F%20Configure%20Kafka%20producer%0A%20%20const%20client%20%3D%20new%20kafka.KafkaClient%28%7B%20kafkaHost%3A%20%27localhost%3A9092%27%20%7D%29%3B%0A%20%20const%20producer%20%3D%20new%20kafka.Producer%28client%29%3B%0A%0A%20%20const%20handleDropdownChange%20%3D%20%28event%29%20%3D%3E%20%7B%0A%20%20%20%20setSelectedValue%28event.target.value%29%3B%0A%20%20%20%20const%20payloads%20%3D%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20topic%3A%20%27dropdown_activity%27%2C%0A%20%20%20%20%20%20%20%20messages%3A%20event.target.value.toString%28%29%2C%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%5D%3B%0A%0A%20%20%20%20%2F%2F%20Send%20the%20selected%20value%20to%20Kafka%0A%20%20%20%20producer.send%28payloads%2C%20%28err%2C%20data%29%20%3D%3E%20%7B%0A%20%20%20%20%20%20if%20%28err%29%20%7B%0A%20%20%20%20%20%20%20%20console.error%28%27Error%20sending%20data%20to%20Kafka%3A%27%2C%20err%29%3B%0A%20%20%20%20%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%20%20console.log%28%27Data%20sent%20to%20Kafka%3A%27%2C%20data%29%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D%29%3B%0A%20%20%7D%3B%0A%0A%20%20return%20%28%0A%20%20%20%20%3Cselect%20value%3D%7BselectedValue%7D%20onChange%3D%7BhandleDropdownChange%7D%3E%0A%20%20%20%20%20%20%3Coption%20value%3D%22%22%3ESelect%20an%20option%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%20value%3D%22option1%22%3EOption%201%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%20value%3D%22option2%22%3EOption%202%3C%2Foption%3E%0A%20%20%20%20%20%20%3Coption%20value%3D%22option3%22%3EOption%203%3C%2Foption%3E%0A%20%20%20%20%3C%2Fselect%3E%0A%20%20%29%3B%0A%7D%3B%0A%0Aexport%20default%20Dropdown%3B\">\n                            <button class=\"copy-button\" data-label=\"import React, { useState } from &#039;react&#039;;\nimport kafka from &#039;kafka-node&#039;;\n\nconst Dropdown = () =&gt; {\n  const [selectedValue, setSelectedValue] = useState(&#039;&#039;);\n\n  \/\/ Configure Kafka producer\n  const client = new kafka.KafkaClient({ kafkaHost: &#039;localhost:9092&#039; });\n  const producer = new kafka.Producer(client);\n\n  const handleDropdownChange = (event) =&gt; {\n    setSelectedValue(event.target.value);\n    const payloads = [\n      {\n        topic: &#039;dropdown_activity&#039;,\n        messages: event.target.value.toString(),\n      },\n    ];\n\n    \/\/ Send the selected value to Kafka\n    producer.send(payloads, (err, data) =&gt; {\n      if (err) {\n        console.error(&#039;Error sending data to Kafka:&#039;, err);\n      } else {\n        console.log(&#039;Data sent to Kafka:&#039;, data);\n      }\n    });\n  };\n\n  return (\n    &lt;select value={selectedValue} onChange={handleDropdownChange}&gt;\n      &lt;option value=&quot;&quot;&gt;Select an option&lt;\/option&gt;\n      &lt;option value=&quot;option1&quot;&gt;Option 1&lt;\/option&gt;\n      &lt;option value=&quot;option2&quot;&gt;Option 2&lt;\/option&gt;\n      &lt;option value=&quot;option3&quot;&gt;Option 3&lt;\/option&gt;\n    &lt;\/select&gt;\n  );\n};\n\nexport default Dropdown;\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Integrating the Backend<\/strong> <\/h2>\n\n\n\n<p>4. <strong>Node.js Backend<\/strong>:\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up a Kafka consumer in your Node.js backend:<\/li>\n<\/ul>\n\n\n\n<p><strong>Kafka Consumer<\/strong>: This listens to the <code>dropdown_activity<\/code> topic and processes the received messages.\n\n\n\n<div class=\"code-block-container\">\n                        <pre class=\"wp-block-code\"><code id=\"code-3\">const kafka = require(&#039;kafka-node&#039;);\nconst client = new kafka.KafkaClient({ kafkaHost: &#039;localhost:9092&#039; });\nconst consumer = new kafka.Consumer(client, [{ topic: &#039;dropdown_activity&#039;, partition: 0 }]);\n\nconsumer.on(&#039;message&#039;, (message) =&gt; {\n  console.log(&#039;Dropdown selection received:&#039;, message.value);\n  \/\/ Additional processing can be done here\n});\n\nconsumer.on(&#039;error&#039;, (err) =&gt; {\n  console.error(&#039;Error in Kafka consumer:&#039;, err);\n});<\/code><\/pre>\n                        <amp-iframe sandbox=\"allow-scripts\" width=\"94\" height=\"72\" frameborder=\"0\" \n                                    src=\"https:\/\/zahiralam.com\/blog\/wp-content\/plugins\/amp-copy-code-button\/copier.html#const%20kafka%20%3D%20require%28%27kafka-node%27%29%3B%0Aconst%20client%20%3D%20new%20kafka.KafkaClient%28%7B%20kafkaHost%3A%20%27localhost%3A9092%27%20%7D%29%3B%0Aconst%20consumer%20%3D%20new%20kafka.Consumer%28client%2C%20%5B%7B%20topic%3A%20%27dropdown_activity%27%2C%20partition%3A%200%20%7D%5D%29%3B%0A%0Aconsumer.on%28%27message%27%2C%20%28message%29%20%3D%3E%20%7B%0A%20%20console.log%28%27Dropdown%20selection%20received%3A%27%2C%20message.value%29%3B%0A%20%20%2F%2F%20Additional%20processing%20can%20be%20done%20here%0A%7D%29%3B%0A%0Aconsumer.on%28%27error%27%2C%20%28err%29%20%3D%3E%20%7B%0A%20%20console.error%28%27Error%20in%20Kafka%20consumer%3A%27%2C%20err%29%3B%0A%7D%29%3B\">\n                            <button class=\"copy-button\" data-label=\"const kafka = require(&#039;kafka-node&#039;);\nconst client = new kafka.KafkaClient({ kafkaHost: &#039;localhost:9092&#039; });\nconst consumer = new kafka.Consumer(client, [{ topic: &#039;dropdown_activity&#039;, partition: 0 }]);\n\nconsumer.on(&#039;message&#039;, (message) =&gt; {\n  console.log(&#039;Dropdown selection received:&#039;, message.value);\n  \/\/ Additional processing can be done here\n});\n\nconsumer.on(&#039;error&#039;, (err) =&gt; {\n  console.error(&#039;Error in Kafka consumer:&#039;, err);\n});\"  placeholder disabled>Copy<\/button>\n                        <\/amp-iframe>\n                    <\/div>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Frequently Asked Questions (FAQs)<\/h2>\n\n\n\n<p>Here are some important FAQs for integrating Kafka with React and Node.js:\n\n\n\n<p>1. <strong>What is Kafka?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kafka is a distributed event streaming platform used for high-performance data pipelines, streaming analytics, and data integration.<\/li>\n<\/ul>\n\n\n\n<p>2. <strong>Why use Kafka with React and Node.js?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Using Kafka with React and Node.js allows for real-time data processing and responsiveness in web applications, enhancing user interaction monitoring and data flow management.<\/li>\n<\/ul>\n\n\n\n<p>3. <strong>How do I set up Kafka in a React\/Node.js application?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set up Kafka on your server, configure Kafka producers in Node.js to send messages, and use React to trigger these messages based on user interactions.<\/li>\n<\/ul>\n\n\n\n<p>4. <strong>What are Kafka topics?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kafka topics are categories or feeds to which records are published. They are multi-subscriber, meaning they can have multiple consumers.<\/li>\n<\/ul>\n\n\n\n<p>5. <strong>How can I ensure message delivery in Kafka?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use configurations like replication factors and acknowledgments to ensure high availability and durability of messages.<\/li>\n<\/ul>\n\n\n\n<p>6. <strong>Can I scale my Kafka usage with React and Node.js applications?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Yes, Kafka is designed to scale horizontally, allowing you to add more brokers or partitions as your application&#8217;s data throughput increases.<\/li>\n<\/ul>\n\n\n\n<p>7. <strong>What are some common issues when integrating Kafka with web applications?<\/strong>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Common issues include message duplication, data loss, and connectivity problems between the clients and the Kafka cluster. Proper configuration and regular monitoring are essential.<\/li>\n<\/ul>\n\n\n\n<p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>This tutorial demonstrates the powerful combination of Kafka, React, and Node.js to track and process user interactions in real-time. By integrating these technologies, developers can enhance their applications with real-time analytics and responsive features.\n\n\n\n<p>This complete article provides a clear guide from setting up Kafka to implementing real-time interaction tracking in a web application, making it accessible even for those new to these technologies.\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, we will explore how to integrate Apache Kafka with React and Node.js to monitor user interactions in real-time, specifically tracking selections from [&#8230;]<\/p>\n","protected":false},"author":1,"featured_media":800,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[74],"tags":[194,201,197,55,199,200],"class_list":["post-654","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-apache-kafka","tag-data-streaming","tag-event-streaming","tag-nodejs","tag-reactjs","tag-real-time-analytics"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/654","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/comments?post=654"}],"version-history":[{"count":5,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions"}],"predecessor-version":[{"id":801,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/posts\/654\/revisions\/801"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media\/800"}],"wp:attachment":[{"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/media?parent=654"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/categories?post=654"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zahiralam.com\/blog\/wp-json\/wp\/v2\/tags?post=654"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}