Stream Chat React

by

오늘은 Stream Chat React으로 채팅을 만들어보려고 합니다.

Stream Chat React

Stream Chat는 사용자에게 채팅 API와 SDK를 제공하여 맞춤형 메시징 애플리케이션을 구축할 수 있도록 도와주는 도구입니다. 이를 통해 사용자는 빠르게 실시간 채팅을 구축할 수 있으며, 높은 신뢰성을 가진 채팅 인프라를 통해 쉽게 앱 내 메시징 기능을 제공할 수 있습니다.

실습방법

  • How to Create a Stream Application (스트림 어플리케이션을 생성하는 법)
  • How to Setup React Environment (리액트 환경 세팅 하는 법)
  • How to build a chat application with the pre-built React components ( 리액트 컴포넌트로 채팅앱을 만드는 법)
  • How to build custom components(커스텀한 컴포넌트를 개발하는 법)

 

How to Create a Stream Application (스트림 어플리케이션을 생성하는 법)

Stream 애플리케이션을 만드는 방법은 다음과 같습니다.

Stream 웹사이트에 가입하여 계정을 생성합니다.

대시보드로 이동하여 “Create App” 또는 “New Application” 등의 버튼을 클릭합니다.

생성된 애플리케이션에는 API 키와 비밀 키가 제공됩니다. 이 키들은 애플리케이션을 사용하는 데 필요한 인증 정보입니다.

How to Setup React Environment (리액트 환경 세팅 하는 법)

이 튜토리얼을 기반으로 Stream Chat React JS 애플리케이션을 가장 쉽게 구축하는 방법은 Vite를 사용하여 새 프로젝트를 생성하는 것입니다. Vite를 사용하면 몇 가지 간단한 명령으로 로컬에서 실행할 수 있는 보일러플레이트(기본 템플릿) React 애플리케이션을 생성할 수 있습니다.

시작하기 전에: MacOS를 사용 중이라면 Homebrew가 설치되어 있는지, 그리고 가장 최신 버전의 Node.js와 Yarn이 설치되어 있는지 확인하세요. (Linux 배포판을 사용 중이라면 NodeSource를 방문하여 Node.js를 설치하는 튜토리얼을 따라 진행하시기 바랍니다.)

Homebrew를 설치하려면 터미널에서 다음 명령을 실행하세요:

shell
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

MacOS에서 Homebrew를 사용하여 Node를 설치하려면 다음 명령을 실행하세요:

ruby
$ brew install node

Yarn을 설치하려면 다음 명령을 실행하세요:

csharp
$ npm install yarn --global

다음으로, TypeScript 템플릿을 사용하여 chat-example이라는 새로운 React 프로젝트를 Vite로 생성하세요:

shell
$ yarn create vite chat-example --template react-ts
$ cd chat-example
$ yarn add stream-chat stream-chat-react

위의 단계를 따라 하면 Stream Chat React 애플리케이션을 구축할 준비가 끝납니다. 이제 Vite를 사용하여 새 프로젝트를 빠르게 시작하고, Stream Chat 관련 패키지를 설치하여 애플리케이션을 개발할 수 있습니다.

 

How to build a chat application with the pre-built React components ( 리액트 컴포넌트로 채팅앱을 만드는 법)

React Stream Chat 애플리케이션 만들기

이 블로그에서는 Stream Chat을 사용한 React 애플리케이션을 만드는 절차를 친절하게 안내하겠습니다. 다음은 단계별로 진행해야 할 내용입니다:

  1. Create-React-App으로 프로젝트 생성하기:

먼저, Create-React-App을 사용하여 새로운 React 프로젝트를 생성합니다. 터미널에서 다음 명령을 실행하세요:

lua
npx create-react-app react-stream-chat-app

위 명령을 실행하면 react-stream-chat-app이라는 이름의 새 디렉토리가 생성되고, React 프로젝트 구조가 준비됩니다.

  1. 프로젝트 디렉토리로 이동하기:

생성된 프로젝트 디렉토리로 이동합니다. 터미널에서 다음 명령을 실행하세요:

bash
cd react-stream-chat-app
  1. Stream Chat 관련 패키지 설치하기:

Stream Chat과 관련된 패키지를 설치합니다. 이를 위해 다음 명령을 실행하세요:

npm install stream-chat stream-chat-react

