Send messages with sockets ❤️

Took 3 hours 51 minutes
2026-07-09 23:18:07 +00:00 · 2023-04-03 16:35:25 +02:00
parent c591a0eb3d
commit c91f5f3dfb
13 changed files with 501 additions and 242 deletions
@@ -1,36 +1,73 @@
-import {Container, Flex, Input, Text} from '@chakra-ui/react';
+import {Button, Container, Flex, Input, Text} from '@chakra-ui/react';
 import Head from 'next/head';
 import {websiteName} from '@/lib/constants';
 import {useSession} from 'next-auth/react';
 import {useRouter} from 'next/router';
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';

 import MessageList from '@/components/chat/MessageList';
-import FormMessage from '@/components/form/FormMessage';
+
+import {io, Socket} from 'socket.io-client';
+import {Message} from '@prisma/client';

 export default function ChatId() {
  const router = useRouter();
  const {data: session, status} = useSession();
-  const {id} = router.query;
-  const [messages, setMessages] = useState([])
+  const {id: chatId} = router.query;
+
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [text, setText] = useState('');
+  const [socket, setSocket] = useState<Socket>()

  useEffect(() => {
-    if (status === "authenticated")
-    fetch(`/api/messages?where={"ChatID": "${id}"}`)
-    .then(res => res.json())
-    .then(msgs => setMessages(msgs))
+    if (status === 'authenticated') socketInitializer()
  }, [status]);

+
+  const socketInitializer = async () => {
+    await fetch(`/api/socket/chat/${chatId}`)
+    const soc = io()
+
+    soc.on('connect', () => {
+      console.log('connected')
+    })
+
+    soc.on("allOldMessages", (allOldMessages: Message[]) => {
+      console.log("allOldMessages", allOldMessages);
+      setMessages(allOldMessages);
+    })
+
+    soc.on("newIncomingMessage", (newIncomingMessage: Message) => {
+      console.log("newIncomingMessage", newIncomingMessage);
+      console.log("messages", messages);
+      setMessages(messages => ([...messages, newIncomingMessage]));
+    });
+
+    setSocket(soc);
+  }
+
  if (status === 'loading') return <Text>Loading...</Text>;

-  if (session && messages)
+  const handleSubmit = () => {
+    if (text !== "" && socket) {
+      // @ts-ignore
+      socket.emit("createdMessage", {text, sender: session.user.id})
+      setText("");
+    }
+  }
+
+  if (session && session.user && messages)
  return (
      <>
        <Head><title>{websiteName}</title></Head>

        <Container>
          <MessageList user={session.user} messages={messages}/>
-          <FormMessage user={session.user} chatId={id} />
+
+          <Flex gap={5} mt={5}>
+            <Input type={"text"} colorScheme={'purple'} onChange={(evt) => setText(evt.target.value) } value={text} />
+            <Button colorScheme={'purple'} onClick={handleSubmit}>Envoyer</Button>
+          </Flex>
        </Container>
      </>
  );