patternfly-kafkareact-notifications
This library is custom react context for handling real time messaging over secured and unsecured websocket
protocol between ReactJS
and
any given Apache Kafka
instances. For it to function its advised to use Patternfly 4 as
css base framework. It could still be installed on other existing frameworks but would be creating and extra layer css framework on top of another.
Installation
npm -i patternfly-kafkareact-notifications --save
or
yarn add patternfly-kafkareact-notifications
This is a custom react context component, to be used as an exchange point between Kafka and any given react application. In order for this to work, it is required that the context be placed as a canopy to the component that will be consuming incoming messages. Ensure that your application is using React + Typescript.
- @patternfly/react-core
- @patternfly/react-icons
- websocket && @types/websocket
- momentjs && @types/momentjs
Install dependencies:
With Yarn
yarn add @patternfly/react-core @patternfly/react-icons websocket @types/websocket momentjs @types/momentjs
With npm
npm install @patternfly/react-core @patternfly/react-icons websocket @types/websocket momentjs @types/momentjs --save
Implementation
Once that is done, in order to start receiving messages from Kafka backend, it is required to pass in a couple of props.
-
lang: This component property will be the indicative of the preferred language by default its english, for the moment you can choose between en and french "en" | "fr"
-
uri: Expect web socket uri to connect to, channel where incoming messages will be streaming in through.
-
isDrawer: this property is called when expected view chosen should be a drawer or list of pop ups. By default, the property is set to false if not included in the component.
-
appMessagesLocation: This is an optional link property, in case a view or page is created listing out all messages in the main app pass in the link into this parameter it will display the see all messages. If clicked on the browser would redirect to the given link.
Implementationkafka_sockets
- In your
App.jsx
or preferred child component of choice add the following:
import {KafkaWSSContext} from "patternfly-kafkareact-notifications";
import {NotificationBadge} from "@patternfly/react-core";
const {
wss,
setWss,
isOpenDrawer,
setIsOpenDrawer
} = useContext(KafkaWSSContext);
const countUnread = () => {
const messagesCount = wss.messages.filter((message) => message["is_read"] === false)
const notificationCount = wss.notifications.filter((notification) => notification["is_read"] === false)
return messagesCount.length + notificationCount.length
}
useEffect(() => {
const temp = {
messages: [],
notifications: [ { "sender": "Sam Smith","group": "admin","receiver": "public@bara.ca", "message": "this is a test from kafka-web-proxy", "date": "1 juin 2021 09:39", "type": "danger", "variant": "message", "is_read": true }, { "sender": "Sam Smith","group": "admin","receiver": "public@bara.ca", "message": "this is a test from kafka-web-proxy", "date": "1 juin 2021 09:39", "type": "success", "variant": "message", "is_read": true }, { "sender": "Sam Smith","group": "admin","receiver": "public@bara.ca", "message": "this is a test from kafka-web-proxy", "date": "1 juin 2021 09:38", "type": "info", "variant": "message", "is_read": false }, { "sender": "Sam Smith","group": "admin","receiver": "public@bara.ca", "message": "this is a test from kafka-web-proxy", "date": "1 juin 2021 09:38", "type": "info", "variant": "message", "is_read": false }, { "sender": "Sam Smith","group": "admin","receiver": "public@bara.ca", "message": "this is a test from kafka-web-proxy", "date": "1 juin 2021 09:35", "type": "info", "variant": "message", "is_read": true } ]
}
setWss(temp)
// eslint-disable-next-line
}, [])
<NotificationBadge
variant={countUnread() > 0 ? "unread" : "read"}
onClick={() => setIsOpenDrawer(!isOpenDrawer)}
style={{ backgroundColor : '#555', color : '#fff' }}
aria-label="messages-notifications"
count={countUnread()}
/>
- Create a
patternfly-kafkareact-notifications.css
, the name is no specific. Add the following content to the file, and import this file in yourindex.tsx
or parent directory where needed.
.prkw-container {
position: absolute;
height: 100vh;
right: 0;
padding: 10px;
width: 40%;
overflow: hidden;
z-index: 3;
}
.prkw-alert {
width: 100%;
right: 4px;
margin-top: 8px;
float: right;
overflow: hidden;
padding: 1rem;
height: 140px;
text-overflow: ellipsis;
}
.prkw-drawer {
position: fixed;
height: 100vh;
right: 0;
width: 40%;
overflow: hidden;
z-index: 2;
box-shadow: 0 5px 7px 6px rgba(0,0,0,0.15);
}
@media screen and (max-width: 991px) {
.prkw-container {
width: 100%;
box-shadow: none;
}
.prkw-drawer {
width: 100%;
}
}
- In your
index.jsx
or parent component of choice add the following:
import './patternfly-kafkareact-notifications.css';
import KafkaWssNotifications from 'patternfly-kafkareact-notifications';
const clientId = "xxxxxxx"
const topic = "xxxxxxx"
<KafkaWssNotifications
isDrawer * Optional
lang={"fr"} * Mandatory
uri={`wss://xxxxxxxxxx.com/socket/out?clientId=${clientId}&topic=${topic}&valType=json`} * Mandatory
appMessagesLocation={"https://google.com"} * Optional
>
<App/>
</KafkaWssNotifications>
Expected backend payload
When sending a json payload from your backend, through the following link send as request the frame below:
- LINK: wscat -c "wss://xxxxxx.xxx/socket/in?clientId=clickid&topic=clickid-preproduction&valType=json"
- Request Payload:
{ "value": { "value": {"type":"info", "variant":"message", "sender": "Sam Smith", "group": "admin","receiver": "public@bara.ca", "message":"this is a test from kafka-web-proxy"}, "format": "json" } }
There are two variant types: notification and message, if a request payload does not contain one of the two, the response will bo be included in the list of messages. So the parameter variant is important. Also, as request payload it will be required to provide either success, danger or info for the card to be differentiated base on their colors.
- varaint: notification | message
- types: info | danger | success
- message: string
- sender: string
- receiver: string
- group: string
- format: string | json