위 명령을 실행하면 Stream Chat에서 제공하는 필수 패키지들이 설치됩니다.

  1. 프로젝트 열기:

프로젝트를 개발하기 위해 편집기(예: Visual Studio Code)에서 프로젝트를 엽니다. 터미널에서 다음 명령을 실행하세요:

css
code .

위 명령을 실행하면 Visual Studio Code가 열리고, react-stream-chat-app 프로젝트가 자동으로 열립니다.

How to build a chat application with the pre-built React components ( 리액트 컴포넌트로 채팅앱을 만드는 법)

import { StreamChat, User } from 'stream-chat';
import {
  Chat,
  Channel,
  ChannelHeader,
  MessageInput,
  MessageList,
  Thread,
  Window, 
} from 'stream-chat-react';

import 'stream-chat-react/dist/css/v2/index.css';

const userId = 'fragrant-base-4';
const userName = 'fragrant';

const user: User = {
  id: userId,
  name: userName,
  image: `https://getstream.io/random_png/?id=${userId}&name=${userName}`,
};

const apiKey = 'dz5f4d5kzrue';
const userToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiZnJhZ3JhbnQtYmFzZS00IiwiZXhwIjoxNjkwNDg2ODUwfQ.geY68OCaDCr2SKf-vZet_VlOItLlEpEXGNYtquemG7c';

const chatClient = new StreamChat(apiKey);
chatClient.connectUser(user, userToken);

const channel = chatClient.channel('messaging', 'custom_channel_id', {
  // add as many custom fields as you'd like
  image: 'https://www.drupal.org/files/project-images/react.png',
  name: 'Talk about React',
  members: [userId],
});

const App = () => (
  <Chat client={chatClient} theme='str-chat__theme-light'>
    <Channel channel={channel}>
      <Window>
        <ChannelHeader />
        <MessageList />
        <MessageInput />
      </Window>
      <Thread />
    </Channel>
  </Chat>
);

export default App;

 

    • Stream Chat 클라이언트 초기화하기:

    먼저, Stream Chat을 사용하기 위해 필요한 API 키와 비밀 키를 사용하여 클라이언트를 초기화합니다. 위 코드에서는 apiKey 변수에 API 키를, userToken 변수에 사용자 토큰을 저장하고, chatClient 변수를 통해 StreamChat 인스턴스를 생성합니다.

    • 사용자 정보 설정하기:

    채팅에 참여하는 사용자 정보를 설정합니다. 위의 코드에서는 userId와 userName을 설정하고, 사용자 객체를 생성하여 id, name, image를 포함한 사용자 정보를 정의합니다.

    • 채널 생성하기:

    특정 주제나 대화를 위한 채널을 생성합니다. 위 코드에서는 channel 변수를 사용하여 messaging 타입의 채널을 생성하고, custom_channel_id를 지정합니다. 이때, 필요에 따라 추가적인 사용자 지정 필드를 포함할 수 있습니다.

    • 미리 구축된 컴포넌트 사용하기:

    Stream Chat은 미리 구축된 컴포넌트를 제공하여 채팅 인터페이스를 구축하는 데 도움을 줍니다. 위의 코드에서는 Chat, Channel, Window, ChannelHeader, MessageList, MessageInput, Thread 등의 컴포넌트를 사용하여 채팅 창을 구성합니다.

    • 사용자와의 상호작용 구현하기:

    사용자가 채팅 창을 사용하고 메시지를 주고받을 수 있도록 상호작용 기능을 구현합니다. 사용자가 메시지를 입력하거나 채팅을 스크롤하면 미리 구축된 컴포넌트가 이를 처리합니다.

How to build custom components(커스텀한 컴포넌트를 개발하는 법)

  1. 필요한 기능과 디자인을 갖춘 커스텀 컴포넌트를 생성합니다. 이는 React 컴포넌트를 기반으로 구현됩니다.
  2. Stream Chat 클라이언트와 연결하기 위해 필요한 인증 정보인 API 키와 비밀 키를 사용하여 클라이언트를 초기화합니다.
  3. 커스텀 컴포넌트에서 Stream Chat 클라이언트를 사용하여 메시지를 보내고 받는 기능 등을 구현합니다.
  4. 필요에 따라 스타일링을 적용하여 컴포넌트를 사용자 정의합니다.

Leave a Comment