home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Redis

ประกาศแชทบ็อกซ์ Upstash

การสื่อสารแบบโต้ตอบทันทีเป็นสิ่งสำคัญสำหรับประสบการณ์การใช้งานที่น่าพอใจ นี่คือเหตุผลที่หลายบริษัทมีวิดเจ็ตแชทสดบนเว็บไซต์

มันคืออะไร

นี่คือวิดเจ็ตช่องแชท ควบคู่ไปกับแผงแชทของผู้ดูแลระบบสำหรับเว็บไซต์ เชื่อมต่อผู้ใช้กับนักพัฒนา/ผู้ดูแลระบบ ด้วยวิธีนี้ สามารถสร้างการสื่อสารแบบโต้ตอบระหว่างเพื่อนร่วมงานได้

โปรเจ็กต์นี้ใช้ Next.js ควบคู่ไปกับ Upstash Redis สำหรับการจัดเก็บ

ผู้ใช้เริ่มการสนทนา

ประกาศแชทบ็อกซ์ Upstash

การแจ้งเตือนสำหรับการแชทที่เริ่มต้นใหม่ไปที่ Slack

ประกาศแชทบ็อกซ์ Upstash

แอดมินตอบได้

ประกาศแชทบ็อกซ์ Upstash

คุณสามารถดูการสาธิตได้ที่นี่

โปรดสังเกตว่า ID แชทจะแสดงในคอนโซล สังเกตว่าและไปที่ /chat/{id} เพื่อดูแผงการดูแลระบบและวิธีที่อินเทอร์เฟซทั้งสองโต้ตอบกัน

1. สร้างฐานข้อมูลและตัวแปรสภาพแวดล้อม

ข้อมูลจะถูกเก็บไว้ที่ Upstash Redis

สร้างฐานข้อมูล Redis ฟรีที่ Upstash Console

คัดลอก .env.local.example ไฟล์ไปที่ .env.local (ซึ่งจะถูกละเว้นโดยGit):

cp .env.local.example .env.local
  • UPSTASH_REDIS_REST_URL และ UPSTASH_REDIS_REST_TOKEN สามารถพบได้ที่หน้ารายละเอียดฐานข้อมูลใน Upstash Console
  • SLACK_WEBHOOK_URL สามารถพบได้ที่หน้าการรวม Slack ใน https://api.slack.com/messaging/webhooks

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 props

คีย์ ประเภท ค่าเริ่มต้น
themeColor? string #2d00c6
textColor? string #fff
title? string สวัสดีครับ 👋
description? string ถามอะไรเราได้เลย หรือแบ่งปันความคิดเห็นของคุณ
showOnInitial? boolean เท็จ
customIcon? React.ReactElement

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