Computer >> Máy Tính >  >> Lập trình >> Redis

Thông báo Upstash Chatbox

Giao tiếp tức thì, tương tác là yếu tố quan trọng để có trải nghiệm người dùng hài lòng. Đây là lý do tại sao nhiều công ty cung cấp tiện ích hộp trò chuyện trực tiếp trên trang web của họ.

Nó là gì

Đây là một tiện ích hộp trò chuyện, cùng với bảng trò chuyện quản trị cho các trang web, kết nối người dùng với nhà phát triển / quản trị viên. Bằng cách này, một giao tiếp tương tác giữa các đồng nghiệp có thể được thiết lập.

Dự án này sử dụng Next.js, cùng với Upstash Redis để lưu trữ.

Người dùng bắt đầu cuộc trò chuyện

Thông báo Upstash Chatbox

Thông báo cho cuộc trò chuyện mới bắt đầu sẽ được gửi tới Slack

Thông báo Upstash Chatbox

Quản trị viên có thể trả lời

Thông báo Upstash Chatbox

Bạn có thể xem bản demo tại đây.

Lưu ý rằng id trò chuyện được hiển thị trong bảng điều khiển. Lưu ý điều đó và truy cập /chat/{id} để xem bảng điều khiển quản trị và cách cả hai giao diện tương tác với nhau.

1. Tạo biến cơ sở dữ liệu và môi trường

Dữ liệu sẽ được lưu giữ tại Upstash Redis.

Tạo cơ sở dữ liệu Redis miễn phí tại Upstash Console

Sao chép .env.local.example tệp thành .env.local (sẽ bị bỏ qua bởiGit):

cp .env.local.example .env.local
  • UPSTASH_REDIS_REST_URL và UPSTASH_REDIS_REST_TOKEN có thể tìm thấy tại trang chi tiết cơ sở dữ liệu trong Upstash Console.
  • SLACK_WEBHOOK_URL có thể tìm thấy tại trang tích hợp Slack trong https://api.slack.com/messaging/webhooks

2. Cài đặt gói 

yarn add @upstash/chatbox

3. Nhập CSS và Tiện ích con 

// 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} />
    </>
  );
}

Các tùy chọn có thể được chuyển dưới dạng đạo cụ React

Phím
loại mặc định
themeColor? string # 2d00c6
textColor? string #fff
title? string Xin chào 👋
description? string Hãy hỏi chúng tôi bất cứ điều gì hoặc chia sẻ phản hồi của bạn.
showOnInitial? boolean sai
customIcon? React.ReactElement

4. Trang tổng quan dành cho quản trị viên 

// 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. Tạo API 

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

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

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

export default ChatBoxAPI;

Xin chúc mừng!

Bây giờ bạn có hộp trò chuyện của riêng bạn cho người dùng! Hãy tận hưởng!

Bạn có thể xem mã nguồn tại đây và gói npm tại đây.

Về dự án này hay nói chung, chúng tôi đánh giá cao những phản hồi và ý tưởng của bạn. Nếu bạn muốn đưa ra bất kỳ phản hồi hoặc suy nghĩ nào về dịch vụ của chúng tôi, bạn có thể làm như vậy thông qua twitter hoặc discord.