Upstash Chatbox 발표

즉각적인 대화형 커뮤니케이션은 만족스러운 사용자 경험을 위해 매우 중요합니다. 이것이 많은 기업이 웹사이트에 실시간 채팅창 위젯을 제공하는 이유입니다.

정의

이것은 웹사이트의 관리자 채팅 패널과 함께 사용자와 개발자/관리자를 연결하는 채팅 상자 위젯입니다. 이러한 방식으로 피어 간의 대화식 통신을 설정할 수 있습니다.

이 프로젝트는 스토리지를 위해 Upstash Redis와 함께 Next.js를 사용합니다.

사용자가 대화를 시작함

새로 시작한 채팅에 대한 알림은 Slack으로 전송됩니다.

관리자가 회신할 수 있음

여기에서 데모를 볼 수 있습니다.

채팅 ID가 콘솔에 표시됩니다. 참고하고 /chat/{id}로 이동합니다. 관리자 패널과 두 인터페이스가 서로 상호 작용하는 방식을 확인합니다.

1. 데이터베이스 및 환경 변수 생성

데이터는 Upstash Redis에 보관됩니다.

Upstash 콘솔에서 무료 Redis 데이터베이스 생성

.env.local.example 복사 .env.local에 파일 (Git에서 무시됨):

cp .env.local.example .env.local

• UPSTASH_REDIS_REST_URL 및 UPSTASH_REDIS_REST_TOKEN Upstash 콘솔의 데이터베이스 세부 정보 페이지에서 찾을 수 있습니다.
• SLACK_WEBHOOK_URL https://api.slack.com/messaging/webhooks
의 Slack 통합 페이지에서 찾을 수 있습니다.

2. 패키지 설치

yarn add @upstash/chatbox

3. CSS 및 위젯 가져오기

// pages/_app.js

import "@upstash/chatbox/index.css";
import dynamic from "next/dynamic";

const ChatBoxWidget = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxWidget),
  ssr: false,
});

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <ChatBoxWidget />
      <Component {...pageProps} />
    </>
  );
}

옵션은 React 소품으로 전달할 수 있습니다.

4. 관리자 대시보드

// pages/chat/[id].js

import dynamic from "next/dynamic";

const ChatBoxAdmin = dynamic({
  loader: () => import("@upstash/chatbox").then((mod) => mod.ChatBoxAdmin),
  ssr: false,
});

export default function () {
  return <ChatBoxAdmin />;
}

5. API 생성

// pages/api/chatbox/[...chatbox].js

import createChatBoxAPI from "@upstash/chatbox/api";

const ChatBoxAPI = createChatBoxAPI({
  webhooks: [process.env.SLACK_WEBHOOK_URL],
});

export default ChatBoxAPI;

축하합니다!

이제 사용자를 위한 대화 상자가 생겼습니다! 즐기세요!

여기에서 소스 코드를 볼 수 있고 여기에서 npm 패키지를 볼 수 있습니다.

이 프로젝트 또는 일반적으로 귀하의 피드백과 아이디어에 감사드립니다. 저희 서비스에 대한 피드백이나 생각이 있으시면 트위터나 디스코드를 통해 보내주세요.