# Project Collaboration

## feat
- Tampilan beranda & detailnya
- Tampilan status & detailnya
- Tampilan partisipasi & detailnya
- Tampilan grup diskusi & detailnya
### No issue

src/util/mqtt_client.ts

@@ -0,0 +1,10 @@
+import mqtt from "mqtt";
+
+declare global {
+  var mqtt_client: mqtt.MqttClient;
+}
+
+const mqtt_client =
+  globalThis.mqtt_client || mqtt.connect("wss://io.wibudev.com");
+
+export default mqtt_client;

src/util/mqtt_loader.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect } from "react";
+import mqtt_client from "./mqtt_client";
+import { useAtom } from "jotai";
+import { gs_coba_chat } from "@/app/makuro/gs_coba";
+
+export default function MqttLoader() {
+  const [msg, setMsg] = useAtom(gs_coba_chat);
+  useEffect(() => {
+    mqtt_client.on("connect", () => {
+      console.log("connected");
+      mqtt_client.subscribe("example_hipmi");
+    });
+
+    mqtt_client.on("message", (apa, message) => {
+      console.log(message.toLocaleString());
+      setMsg(message.toLocaleString() as any);
+    });
+  }, [setMsg]);
+  return null;
+}