wibu/hipmi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Collaboration: Room chat

Browse Source 
# feat
- chatting antar user
- lihat info grup
## No issue
This commit is contained in:
Bagasbanuna02
2024-04-29 10:30:59 +08:00
parent 2929459e95
commit 2a4d2951af
25 changed files with 366 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -37,6 +37,7 @@
"@types/react-dom": "18.2.7",
"@types/uuid": "^9.0.4",
"autoprefixer": "10.4.14",
"bufferutil": "^4.0.8",
"dayjs": "^1.11.10",
"echarts": "^5.4.3",
"echarts-for-react": "^3.0.2",
@@ -64,6 +65,7 @@
"socket.io-client": "^4.7.2",
"tailwindcss": "3.3.3",
"typescript": "5.1.6",
"utf-8-validate": "^6.0.3",
"uuid": "^9.0.1",
"yaml": "^2.3.2"
}

7
src/app/dev/colab/detail/grup/[id]/layout.tsx
View File

@@ -11,11 +11,14 @@ export default async function Layout({
params: { id: string };
}) {
let roomId = params.id;
// const listAnggota = await colab_getListAnggotaByRoomId(roomId);
const dataRoom = await colab_getListAnggotaByRoomId(roomId);
return (
<>
<LayoutColab_DetailGrupDiskusi>{children}</LayoutColab_DetailGrupDiskusi>
<LayoutColab_DetailGrupDiskusi dataRoom={dataRoom as any}>
{children}
</LayoutColab_DetailGrupDiskusi>
</>
);
}

7
src/app/dev/colab/detail/grup/[id]/page.tsx
View File

@@ -1,15 +1,18 @@
import { Colab_DetailGrupDiskusi } from "@/app_modules/colab";
import colab_getMessageByRoomId from "@/app_modules/colab/fun/get/room_chat/get_message_by_room_id";
import { user_getOneUserId } from "@/app_modules/fun_global/get_user_token";
import _ from "lodash";
export default async function Page({ params }: { params: { id: string } }) {
let roomId = params.id;
const listMsg = await colab_getMessageByRoomId(roomId);
const userLoginId = await user_getOneUserId()
let listMsg = await colab_getMessageByRoomId(roomId);
const reserveMsg = _.reverse(listMsg)
return (
<>
<Colab_DetailGrupDiskusi roomId={roomId} listMsg={listMsg} userLoginId={userLoginId}/>
<Colab_DetailGrupDiskusi roomId={roomId} listMsg={reserveMsg} userLoginId={userLoginId}/>
</>
);
}

14
src/app/dev/colab/detail/info-grup/[id]/page.tsx Normal file
View File

@@ -0,0 +1,14 @@
import prisma from "@/app/lib/prisma";
import { Colab_DetailInfoGrup } from "@/app_modules/colab";
import colab_getListAnggotaByRoomId from "@/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id";
export default async function Page({ params }: { params: { id: string } }) {
let roomId = params.id;
const dataRoom = await colab_getListAnggotaByRoomId(roomId)
return (
<>
<Colab_DetailInfoGrup dataRoom={dataRoom as any} />
</>
);
}

9
src/app/dev/colab/detail/main_detail/[id]/layout.tsx
View File

