Kafka Chat GUI Application

Hire Xamta Infotech for a project / Long term | Startup Hire

Creating a complex chat application with Kafka as the messaging backbone involves several components: Kafka producer, Kafka consumer, and an Electron.js frontend for sending and receiving messages. Here's a step-by-step guide to implementing a chat application using Kafka and Electron.js.

we are happy to serve you

Let's start a project.

Prerequisites:

  1. Install Apache Kafka on your system and start the Kafka server.
  2. Set up a Kafka topic named chat-messages.

Kafka Producer (Node.js):

const Kafka = require('kafkajs');

const kafka = new Kafka({
  clientId: 'chat-app-producer',
  brokers: ['localhost:9092'], // Replace with your Kafka broker address
});

const producer = kafka.producer();

async function runProducer() {
  await producer.connect();

  // Function to send messages to Kafka topic
  async function sendMessage(message) {
    await producer.send({
      topic: 'chat-messages',
      messages: [{ value: message }],
    });
  }

  // Example usage: sendMessage('Hello, Kafka!');
}

runProducer().catch(console.error);

Kafka Consumer (Node.js):

const Kafka = require('kafkajs');

const kafka = new Kafka({
  clientId: 'chat-app-consumer',
  brokers: ['localhost:9092'], // Replace with your Kafka broker address
});

const consumer = kafka.consumer({ groupId: 'chat-group' });

async function runConsumer() {
  await consumer.connect();
  await consumer.subscribe({ topic: 'chat-messages', fromBeginning: true });

  await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      // Handle incoming messages from Kafka topic
      const value = message.value.toString();
      console.log(`Received message: ${value}`);
      // Implement logic to display messages in the chat UI
    },
  });
}

runConsumer().catch(console.error);

Electron.js Frontend:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kafka Chat App</title>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="messageInput" placeholder="Type your message...">
  <button onclick="sendMessage()">Send</button>
  <script src="renderer.js"></script>
</body>
</html>

renderer.js:

const { ipcRenderer } = require('electron');

ipcRenderer.on('message', (event, message) => {
  const messagesDiv = document.getElementById('messages');
  messagesDiv.innerHTML += `<p>${message}</p>`;
});

function sendMessage() {
  const messageInput = document.getElementById('messageInput');
  const message = messageInput.value;
  if (message) {
    // Send message to Kafka producer
    ipcRenderer.send('send-message', message);
    messageInput.value = '';
  }
}

Main Electron.js Process:

const { app, BrowserWindow, ipcMain } = require('electron');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadFile('index.html');

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

app.on('activate', function () {
  if (mainWindow === null) createWindow();
});

const Kafka = require('kafkajs');

const kafka = new Kafka({
  clientId: 'chat-app',
  brokers: ['localhost:9092'], // Replace with your Kafka broker address
});

const producer = kafka.producer();
const consumer = kafka.consumer({ groupId: 'chat-group' });

async function runProducer() {
  await producer.connect();
}

async function runConsumer() {
  await consumer.connect();
  await consumer.subscribe({ topic: 'chat-messages', fromBeginning: true });

  await consumer.run({
    eachMessage: async ({ topic, partition, message }) => {
      const value = message.value.toString();
      // Send received message to renderer process
      mainWindow.webContents.send('message', value);
    },
  });
}

runProducer().catch(console.error);
runConsumer().catch(console.error);

// Listen for send-message event from renderer process
ipcMain.on('send-message', async (event, message) => {
  try {
    // Send message to Kafka topic
    await producer.send({
      topic: 'chat-messages',
      messages: [{ value: message }],
    });
  } catch (error) {
    console.error(error);
  }
});

In this example, the Electron main process establishes connections with Kafka as both a producer and a consumer. Messages received from the Kafka topic are sent to the renderer process using ipcRenderer. The renderer process handles user input and sends messages to the Kafka topic through the main process.

Ensure you have the necessary packages installed:

npm install electron kafkajs --save

we are happy to serve you

Let's start a project.

Please replace 'localhost:9092' with your Kafka broker address. Also, make sure your Kafka server is running and accessible.

This example provides a basic foundation for a chat application using Kafka and Electron.js. You can further enhance it by adding user authentication, message history, and other features based on your requirements.


Kakfa Better with Transaction Oriented Startup Platform
xamta infotech, your business partner