채팅 관리 지원 대시보드 만들기

In this tutorial, we'll build a chat app with a dashboard that allows an admin user to switch between one-on-one customer chat channels in the same window.

바쁜 고객 지원 대표로서, 채팅 프로그램에 걸리고 싶지 않다. 이 프로그램은 새로운 창에서 모든 채팅을 열어 여러 브라우저 옵션 카드 사이를 순환하게 하고, 열려 있는 기록을 잃어버릴 수도 있다.본고에서 구축한 응용 프로그램은 촘촘한 계기판에 모든 고객의 채팅을 표시할 것입니다. 계기판은 새로운 메시지가 나타날 때 굵게 (iMessage 같은) 표시되고 채팅 사이의 신속하고 가벼운 내비게이션을 지원할 수 있습니다.그 밖에 이것은 몇 시간이 아니라 몇 분밖에 걸리지 않는다.

요구 사항

node.js

React

A (무료) Stream 시용계좌

React Hooks과 Express의 기본 지식.

출신 배경

흐르는 채팅은 이 응용 프로그램에 채팅 인프라 시설과 기본적인 기존 스타일을 제공한다.주제는 Express JS와 React를 사용하여 설명하지만 대부분의 언어와 프레임워크에 이식할 수 있습니다.
이 문장은 너를 Git Repository here을 통과하도록 인도할 것이다.

흐름 설정

자유 유동 시용 계정이 필요합니다.grab yours here . 등록 후 Stream dashboard에 새 응용 프로그램을 만듭니다.

이것은 계기판

의 내비게이션 표시줄 링크입니다

대시보드에서 "응용 프로그램 만들기"단추

을 사용하여 새 응용 프로그램 만들기

응용 프로그램의 이름을 지정하고 "개발"모드를 선택하십시오.

API 키와 암호를 생성합니다. 나중에 .env 파일에 추가합니다.

스트림 인증 검사 및 권한 비활성화

기본적으로 Stream은 인증 및 권한 검사를 제공합니다.이것은 어떤 생산 환경에도 매우 유용하지만, 이런 상황에서 우리는 그것들을 사용하지 않을 것이다.방법은 다음과 같습니다.

의 흐름 계기판에서 응용 프로그램을 선택하십시오.채팅 탐색 모음 드롭다운 메뉴를 클릭하고 개요

을 선택합니다.

아래로 스크롤하여 인증 검사 비활성화 및 권한 검사 비활성화 전환을 활성화합니다.

.환경 구성

Git Repo에는 backend의 .env.example이라는 파일이 포함되어 있습니다.여기에 스트림 API 키와 스트림 기밀을 추가한 다음 파일을 .env으로 이름을 바꿉니다.

// backend/.env.example:1
NODE_ENV=development
PORT=8080

STREAM_API_KEY= your Stream API key here
STREAM_API_SECRET= your Stream API secret here

회전 "Er"

너의 응용 프로그램은 지금 실행할 수 있을 것이다.이 프로그램은 frontend을 사용하여 만든 stream-chat-react 폴더와 backend을 사용하여 만든 npm express-generator 폴더로 나뉩니다.
컴퓨터에서 응용 프로그램을 시작하려면 npm install 및 npm run start 폴더에서 frontend 및 backend을 실행하십시오.실행 후 http://localhost:3000으로 이동하여 frontend을 보십시오.이제 우리는 이 응용 프로그램의 작업 원리를 깊이 이해할 수 있다.

라우터

프런트엔드는 Admin 어셈블리와 Customer 어셈블리 간에 분할됩니다.모든 사람은 자신의 로그인 페이지와 채팅 창을 가지고 있다.이것은 Router으로 이 두 가지를 구분하는 데 쓰인다.

// frontend/src/index.js:9
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Switch>
        <Route path="/" exact={true}>
          <Customer />
        </Route>
        <Route path="/admin" exact={true}>
          <Admin />
        </Route>
      </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

고객 로그인을 보려면 localhost:3000/으로 이동합니다.관리자 로그인을 보려면 localhost:3000/admin으로 이동하십시오.

고객 로그인(프런트엔드)

Customer 구성 요소의 로그인 부분을 연구해 보겠습니다.

// frontend/src/Customer.js:105
return (
  <div className="App container">
    <form className="card" onSubmit={register}>
      <label>First Name</label>
      <input
        type="text"
        value={firstName}
        onChange={(e) => setFirstName(e.target.value)}
        placeholder="first name"
        required
      />
      <label>Last Name</label>
      <input
        type="text"
        value={lastName}
        onChange={(e) => setLastName(e.target.value)}
        placeholder="last name"
        required
      />
      <label>Email</label>
      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="email"
        required
      />
      <button type="submit">
        Start chat
      </button>
    </form>
  </div>
);