@@ -13,13 +13,14 @@ export default async function Layout({
const colabId = params.id;
const dataColab = await colab_getOneCollaborationById(colabId);
const authorId = dataColab?.Author?.id;
const userLoginId = await user_getOneUserId()
console.log(authorId)
console.log(userLoginId)
const userLoginId = await user_getOneUserId();
return (
<>
<LayoutColab_MainDetail colabId={colabId} isAuthor={authorId === userLoginId ? true : false}>
<LayoutColab_MainDetail
colabId={colabId}
isAuthor={authorId === userLoginId ? true : false}
>
{children}
</LayoutColab_MainDetail>
</>

4
src/app/layout.tsx
View File

@@ -1,11 +1,11 @@
// import MqttLoader from '@/util/mqtt_loader';
import MqttLoader from '@/util/mqtt_loader';
import RootStyleRegistry from './emotion';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<RootStyleRegistry>
{/* <MqttLoader /> */}
<MqttLoader />
{children}</RootStyleRegistry>
);
}

1
src/app/lib/router_hipmi/router_colab.ts
View File

@@ -21,6 +21,7 @@ export const RouterColab = {
detail_partisipasi_proyek: "/dev/colab/detail/proyek/partisipasi/",
detail_proyek_saya: "/dev/colab/detail/proyek/saya/",
detail_grup: "/dev/colab/detail/grup/",
info_grup: "/dev/colab/detail/info-grup/",
// proyek
};

177
src/app/makuro/page.tsx
View File

@@ -13,104 +13,89 @@ import {
Title,
} from "@mantine/core";
import _ from "lodash";
// import ViewMakuro from "./_server/makuro_view";
// import mqtt_client from "@/util/mqtt_client";
// import { useState } from "react";
// import { useAtom } from "jotai";
// import { gs_coba_chat } from "./gs_coba";
// export default function Page() {
// const [data1, setData1] = useState("");
// const [data2, setData2] = useState("");
// const [msg, setMsg] = useAtom(gs_coba_chat);
// return (
// <>
// <SimpleGrid cols={2} mt={"lg"}>
// <Stack align="center" justify="center">
// <TextInput
// label="User 1"
// value={data1}
// onChange={(val) => setData1(val.currentTarget.value)}
// />
// <button
// onClick={() => {
// mqtt_client.publish("example_hipmi", data1);
// setData1("");
// }}
// >
// kirim
// </button>
// </Stack>
// <Stack align="center" justify="center">
// <TextInput
// label="User 2"
// value={data2}
// onChange={(val) => setData2(val.currentTarget.value)}
// />
// <button
// onClick={() => {
// mqtt_client.publish("example_hipmi", data2);
// setData2("");
// }}
// >
// kirim
// </button>
// </Stack>
// </SimpleGrid>
// <Stack align="center" justify="center" mt={"xl"}>
// <Paper withBorder shadow="lg" p={"lg"}>
// {msg}
// </Paper>
// </Stack>
// {/* <ViewMakuro /> */}
// </>
// );
// }
import ViewMakuro from "./_server/makuro_view";
import mqtt_client from "@/util/mqtt_client";
import { useState } from "react";
import { useAtom } from "jotai";
import { gs_coba_chat } from "./gs_coba";
import { useShallowEffect } from "@mantine/hooks";
export default function Page() {
const [pesan, setPesan] = useState("");
const [ini, setIni] = useState("");
useShallowEffect(() => {
mqtt_client.subscribe("apa");
mqtt_client.on("message", (data: any, msg: any) => {
console.log( msg.toString());
setIni(msg.toString());
});
}, []);
return (
<Box>
<Box
style={{
zIndex: 99,
}}
w={"100%"}
bg={"green"}
pos={"sticky"}
top={0}
h={"10vh"}
>
header
</Box>
<Box bg={"red"} pos={"static"} >
<Stack>
{Array.from(new Array(15)).map((v, k) => (
<Title key={k}>Cek halaman {k+1}</Title>
))}
<Box style={{
height: "10vh"
}}>
</Box>
</Stack>
</Box>
<Text
style={{
zIndex: 98,
}}
w={"100%"}
bg={"blue"}
pos={"fixed"}
bottom={0}
h={"10vh"}
>
footer
</Text>
</Box>
<>
<Stack align="center" justify="center">
{ini}
<TextInput
label="User 1"
value={pesan}
onChange={(val) => setPesan(val.currentTarget.value)}
/>
<button
onClick={() => {
mqtt_client.publish("apa", pesan);
setPesan("");
}}
>
kirim
</button>
</Stack>
</>
);
}
// export default function Page() {
// return (
// <Box>
// <Box
// style={{
// zIndex: 99,
// }}
// w={"100%"}
// bg={"green"}
// pos={"sticky"}
// top={0}
// h={"10vh"}
// >
// header
// </Box>
// <Box bg={"red"} pos={"static"} >
// <Stack>
// {Array.from(new Array(15)).map((v, k) => (
// <Title key={k}>Cek halaman {k+1}</Title>
// ))}
// <Box style={{
// height: "10vh"
// }}>
// </Box>
// </Stack>
// </Box>
// <Text
// style={{
// zIndex: 98,
// }}
// w={"100%"}
// bg={"blue"}
// pos={"fixed"}
// bottom={0}
// h={"10vh"}
// >
// footer
// </Text>
// </Box>
// );
// }

2
src/app_modules/auth/fun/fun_edit_aktivasi_kode_otp_by_id.ts
View File

@@ -3,7 +3,7 @@
import prisma from "@/app/lib/prisma";
export async function auth_funEditAktivasiKodeOtpById(otpId: string) {
console.log(otpId);
// console.log(otpId);
const updt = await prisma.kodeOtp.update({
where: {
id: otpId,

2
src/app_modules/auth/fun/fun_login.ts
View File

@@ -5,7 +5,7 @@ import { randomOTP } from "./rondom_otp";
export async function auth_funLogin(nomor: string) {
const codeOtp = randomOTP();
console.log(nomor)
// console.log(nomor)
try {
const res = await fetch(

3
src/app_modules/auth/register/view.tsx
View File

@@ -81,6 +81,7 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
await auth_funEditAktivasiKodeOtpById(dataOtp.id).then((val) => {
if (val.status === 200) {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
} else {
ComponentGlobal_NotifikasiPeringatan(val.message);
@@ -94,7 +95,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
return (
<>
{/* <pre>{JSON.stringify(dataOtp,null,2)}</pre> */}
<Center>
@@ -140,7 +140,6 @@ export default function Register({ dataOtp }: { dataOtp: any }) {
color={"teal"}
onClick={() => {
onRegistarsi();
setLoading(true);
}}
>
<Text>DAFTAR</Text>

3
src/app_modules/auth/validasi/view.tsx
View File

@@ -88,6 +88,7 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
if (val.status === 200) {
if (res.role === "1") {
ComponentGlobal_NotifikasiBerhasil(res.message);
setLoading(true);
router.push(RouterHome.main_home);
} else {
router.push(RouterAdminDashboard.splash_admin);
@@ -105,7 +106,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
return (
<>
<Center h={"100vh"}>
<Stack px={"lg"} spacing={"xl"} w={{ base: 400 }} justify="center">
<Center>
@@ -143,7 +143,6 @@ export default function Validasi({ dataOtp }: { dataOtp: any }) {
color={"teal"}
onClick={() => {
onVerifikasi();
setLoading(true);
}}
>
<Text>VERIFIKASI</Text>

2
src/app_modules/colab/component/detail/header_author_list_partisipan.tsx
View File

@@ -98,7 +98,7 @@ export default function ComponentColab_AuthorNameOnListPartisipan({
<IconZoomCheck />
</ActionIcon>
) : (
"Invalid Data"
""
)}
</Stack>
</Grid.Col>

1
src/app_modules/colab/component/header_tamplate.tsx
View File

@@ -47,6 +47,7 @@ export default function ComponentColab_HeaderTamplate({
<ActionIcon variant="transparent" disabled></ActionIcon>
) : (
<ActionIcon
radius={"xl"}
loading={loading ? true : false}
variant="transparent"
onClick={() => {

0
src/app_modules/colab/create/create_room/index.tsx
View File

79
src/app_modules/colab/detail/grup/index.tsx
View File

@@ -3,6 +3,7 @@
import {
ActionIcon,
Affix,
Badge,
Box,
Button,
Grid,
@@ -20,12 +21,13 @@ import { useShallowEffect, useWindowScroll } from "@mantine/hooks";
import { useAtom } from "jotai";
import { useState } from "react";
import { gs_colab_pesan } from "../../global_state";
import { IconArrowUp, IconSend } from "@tabler/icons-react";
import { IconArrowUp, IconCircle, IconSend } from "@tabler/icons-react";
import colab_funCreateMessageByUserId from "../../fun/create/room/fun_create_message_by_user_id";
import _ from "lodash";
import ComponentColab_IsEmptyData from "../../component/is_empty_data";
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
import colab_getMessageByRoomId from "../../fun/get/room_chat/get_message_by_room_id";
import mqtt_client from "@/util/mqtt_client";
export default function Colab_DetailGrupDiskusi({
roomId,
@@ -40,17 +42,29 @@ export default function Colab_DetailGrupDiskusi({
const [obrolan, setObrolan] = useState<any[]>(listMsg);
const [scroll, scrollTo] = useWindowScroll();
async function onSend() {
scrollTo({ y: -0 });
useShallowEffect(() => {
mqtt_client.subscribe(roomId);
// await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
// if (res.status === 200) {
// await colab_getMessageByRoomId(roomId).then((val) => setObrolan(val));
// setPesan("");
// } else {
// ComponentGlobal_NotifikasiGagal(res.message);
// }
// });
mqtt_client.on("message", (data: any, msg: any) => {
onList(setObrolan);
});
}, [setObrolan]);
async function onList(setObrolan: any) {
await colab_getMessageByRoomId(roomId).then((val) =>
setObrolan(_.reverse(val))
);
}
async function onSend() {
await colab_funCreateMessageByUserId(pesan, roomId).then(async (res) => {
if (res.status === 200) {
mqtt_client.publish(roomId, pesan);
setPesan("");
} else {
ComponentGlobal_NotifikasiGagal(res.message);
}
});
}
// if (_.isEmpty(listMsg))
@@ -58,8 +72,9 @@ export default function Colab_DetailGrupDiskusi({
return (
<>
<Box h={"78vh"}>
<ScrollArea h={"78vh"} scrollbarSize={2}>
<Box h={"79vh"}>
{/* <pre>{JSON.stringify(listMsg.map((e) => e.createdAt), null,2)}</pre> */}
<ScrollArea h={"79vh"} scrollbarSize={2}>
<Box>
{_.isEmpty(obrolan) ? (
<ComponentColab_IsEmptyData text="Belum Ada Pesan" />
@@ -71,10 +86,23 @@ export default function Colab_DetailGrupDiskusi({
<Group position="right">
<Paper key={e.id} bg={"blue.2"} p={"sm"}>
<Stack spacing={0}>
<Text fw={"bold"} fz={"xs"}>
<Text lineClamp={1} fw={"bold"} fz={"xs"}>
{e.User.Profile.name}
</Text>
<Text>{e.message}</Text>
<Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group>
</Stack>
</Paper>
</Group>
@@ -82,10 +110,23 @@ export default function Colab_DetailGrupDiskusi({
<Group position="left">
<Paper key={e.id} bg={"cyan.2"} p={"sm"} mr={"lg"}>
<Stack spacing={0}>
<Text fw={"bold"} fz={"xs"}>
<Text lineClamp={1} fw={"bold"} fz={10}>
{e.User.Profile.name}
</Text>
<Text>{e.message}</Text>
<Group spacing={"xs"}>
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
timeStyle: "medium",
}).format(e.createdAt)}
</Text>
<IconCircle size={3} />
<Text fz={7}>
{new Intl.DateTimeFormat("id-ID", {
dateStyle: "medium",
}).format(e.createdAt)}
</Text>
</Group>
</Stack>
</Paper>
</Group>
@@ -112,16 +153,18 @@ export default function Colab_DetailGrupDiskusi({
<Textarea
minRows={1}
radius={"md"}
placeholder="Pesan..."
placeholder="Ketik pesan anda..."
value={pesan}
onChange={(val) => setPesan(val.currentTarget.value)}
/>
</Grid.Col>
<Grid.Col span={"content"}>
<ActionIcon
variant="outline"
disabled={pesan === "" ? true : false}
variant="filled"
bg={"cyan"}
radius={"xl"}
size={"lg"}
size={"xl"}
onClick={() => {
onSend();
}}

80
src/app_modules/colab/detail/grup/layout.tsx
View File

@@ -8,22 +8,39 @@ import {
Footer,
Grid,
Group,
Header,
Stack,
Text,
TextInput,
Textarea,
Title,
} from "@mantine/core";
import React, { useState } from "react";
import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import { IconPlane, IconSend } from "@tabler/icons-react";
import {
IconChevronLeft,
IconInfoSquareRounded,
IconPlane,
IconSend,
} from "@tabler/icons-react";
import { useAtom } from "jotai";
import { gs_colab_pesan } from "../../global_state";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
import { RouterColab } from "@/app/lib/router_hipmi/router_colab";
import { useViewportSize } from "@mantine/hooks";
import { useRouter } from "next/navigation";
export default function LayoutColab_DetailGrupDiskusi({
children,
dataRoom,
}: {
children: React.ReactNode;
dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
const router = useRouter();
const [loadingBack, setLoadingBack] = useState(false);
const [loadingInfo, setLoadingInfo] = useState(false);
return (
<>
<Box>
@@ -38,11 +55,68 @@ export default function LayoutColab_DetailGrupDiskusi({
top={0}
h={50}
>
<ComponentColab_HeaderTamplate title="Room Chat" bg={"gray.2"} />
{/* <ComponentColab_HeaderTamplate
title={dataRoom.name + " " + "fwf wfwe efewf wef"}
bg={"gray.2"}
icon={<IconInfoSquareRounded />}
route2={RouterColab.info_grup + dataRoom?.id}
/> */}
<Header height={50} sx={{ borderStyle: "none" }} bg={"gray.2"}>
<Stack h={50} justify="center" px={"sm"}>
<Grid grow gutter={"lg"}>
<Grid.Col span={2}>
<ActionIcon
loading={loadingBack ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingBack(true);
router.back();
}}
>
<IconChevronLeft />
</ActionIcon>
</Grid.Col>
<Grid.Col span={8}>
<Center>
<Title order={5} lineClamp={1}>
{dataRoom.name}
</Title>
</Center>
</Grid.Col>
<Grid.Col span={2}>
<Group position="right">
<ActionIcon
loading={loadingInfo ? true : false}
variant="transparent"
radius={"xl"}
onClick={() => {
setLoadingInfo(true);
router.push(RouterColab.info_grup + dataRoom?.id);
}}
>
<IconInfoSquareRounded />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</Stack>
{/* <Group position="apart" px={"sm"} h={"100%"}>
<ActionIcon>
<IconChevronLeft />
</ActionIcon>
<Box w={width > 375 ? 300 : 200}>
<Text truncate>ff fsafsdfdaf sadsadf asdfda ewfw wefewf</Text>
</Box>
<ActionIcon>
<IconInfoSquareRounded />
</ActionIcon>
</Group> */}
</Header>
</Box>
{/* Children */}
<Box p={"sm"} pos={"static"} h={"80vh"}>
<Box p={"sm"} pos={"static"}>
<Box
style={{
height: 50,

44
src/app_modules/colab/detail/info_grup/index.tsx Normal file
View File

@@ -0,0 +1,44 @@
"use client";
import AppComponentGlobal_LayoutTamplate from "@/app_modules/component_global/component_layout_tamplate";
import { Box, Paper, Stack, Text, Title } from "@mantine/core";
import ComponentColab_HeaderTamplate from "../../component/header_tamplate";
import { MODEL_COLLABORATION_ROOM_CHAT } from "../../model/interface";
import ComponentColab_DetailData from "../../component/detail/detail_data";
import ComponentColab_AuthorNameOnListPartisipan from "../../component/detail/header_author_list_partisipan";
export default function Colab_DetailInfoGrup({
dataRoom,
}: {
dataRoom: MODEL_COLLABORATION_ROOM_CHAT;
}) {
return (
<>
<AppComponentGlobal_LayoutTamplate
header={<ComponentColab_HeaderTamplate title="Info Grup" />}
>
{<InfoGroup dataRoom={dataRoom} />}
</AppComponentGlobal_LayoutTamplate>
</>
);
}
function InfoGroup({ dataRoom }: { dataRoom: MODEL_COLLABORATION_ROOM_CHAT }) {
return (
<>
<Stack px={"xs"}>
<ComponentColab_DetailData data={dataRoom.ProjectCollaboration} />
<Paper p={"xs"} withBorder>
<Stack>
<Title order={6}>Anggota Grup</Title>
{dataRoom.ProjectCollaboration_AnggotaRoomChat.map((e,i) => (
<Box key={i}>
<ComponentColab_AuthorNameOnListPartisipan author={e.User} isPembatas={true} />
</Box>
))}
</Stack>
</Paper>
</Stack>
</>
);
}

17
src/app_modules/colab/fun/get/room_chat/get_list_anggota_by_room_id.ts
View File

@@ -3,22 +3,35 @@
import prisma from "@/app/lib/prisma";
export default async function colab_getListAnggotaByRoomId(roomId: string) {
const get = await prisma.projectCollaboration_RoomChat.findMany({
const get = await prisma.projectCollaboration_RoomChat.findFirst({
where: {
id: roomId,
},
select: {
id: true,
name: true,
ProjectCollaboration: true,
ProjectCollaboration: {
select: {
id: true,
isActive: true,
title: true,
lokasi: true,
purpose: true,
benefit: true,
createdAt: true,
ProjectCollaborationMaster_Industri: true,
},
},
ProjectCollaboration_AnggotaRoomChat: {
select: {
User: {
select: {
id: true,
Profile: {
select: {
id: true,
name: true,
imagesId: true
},
},
},

3
src/app_modules/colab/fun/get/room_chat/get_message_by_room_id.ts
View File

@@ -5,8 +5,9 @@ import prisma from "@/app/lib/prisma";
export default async function colab_getMessageByRoomId(roomId: string) {
const getList = await prisma.projectCollaboration_Message.findMany({
orderBy: {
createdAt: "asc",
createdAt: "desc",
},
take : 8,
where: {
projectCollaboration_RoomChatId: roomId,
},

2
src/app_modules/colab/index.ts
View File

@@ -23,6 +23,7 @@ import LayoutColab_DetailGrupDiskusi from "./detail/grup/layout";
import Colab_NotifikasiView from "./main/pemberitahuan";
import Colab_DetailProyekSaya from "./detail/proyek/saya";
import LayoutColab_DetailProyekSaya from "./detail/proyek/saya/layout";
import Colab_DetailInfoGrup from "./detail/info_grup";
export {
Colab_Beranda,
@@ -50,4 +51,5 @@ export {
Colab_NotifikasiView,
Colab_DetailProyekSaya,
LayoutColab_DetailProyekSaya,
Colab_DetailInfoGrup,
};

4
src/app_modules/colab/main/grup/index.tsx
View File

@@ -29,6 +29,7 @@ export default function Colab_GrupDiskus({
}) {
const router = useRouter();
const [loading, setLoading] = useState(false);
const [idRoom, setIdRoom] = useState("");
if (_.isEmpty(listRoom))
return <ComponentColab_IsEmptyData text="Tidak Ada Data" />;
@@ -46,6 +47,7 @@ export default function Colab_GrupDiskus({
router.push(
RouterColab.detail_grup + e?.ProjectCollaboration_RoomChat.id
);
setIdRoom(e?.ProjectCollaboration_RoomChat.id);
setLoading(true);
}}
>
@@ -66,7 +68,7 @@ export default function Colab_GrupDiskus({
</Grid.Col>
<Grid.Col span={"content"}>
<Center>
{loading ? (
{e?.ProjectCollaboration_RoomChat.id === idRoom ? (
<Loader color="gray" size={20} />
) : (
<IconChevronRight color="gray" />

12
src/util/mqtt_client.ts
View File

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

34
src/util/mqtt_loader.tsx
View File

@@ -1,22 +1,20 @@
"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";
import { useEffect, useState } 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");
// });
export default function MqttLoader() {
useEffect(() => {
mqtt_client.on("connect", () => {
console.log("connected");
// mqtt_client.subscribe("server12");
});
// mqtt_client.on("message", (apa, message) => {
// console.log(message.toLocaleString());
// setMsg(message.toLocaleString() as any);
// });
// }, [setMsg]);
// return null;
// }
// mqtt_client.on("message", (apa) => {
// console.log("Ini yang di utils");
// });
}, []);
return null;
}

19
yarn.lock
View File

@@ -1468,6 +1468,13 @@ buffer@^6, buffer@^6.0.3:
base64-js "^1.3.1"
ieee754 "^1.2.1"
bufferutil@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/bufferutil/-/bufferutil-4.0.8.tgz#1de6a71092d65d7766c4d8a522b261a6e787e8ea"
integrity sha512-4T53u4PdgsXqKaIctwF8ifXlRTTmEPJ8iEPWFdGZvcf7sbwYo6FKFEX9eNNAnzFZ7EzJAQ3CJeOtCRA4rDp7Pw==
dependencies:
node-gyp-build "^4.3.0"
busboy@1.6.0:
version "1.6.0"
resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
@@ -3287,6 +3294,11 @@ next@^13.5.4-canary.8:
"@next/swc-win32-ia32-msvc" "13.5.6"
"@next/swc-win32-x64-msvc" "13.5.6"
node-gyp-build@^4.3.0:
version "4.8.0"
resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.8.0.tgz#3fee9c1731df4581a3f9ead74664369ff00d26dd"
integrity sha512-u6fs2AEUljNho3EYTJNBfImO5QTo/J/1Etd+NVdCj7qWKUSN/bSLkZwhDv7I+w/MSC6qJ4cknepkAYykDdK8og==
node-releases@^2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
@@ -4689,6 +4701,13 @@ use-sidecar@^1.1.2:
detect-node-es "^1.1.0"
tslib "^2.0.0"
utf-8-validate@^6.0.3:
version "6.0.3"
resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-6.0.3.tgz#7d8c936d854e86b24d1d655f138ee27d2636d777"
integrity sha512-uIuGf9TWQ/y+0Lp+KGZCMuJWc3N9BHA+l/UmHd/oUHwJJDeysyTRxNQVkbzsIWfGFbRe3OcgML/i0mvVRPOyDA==
dependencies:
node-gyp-build "^4.3.0"
util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"