Upstashチャットボックスの発表

ここでデモを見ることができます。

チャットIDがコンソールに表示されていることに注意してください。注意して、/chat/{id}に移動します 管理パネルと、両方のインターフェースが相互にどのように相互作用するかを確認します。

1。データベースと環境変数を作成する

データはUpstashRedisに保存されます。

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パッケージを見ることができます。

このプロジェクトについて、または一般的に、私たちはあなたのフィードバックとアイデアを高く評価します。当社のサービスに関するフィードバックや考えをお伝えしたい場合は、TwitterまたはDiscordを介して行うことができます。