mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
bc9fe492db
### What? This PR fixes a typo in the `with-mqtt-js` example (`examples/with-mqtt-js/app/page.tsx`): all occurrences of "incomming" have been corrected to "incoming" in variables, refs, and JSX headings. ### Why? The previous spelling "incomming" is incorrect in English. Correcting it improves readability and professionalism in the example code. ### How? - Renamed `incommingMessages` → `incomingMessages` - Renamed `setIncommingMessages` → `setIncomingMessages` - Renamed `incommingMessageHandlers` → `incomingMessageHandlers` - Updated JSX headings and references accordingly --------- Co-authored-by: JJ Kasper <[email protected]>
66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useRef } from "react";
|
|
import type { MqttClient } from "mqtt";
|
|
import useMqtt from "@/lib/useMqtt";
|
|
|
|
export default function Home() {
|
|
const [incomingMessages, setIncomingMessages] = useState<any[]>([]);
|
|
const addMessage = (message: any) => {
|
|
setIncomingMessages((incomingMessages) => [...incomingMessages, message]);
|
|
};
|
|
const clearMessages = () => {
|
|
setIncomingMessages(() => []);
|
|
};
|
|
|
|
const incomingMessageHandlers = useRef([
|
|
{
|
|
topic: "topic1",
|
|
handler: (msg: string) => {
|
|
addMessage(msg);
|
|
},
|
|
},
|
|
]);
|
|
|
|
const mqttClientRef = useRef<MqttClient | null>(null);
|
|
const setMqttClient = (client: MqttClient) => {
|
|
mqttClientRef.current = client;
|
|
};
|
|
useMqtt({
|
|
uri: process.env.NEXT_PUBLIC_MQTT_URI,
|
|
options: {
|
|
username: process.env.NEXT_PUBLIC_MQTT_USERNAME,
|
|
password: process.env.NEXT_PUBLIC_MQTT_PASSWORD,
|
|
clientId: process.env.NEXT_PUBLIC_MQTT_CLIENTID,
|
|
},
|
|
topicHandlers: incomingMessageHandlers.current,
|
|
onConnectedHandler: (client) => setMqttClient(client),
|
|
});
|
|
|
|
const publishMessages = (client: any) => {
|
|
if (!client) {
|
|
console.log("(publishMessages) Cannot publish, mqttClient: ", client);
|
|
return;
|
|
}
|
|
|
|
client.publish("topic1", "1st message from component");
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<h2>Subscribed Topics</h2>
|
|
{incomingMessageHandlers.current.map((i) => (
|
|
<p key={Math.random()}>{i.topic}</p>
|
|
))}
|
|
<h2>Incoming Messages:</h2>
|
|
{incomingMessages.map((m) => (
|
|
<p key={Math.random()}>{m.payload.toString()}</p>
|
|
))}
|
|
<button onClick={() => publishMessages(mqttClientRef.current)}>
|
|
Publish Test Messages
|
|
</button>
|
|
<button onClick={() => clearMessages()}>Clear Test Messages</button>
|
|
</div>
|
|
);
|
|
}
|