Monthly Archives: August 2020

Standard

Posted by

Posted on

August 30, 2020

Posted under

Cloud, Kafka

Comments

Leave a comment

Kafka 2.6 Up And Running In Windows 10

Download

https://archive.apache.org/dist/kafka/2.6.0/

Make sure to download the binaries otherwise you would get the following error

Classpath is empty. Please build the project first e.g. by running ‘gradlew jarAll’

Install

Unzip it in C:\ drive and rename the folder to shorter name (ex: kafka)

You may get following error, if not installed in c:\ drive

input line is too long when starting kafka

Create two folders kafka-logs and zookeeper under KAFKA_HOME

Update config\server.properties as follows

log.dirs=C:/kafka/kafka-logs

Update config\zookeeper.properties as follows

dataDir=C:/kafka/zookeeper

Create file bin\windows\start-kafka.bat

Note : Line #1 (Setting Java home correctly) is required otherwise you would get the following error

The system cannot find the path specified

set JAVA_HOME=%ProgramFiles%\Java\jdk1.8.0_261
start zookeeper-server-start.bat ..\..\config\zookeeper.properties

TIMEOUT 10

start kafka-server-start.bat ..\..\config\server.properties

Add KAFKA_HOME\bin\windows to PATH environment variables

In Admin mode start command prompt, and execute the following

start-kafka.bat

Zookeeper and kafka started

List The Topics

kafka-topics   --bootstrap-server localhost:9092   --list

Create Topic

Lets create topic quickstart-events

kafka-topics --create --topic quickstart-events --bootstrap-server localhost:9092

Describe Topic

kafka-topics --describe --topic quickstart-events --bootstrap-server localhost:9092

Produce Events

kafka-console-producer --topic quickstart-events --bootstrap-server localhost:9092

Consume Events

kafka-console-consumer --topic quickstart-events --from-beginning --bootstrap-server localhost:9092

Delete Topic

The following command will have no effect if in the Kafka server.properties file, delete.topic.enable is not set to be true

kafka-topics --bootstrap-server localhost:9092 --delete --topic quickstart-events

Java Client

Refer the examples for Java Client

For more information on the APIs, see Apache documentation on the Producer API and Consumer API.

References

Also See

Standard

Posted by

Posted on

August 3, 2020

Posted under

JavaScript, ReactJs

Comments

Leave a comment

Elegantly Consuming data In React Components Using Context API – Provider / Consumer Pattern


How do we make sure every component get the data they need ?

Pass data using properties

Consuming data using React Context API

Create Context

Context basically exposes state (Data) and the API which operates on the data to be consumed by Components and Context has to operate on a specific functional area covering set up components, for Example AuthContext deals with authentication, DataContext provides data for the application it can fine-grained level as well for example ToastContext provides a way to add Notification from anywhere in the application.

Refer this as an example

Provide Context

Providers are basically singletons, and are responsible for interaction with API and updating the state.

Step 1: Create Context

export const AuthContext = React.createContext();

Step 2: Populate Initial State

const initialState = {
  isAuthenticated: false,
  userId: "",
  roles: [],
  flash: ""
};

Step 3 : Expose data and API

constructor(props) {
    super(props);

    this.state = {
      ...initialState,
      doAuthRedirect: (idp, realm) => {
        return this.doAuthRedirect(idp, realm);
      },
      getAuthToken: (code, idp, realm) => {
        return this.getAuthToken(code, idp, realm);
      },
      reAuth: () => {
        return this.reAuth();
      },
      logout: () => {
        return this.logout();
      }
    };
  }

Consume Context Data

The following example shows how data can be consumed within a Component

export class Content extends Component {

  render() {
    
    return (<ToastConsumer>
      {({add}) => ( <div title="Notes" onclick= {() => this.copyToClipboard(add)}>
        <NotesIcon />
      </div>)}
    </ToastConsumer>
    )
  }
}

In the following snippet, App is is provider for AuthContext, DataContext and ToastProvider, and App is consumer for DataContext and AuthContext and not for ToastContext

import React from "react";

import "./App.css";
import { AuthContext, AuthProvider } from "../../providers/AuthProvider";
import { DataContext, DataProvider } from "../../providers/DataProvider";
import {ToastProvider} from 'react-toast-notifications';
import { Content } from "../Content/Content";
import {Timeout} from '../Timeout/Timeout'

function App() {
  return (
    <AuthProvider>
      <AuthContext.Consumer>
        {authContext => (
          <DataProvider authContext={authContext}>
            <DataContext.Consumer>
              {dataContext => (
                <ToastProvider>
                  <React.Fragment>
                    <div className="App">
                      <Content key={"app-1"} authContext={authContext} dataContext={dataContext}  />
                    </div>
                    <Timeout />
                  </React.Fragment>
                </ToastProvider>
              )}
            </DataContext.Consumer>
          </DataProvider>
        )}
      </AuthContext.Consumer>
    </AuthProvider>
  );
}
export default App;

Refer this as an example

References