[Next.js] pusher 라이브러리

Pusher.js는 실시간 웹 기술을 구현하기 위해 사용되는 클라이언드 사이드 라이브러리.

웹과 앱에서 실시간 데이터를 전송하는데 사용되며, 소켓 통신을 기반으로 작동 됨

Pusher.js의 두 가지 주요 구성 요소

• Pusher 객체: 웹에서 사용 가능한 Pusher 라이브러리로, 웹 소켓 연결을 설정하고 실시간 데이터를 주고 받음
• Pusher Channels: Pusher는 채널 시스템을 통해 데이터를 전송함.
  • 채널은 특정 주제에 데이터를 게시하고 구독하는데 사용함.
  • client는 원하는 채널에 가입하고 해당 채널로부터 데이터 업데이트를 수신함.

pusher를 사용하기 위해서는 API키를 얻어야 함. 이 후 클라이언트와 서버 양쪽에서 pusher라이브러리 로드

웹 소켓을 지원하지 않는 브라우저에서는 pusher.js가 자동으로 알맞은 폴백 방법을 사용하여 실시간 통신 제공

// realtime messenger - next.js (By Chat GPT)

실시간 메시지 기능을 구현하려면 Pusher를 사용하여 웹 애플리케이션과 Prisma를 통합해야 합니다. Pusher는 실시간 웹 기술을 제공하며, Prisma는 데이터베이스를 관리하기 위한 ORM(Object-Relational Mapping) 라이브러리입니다. 이 두 가지 기술을 함께 사용하여 실시간 메시지 전달을 구현해보겠습니다.

1. Pusher 설정: 먼저, Pusher 계정을 만들고 해당 계정에서 새 앱을 생성하세요. 그리고 해당 앱의 API 키를 얻어야 합니다. Pusher의 공식 문서나 대시보드를 통해 필요한 정보들을 확인할 수 있습니다.
2. Next.js 프로젝트 설정: Next.js 프로젝트를 만들고 필요한 라이브러리들을 설치하세요. 아래 명령어로 필요한 라이브러리를 설치합니다    npm install pusher-js prisma
3. Prisma 설정: Prisma를 설정하고 데이터베이스와 연결하세요. Prisma 클라이언트를 생성하여 필요한 모델과 스키마를 정의합니다.
4. Pusher 연결: Next.js 프로젝트에서 Pusher 라이브러리를 사용하기 위해 pusher-js를 import하세요. Pusher 객체를 생성하고 API 키를 사용하여 서버와 연결합니다.
5. 실시간 메시지 전달: 사용자가 메시지를 보낼 때, 해당 메시지를 Prisma를 통해 데이터베이스에 저장하고 동시에 Pusher를 통해 해당 메시지를 웹 클라이언트에 보냅니다. 웹 클라이언트는 Pusher로부터 받은 실시간 데이터를 처리하여 메시지를 즉시 띄우도록 구현합니다.

여기에 간단한 코드 예제를 제시하겠습니다. 다음 코드는 간단한 메시지 보내기와 실시간으로 메시지 받기를 처리하는 예제입니다. 다양한 상황과 추가 기능을 고려하여 프로젝트에 맞게 구현해야 합니다.

서버 측 코드 (Node.js - 예를 들어, Express를 사용할 수 있습니다):

const express = require('express');
const Pusher = require('pusher');

const app = express();
const pusher = new Pusher({
  appId: 'YOUR_PUSHER_APP_ID',
  key: 'YOUR_PUSHER_APP_KEY',
  secret: 'YOUR_PUSHER_APP_SECRET',
  cluster: 'YOUR_PUSHER_APP_CLUSTER',
  useTLS: true,
});

app.use(express.json());

app.post('/send-message', (req, res) => {
  // 메시지를 데이터베이스에 저장하고 클라이언트에 실시간으로 보낼 수 있도록 합니다.
  // Prisma를 사용하여 데이터베이스에 메시지 저장 로직을 구현합니다.

  const { sender, message } = req.body;

  pusher.trigger('chat', 'new-message', {
    sender,
    message,
  });

  res.json({ status: 'Message sent successfully' });
});

app.listen(3000, () => {
  console.log('Server listening on http://localhost:3000');
});

클라이언트 측 코드 (React - 예를 들어, Next.js를 사용할 수 있습니다):

import { useEffect, useState } from 'react';
import Pusher from 'pusher-js';

const RealtimeMessenger = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const pusher = new Pusher('YOUR_PUSHER_APP_KEY', {
      cluster: 'YOUR_PUSHER_APP_CLUSTER',
      encrypted: true,
    });

    const channel = pusher.subscribe('chat');
    channel.bind('new-message', (data) => {
      setMessages((prevMessages) => [...prevMessages, data]);
    });

    return () => {
      pusher.disconnect();
    };
  }, []);

  const handleSendMessage = (message) => {
    // 메시지를 서버로 전송하여 실시간으로 웹에 띄웁니다.
    // axios 또는 fetch를 사용하여 서버로 데이터 전송 로직을 구현합니다.

    // 예제에서는 간략하게 표현했습니다.
    fetch('/send-message', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ sender: 'John', message }),
    });
  };

  return (
    <div>
      <div>
        {messages.map((msg, index) => (
          <div key={index}>
            <span>{msg.sender}: </span>
            <span>{msg.message}</span>
          </div>
        ))}
      </div>
      <input type="text" onChange={(e) => handleSendMessage(e.target.value)} />
    </div>
  );
};

export default RealtimeMessenger;

위 예제는 간단한 틀을 보여주기 위해 일부 로직이 생략되었습니다. 프로젝트의 요구사항에 맞게 코드를 변경하고, Prisma의 모델과 스키마를 설정하여 메시지를 저장하고 검색할 수 있도록 구현해야 합니다. 또한 Pusher의 구독 체널, 이벤트 이름, 메시지 형식 등도 프로젝트에 맞게 조정해야 합니다.