위의 코드 세그먼트는 다음을 반환합니다.

이 간단한 로그인 폼은 firstName, lastName, email을 포함한다.이것은 register 함수에서 백엔드로 전송될 상태 변수입니다.레지스터 함수의 앞부분, 즉 POST에서 뒷부분으로

// frontend/src/Customer.js:29
e.preventDefault();
const response = await fetch('http://localhost:8080/customer-login', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstName,
    lastName,
    email,
  }),
});

전송 중인 내용을 명확하게 표시하기 위해 라이브러리가 없는 상태에서 이 요청을 작성합니다.단순화를 원하신다면 axios 라이브러리를 사용하시기 바랍니다.
다음은 백엔드가 어떻게 등록을 처리하는지 봅시다.

고객 로그인(백엔드)

먼저 백엔드는 serverSideClient을 구성하여 고유한 Stream API 키와 기밀을 사용하여 인증하는 Stream에서의 유효성을 설정해야 합니다.

// backend/routes/api.js:5
const streamApiKey = process.env.STREAM_API_KEY;
const streamApiSecret = process.env.STREAM_API_SECRET;
const serverSideClient = new StreamChat(streamApiKey, streamApiSecret);

다음은 /customer-login 단점에서 고객의 입력을 받고 채팅을 등록합니다.다음은 프로세스입니다.

규범화 전방에서 온 고객 입력

고객 생성 영패

채팅 채널 열기

채널에 멤버 추가

이 데이터를 전방

으로 되돌려줍니다.
유고가 어떻게 이 과정의 주력이 되었는지 주의하여 .createToken, .updateUser, .channel과 .addMembers 등의 방법을 제공하였다.

// backend/routes/index.js:10
router.post('/customer-login', async (req, res) => {
  try {
    const firstName = req.body.firstName.replace(/\s/g, '_');
    const lastName = req.body.lastName.replace(/\s/g, '_');
    const username = `${firstName}${lastName}`.toLowerCase();

    const customerToken = serverSideClient.createToken(username);
    await serverSideClient.updateUser(
      {
        id: username,
        name: firstName
      },
      customerToken
    );

    const channel = serverSideClient.channel('messaging', username, {
      name: `Chat with ${username}`,
      created_by: { id: 'admin' },
      members: [username, 'admin']
    });

    await channel.create();
    await channel.addMembers([username, 'admin']);

    res.status(200).json({
      customerId: username,
      channelId: username,
      customerToken,
      streamApiKey,
    });

  } catch (err) {
    console.error(err);
    res.status(500).json({ error: err.message });
  }
});

위의 흐름 방법에 대한 유용한 설명:

.createToken은 매개 변수의 사용자 이름을 받아들여 채팅 중인 모든 참여자에게 유일한 영패를 생성합니다.

.updateUser은 사용자 id을 보내야 하며 name을 적용할 수 있는 대상을 수신합니다.이 방법은 사용자의 영패가 필요하다.

.channel 수락(채널 유형, 채널 id, 옵션 대상).members 그룹을 지정함으로써 채널 접근을 지정한 사용자 id를 가진 사용자로 제한합니다.

다음으로, 우리는 전단에서 백엔드 응답을 어떻게 받는지 검사할 것이다.

채팅 초기화(프런트엔드)

registration 중 전단 Customer.js 함수의 뒷부분을 연구해 보겠습니다.

// frontend/src/Customer.js:43
try {
  //...

  const { customerId, customerToken, channelId, streamApiKey } = await response.json();
  chatClient = new StreamChat(streamApiKey);

  await chatClient.setUser(
    {
      id: customerId,
      name: firstName,
    },
    customerToken,
  );

  const channel = chatClient.channel('messaging', channelId, {
    name: `Chat with ${customerId}`
  });

  await channel.watch;
  setChannel(channel);

} catch (e) {
  console.error(e, e.error);
}

백엔드의 응답은 비구조적이다.백엔드에서 채팅 설정을 미러링하려면 다음 절차를 따르십시오.

사용자 설정

은

을 추가하기 위한 프런트엔드 구성 채널입니다.

사용자 브라우저가 채널

에서 발생하는 모든 이벤트를 수신할 수 있도록 채널 보기

나중에 채팅

을 렌더링할 때 채널 상태를 사용할 수 있도록 setChannel(channel) 호출

고객 채팅 제공

channel이 구축된 이상 고객 채팅은 다음 코드 블록을 되돌려줍니다.

