Using mqtt.js in next page

[smaktacular]

Hi,

I was trying to write a service that connects pages to an mqtt broker using MQTTjs.
I started off with a page that creates a client instance, assuming that hydration would lead to an mqtt client on browser/client side.
That however does not work, there is no connection to the broker being established (no session on broker side.)
Do you have any hints why it is not working, as mqtt itself is working fine on vanilla react.
See [working example](https://www.preciouschicken.com/blog/posts/a-taste-of-mqtt-in-react/
Also, is the assumption correct or do I need to take specific steps to enforce that mqtt functionality only runs on client side?

To repro just insert the following component into the create-next-template and change the connection info of the broker:

import mqtt from 'mqtt';
import React, { useEffect, useState } from 'react';

const mqttUri = 'wss://{mqttUr}:443/mqtt';

const options = {
  userName: '',
  password: '',
  clientId: 'nextjs',
  reconnectPeriod: 2000,
};

const Mqtt = () => {
  const [messages, setMessages] = useState(['init']);

  const addMessage = () => {
    const newMessges = messages.concat(Math.random());
    setMessages(newMessges);
  };

  let client = {};

  useEffect(() => {
    console.dir(${client});
    if (client === undefined) {
      console.log(`client: ${client}`);
      client = mqtt.connect(mqttUri, options);
      client.subscribe('test');
      client.on('message', (message) => { setMessages(messages.concat(message.toString())); });

      return () => {
        client.unsubscribe('test');
        client.end(client);
      };
    }
  });

  return (
    <div>
      <button onClick={addMessage}>addMessage</button>
      <h2>Received Messages: </h2>
      <ul>
        {messages.map((message) => (
          <li key={Math.random()}>{message.toString()}</li>
        ))}
      </ul>
    </div>
  );
};

export default Mqtt;

Regards Sebastian

[jamesmosier]

These are untested, but I would think one of these options would work:

// option 1
// keep a ref to the client so React saves a copy between renders
const clientRef = React.useRef(null)

useEffect(() => {  
  // access client vis clientRef.current
  console.dir(${clientRef.current});
  if (clientRef.current) {
    console.log(`client: ${clientRef.current}`);
    clientRef.current = mqtt.connect(mqttUri, options);
    clientRef.current.subscribe('test');
    clientRef.current.on('message', (message) => { setMessages(messages.concat(message.toString())); });
  }

  return () => {
    // always clean up the effect if clientRef.current has a value
    if (clientRef.current) {
      clientRef.current.unsubscribe('test');
      clientRef.current.end(clientRef.current);
    }
  };
});


// option 2
useEffect(() => {
  const client = mqtt.connect(mqttUri, options);
  client.subscribe('test');
  client.on('message', (message) => { setMessages(messages.concat(message.toString())); });

  return () => {
    if (client) {
      client.unsubscribe('test');
      client.end(client);
    }
  };
}, []); // only run this effect on mount on the client side

[smaktacular]

That worked, Thanks a lot! 👍