Skip to content
This repository was archived by the owner on Aug 4, 2025. It is now read-only.

Commit 0a6fcde

Browse files
authored
feat: updated Readme.md + fixing application node bug (#193)
* fixing subscribe node error when creation of flow from yaml file * Update README.md added the mqtt.yaml file and demo video * updating the readme.md file
1 parent 00e14b3 commit 0a6fcde

File tree

7 files changed

+84
-17
lines changed

7 files changed

+84
-17
lines changed

Desktop/src/parser/flowGenerator.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { AsyncAPIDocument, Channel, Operation, Message } from '@asyncapi/parser';
22
import { Edge, Node } from 'reactflow';
3+
import { connect } from 'mqtt';
34

45
interface FileredChannel {
56
channel: string;
@@ -8,6 +9,16 @@ interface FileredChannel {
89
messagesModel: Message[];
910
}
1011

12+
function createMqttClient() {
13+
14+
const client = connect('mqtt://localhost:1883', {
15+
manualConnect: true,
16+
});
17+
18+
return client;
19+
20+
}
21+
1122
//given the operation publish/subscribe we will extract the channels realted to it from the spec
1223
function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
1324
const channels = spec.channels();
@@ -30,6 +41,8 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
3041
function buildFlowElementsForOperation({ operation, spec, applicationLinkType, data }: { operation: 'publish' | 'subscribe'; spec: AsyncAPIDocument; applicationLinkType: string, data: any }): Array<{ node: Node, edge: Edge }> {
3142
return getChannelsByOperation(operation, spec).reduce((nodes: any, channel) => {
3243
const { channelModel, operationModel, messagesModel } = channel;
44+
45+
const mqttClient = createMqttClient();
3346

3447
const node: Node = {
3548
id: `${operation}-${channel.channel}`,
@@ -42,7 +55,7 @@ function getChannelsByOperation(operation: string, spec: AsyncAPIDocument) {
4255
title: message.uid(),
4356
description: message.description(),
4457
})),
45-
58+
autoClient: mqttClient,
4659
spec,
4760
description: channelModel.description(),
4861
operationId: operationModel.id(),

Desktop/src/renderer/GraphGenerator/ApiVisualizer.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -202,11 +202,11 @@ export default function ApiVisualizer() {
202202
const targetNode = nodes.find((node) => node.id === edge.target);
203203

204204
if(sourceNode?.type === 'publishNode' || sourceNode?.type === 'subscribeNode'){
205-
sourceNode?.data.mqttClient.end();
205+
sourceNode?.data.mqttClient?.end();
206206
}
207207

208208
if(targetNode?.type === 'publishNode' || targetNode?.type === 'subscribeNode'){
209-
targetNode?.data.mqttClient.end();
209+
targetNode?.data.mqttClient?.end();
210210
}
211211

212212
});

Desktop/src/renderer/Nodes/ApplicationNode.tsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { Handle, Position } from 'reactflow';
33
import { AsyncAPIDocument } from '@asyncapi/parser';
44
import type { FunctionComponent } from 'react';
@@ -94,18 +94,23 @@ export const ApplicationNode: FunctionComponent<ApplicationNodeProps> = ({
9494
}
9595

9696
const handleClick = () => {
97-
console.log('the button was clicked')
9897
ipcRenderer.send('start-aedes');
9998
};
10099

101100
const disconnectAedes = () => {
102101
ipcRenderer.send('stop-aedes');
103102
}
104103

104+
useEffect(() => {
105+
return () => {
106+
ipcRenderer.send('stop-aedes');
107+
}
108+
}, [])
109+
105110
const [isConnected, setIsConnected] = useState(false);
106111

107112
return (
108-
<div style={{ margin: '0.7rem', padding: '1rem', border: '1px solid #F0E68C', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(255, 255, 153, 0.32)' }}>
113+
<div style={{ margin: '0.7rem', maxWidth: '500px', padding: '1rem', border: '1px solid #F0E68C', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(255, 255, 153, 0.32)' }}>
109114
<Handle
110115
type="target"
111116
position={Position.Left}

Desktop/src/renderer/Nodes/PublishNode.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useEffect, useState } from 'react';
22
import { Handle, Position } from 'reactflow';
33

44

@@ -7,25 +7,24 @@ interface IData {
77
channel: string
88
description: string
99
mqttClient?: any;
10+
autoClient?: any;
1011
}
1112

1213
interface PublishNodeProps {
1314
data: IData
1415
}
1516

1617
export const PublishNode: React.FunctionComponent<PublishNodeProps> = ({
17-
data: { message , channel, description, mqttClient },
18+
data: { message , channel, description, mqttClient, autoClient },
1819
}) => {
1920

2021
const [topic, setTopic] = useState(channel || '');
2122
const [payload, setPayload] = useState(message || '');
2223
const [qos, setQos] = useState(0);
2324

25+
const client = mqttClient || autoClient
2426

2527
const handleClick = () => {
26-
27-
const client = mqttClient
28-
2928
if (client) {
3029
client.publish(topic, payload, { qos: qos }, function (err) {
3130
console.log(topic,payload,"T&Pwhild publishing")
@@ -37,6 +36,14 @@ export const PublishNode: React.FunctionComponent<PublishNodeProps> = ({
3736

3837
};
3938

39+
40+
useEffect(() => {
41+
if(autoClient){
42+
autoClient.connect()
43+
}
44+
}, [])
45+
46+
4047
return (
4148
<div style={{ margin: '0.7rem', padding: '1rem', border: '1px solid #3498db', borderRadius: '0.5rem', fontFamily: 'Arial, sans-serif', backgroundColor: 'rgba(173, 216, 230, 0.32)' }}>
4249
<div>

Desktop/src/renderer/Nodes/SubscribeNode.tsx

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,18 +10,19 @@ interface IData {
1010
description: string
1111
id: string
1212
mqttClient?: any;
13+
autoClient?: any;
1314
}
1415

1516
interface PublishNodeProps {
1617
data: IData
1718
}
1819

19-
export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { topic, description, messages, mqttClient, id, QOS } }) => {
20+
export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { topic, description, messages, mqttClient, id, QOS, autoClient } }) => {
2021

2122
const [subTopic, setSubTopic] = useState(topic || '');
2223
const [qos, setQos] = useState(QOS || 0);
2324

24-
const client = mqttClient
25+
const client = mqttClient || autoClient
2526

2627
const handleClick = () => {
2728
if (client) {
@@ -34,10 +35,17 @@ export const SubscribeNode: FunctionComponent<PublishNodeProps> = ({ data: { top
3435
};
3536

3637
useEffect(() => {
37-
client.on('message', function (topic, message) {
38-
console.log(message.toString())
39-
handleAddMessage(message.toString()+ "--/" + topic.toString())
40-
})
38+
39+
if(autoClient){
40+
autoClient.connect()
41+
}
42+
43+
if (client) {
44+
client.on('message', function (topic, message) {
45+
console.log(message.toString())
46+
handleAddMessage(message.toString()+ "--/" + topic.toString())
47+
})
48+
}
4149
}, [])
4250

4351

Desktop/src/renderer/containers/TitleBar/menu.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ export const MenuBar: React.FC<MenuBarProps> = ({ menu: propMenu }) => {
2929
[clicked]
3030
);
3131

32+
useEffect(() => {
33+
setMenu(propMenu);
34+
}, [propMenu]);
35+
3236
const onButtonClick = useCallback(
3337
(i) => {
3438
if (lock.current) {
@@ -40,6 +44,25 @@ export const MenuBar: React.FC<MenuBarProps> = ({ menu: propMenu }) => {
4044
[clicked, focusing]
4145
);
4246

47+
// const onButtonClick = useCallback(
48+
// (i) => {
49+
// if (lock.current) {
50+
// lock.current = false;
51+
// return;
52+
// }
53+
54+
// // Use the previous state when updating based on the current state
55+
// setClicked((prevClicked) => {
56+
// const newClicked = !(focusing === i && prevClicked);
57+
// if (newClicked) {
58+
// setFocusing(i);
59+
// }
60+
// return newClicked;
61+
// });
62+
// },
63+
// [focusing,clicked]
64+
// );
65+
4366
const onTouchStart = useCallback(
4467
(i) => {
4568
if (i !== focusing && clicked) {

README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,17 @@ Usage
3131
```
3232
npm run desktop
3333
```
34+
#### Video Demo :
35+
36+
https://github.com/SumantxD/simulator/assets/65810424/a8f143b8-1ba5-4b8e-bb2a-5e2f4a91c1e1
37+
38+
#### Simulation Configuration YAML :
39+
40+
[Dowload mqtt.zip](https://github.com/asyncapi/simulator/files/13696873/mqtt.zip)
41+
42+
43+
44+
3445

3546
#### Throught command line:
3647

0 commit comments

Comments
 (0)