// frontend/src/Customer.js:66
if (channel) {
  return (
    <Chat client={chatClient} theme="commerce light">
      <Channel channel={channel}>
        <Window>
          <div className="stream-header">
            <div className="str-header-left">
              <p className="stream-header-left-title">
                Customer Support Chat
              </p>
            </div>
            <div className="str-chat__header-livestream-right">
              Second National Bank
            </div>
          </div>
          <MessageList
            typingIndicator={TypingIndicator}
            Message={MessageCommerce}
          />
          <MessageInput Input={MessageInputFlat} focus />
        </Window>
      </Channel>
    </Chat>
  );
} else {
  // ...
}

여기서 Stream은 채팅 구축에 필요한 모든 구성 요소를 다시 제공합니다.헤더는 선택할 수 있는 포함 항목이지만, 내장된 데이터 흐름을 사용할 수 있는 기회를 준다.

⭐️Good to know: Stream offers loads of convenient channel data we can use anywhere in our apps. We can replace the Second National Bank header with something like: Welcome, {client.user.name}, to render:

<Chat /> 구성 요소에는 몇 가지 아름다운 기존 테마가 있습니다.본 예에서 우리는 commerce light을 사용할 것이다.Here's a list개의 사용 가능한 테마입니다.
우리가 방금 만든 채널은 <Channel /> 구성 요소에 지정되어 있습니다.<MessageList />과 <MessageInput />도 customized이 되기 쉽다.이것이 바로 우리가 고객측에 대한 모든 수요이다.Admin 구성 요소를 살펴보겠습니다.

관리자 로그인

관리자 로그인 페이지는 고객과 같은 절차를 시뮬레이션했지만 폼 입력의 Admin Id만 받아들였습니다.이것은 표입니다.

// frontend/src/Admin.js:81
return (
  <div className="App container">
    <form className="card" onSubmit={register}>
      <label>Admin Id</label>
      <input
        type="text"
        value={adminId}
        onChange={(e) => setAdminId(e.target.value)}
        placeholder="Enter your admin ID"
        required
      />
      <button type="submit">
        Start chat
      </button>
    </form>
  </div>
);

이것은 등록 함수입니다. POST만 adminId이지만 같은 채널 설정을 따릅니다.

// frontend/src/Admin.js:23
const register = async (e) => {
  try {
    e.preventDefault();
    const response = await fetch('http://localhost:8080/admin-login', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        adminId,
      }),
    });

    const { adminToken, streamApiKey, adminName } = await response.json();
    chatClient = new StreamChat(streamApiKey);

    await chatClient.setUser(
      {
        id: adminName,
        name: 'Administrator'
      },
      adminToken,
    );

    const channel = chatClient.channel('messaging', 'livechat');

    await channel.watch();
    setChannel(channel);

  } catch (e) {
    console.error(e);
  }
};

이것은 /customer-login 단점과 거의 같다.그것은 영패를 만들고 클라이언트를 초기화하며 사용자를 설정하고 통용 채널을 엽니다.새로운 고객이 채팅을 시작하면 채널 목록이 자동으로 채워집니다.

렌더 관리 대시보드

다음은 대시보드의 모양을 관리하는 것입니다.

고객과 관리자 등록 간의 주요 차이점은 나타나는 흐름 구성 요소에 있다.

// frontend/src/Admin.js:59
return (
  <Chat client={chatClient} theme={"messaging light"}>
    <ChannelList
      sort={{ last_message_at: -1 }}
      Preview={ChannelPreviewMessenger}
      onSelect={(channel) => { setChannel(channel); }}
    />
    <Channel>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput focus />
      </Window>
      <Thread />
    </Channel>
  </Chat >
);

<ChannelList /> 구성 요소를 참고하십시오.이것은 응용 프로그램이 관리하는 모든 채널을 포함하는 사이드 창을 처리하는 데 사용되는 또 다른 내장 흐름입니다.흐름 API는 각 채널의 기록을 유지합니다.ChannelList 구성 요소는 새로운 채팅을 시작하고 메시지를 보낼 때 보기를 업데이트하는 데 대량의 탐지기를 추가합니다.sort 옵션은 목록 상단에 최근 메시지에 대한 채팅을 표시합니다.Preview은 최신 메시지의 단면을 보여 줍니다.onSelect은 setChannel 상태 방법으로 선택한 채널을 표시합니다.

되돌아보다

여기 있습니다!강력한 관리 계기판을 갖춘 기능이 완비된 채팅 응용 프로그램이 강좌는 Stream 사용에 대해 추가적인 견해를 제공할 수 있기를 바랍니다.Stream Chat Docs과 Stream Chat React Docs을 보고 더 많은 프로젝트의 영감과 지도를 얻으십시오.