Membuat realtime chat

Pada artikel ini, kita akan membuat aplikasi Next.js dengan Prisma sebagai ORM dan Socket.io untuk real-time chat tanpa backend terpisah.

1. Membuat Proyek Next.js

Jalankan perintah berikut untuk membuat proyek baru:

npx create-next-app@latest my-app --ts --tailwind

Kemudian masuk ke folder proyek dan jalankan:

npm run dev

2. Setup Prisma di Next.js

Instal Prisma dan klien database:

npm install @prisma/client @prisma/cli

Inisialisasi Prisma:

npx prisma init

Skema Prisma

<model User> {
  id    String @id @default(uuid())
  name  String
  email String @unique
}

<model Message> {
  id        String   @id @default(uuid())
  senderId  String
  recipientId String
  content   String
  createdAt DateTime @default(now())

  sender    User @relation(fields: [senderId], references: [id])
  recipient User @relation(fields: [recipientId], references: [id])
}

Jalankan migrasi:

npx prisma migrate dev --name init

3. Setup Socket.io di Next.js

Instal Socket.io:

npm install socket.io socket.io-client

Konfigurasi Socket.io

Buat file /lib/socket.ts:

import { Server as HttpServer } from "http";
import { Server as SocketIOServer } from "socket.io";
import { sendMessage } from "./messages";

let io: SocketIOServer | null = null;

export const initSocket = (server: HttpServer) => {
  if (!io) {
    io = new SocketIOServer(server, { cors: { origin: "*" } });

    io.on("connection", (socket) => {
      console.log("User connected:", socket.id);

      socket.on("sendMessage", async (data) => {
        const message = await sendMessage(data.senderId, data.recipientId, data.content);
        io?.emit("newMessage", message);
      });

      socket.on("disconnect", () => console.log("User disconnected:", socket.id));
    });
  }
};

4. Menjalankan Server Next.js dan Socket.io dalam Satu Proses

Buat file server.ts:

import { createServer } from "http";
import { initSocket } from "./lib/socket";
import next from "next";

const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = createServer((req, res) => handle(req, res));

  initSocket(server);

  server.listen(3000, () => {
    console.log("Server running on http://localhost:3000");
  });
});

Ubah skrip package.json:

"scripts": {
  "dev": "node server.ts"
}

5. Membuat UI Chat

Buat komponen Chat.tsx:

"use client";

import { useChat } from "@/lib/useChat";
import { useState } from "react";

export const Chat = ({ userId }: { userId: string }) => {
  const { messages, sendMessage } = useChat();
  const [content, setContent] = useState("");

  const handleSend = () => {
    sendMessage(userId, "recipient-id", content);
    setContent("");
  };

  return (
    <div className="p-4 border border-gray-300 rounded-md w-96">
      <div className="h-60 overflow-y-auto border-b border-gray-300 mb-2 p-2">
        {messages.map((msg, index) => (
          <div key={index} className="p-2 bg-gray-100 rounded-md my-1">
            {msg.content}
          </div>
        ))}
      </div>
      <div className="flex gap-2">
        <input
          className="flex-1 p-2 border rounded-md"
          value={content}
          onChange={(e) => setContent(e.target.value)}
        />
        <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleSend}>
          Send
        </button>
      </div>
    </div>
  );
};

Kesimpulan

• Next.js digunakan sebagai frontend dan backend dalam satu proses.
• Prisma dikelola langsung tanpa API Routes.
• Socket.io berjalan dalam server Next.js.
• Chat real-time bisa langsung digunakan dengan npm run dev.

Dengan pendekatan ini, aplikasi sederhana bisa dibuat lebih efisien tanpa perlu backend terpisah.