Development Special

Is integrating Stream's Chat API in your react-app difficult?

Feza's photo
Feza
·

2 min read

Table of contents

Let's see,

Before proceeding to answer this question let's see, what is actually Stream's Chat API?

  • This API functions similar to your messaging apps.

  • This API is brought to you by STREAM.

  • To use the API, of course, you have to integrate it into your app.

Is it difficult to integrate?

Let's get to the point, before concluding let me tell you my experience in using it.

  • Firstly, I created my react app, and simultaneously proceeded by watching the tutorial 'HOW TO INTEGRATE THE CHAT API'.

  • I was following each line of the code as in the tutorial video, But it was too difficult for me to follow it.

  • But then, I remembered it has a documentation, so proceeded to see the documentation.

  • I regretted, why didn't I have seen the documentation first, it was too easy to understand. So easy that I can explain it to anyone right away.

A short tutorial to make it easy,

  1. After creating create-react-app, install the chat client.

    npm install stream-chat

  2. After this import it into your app.

    import { StreamChat } from 'stream-chat'

  3. The first step is to get the client instance.

    const client = StreamChat.getInstance("API_KEY");

  4. Now connect it to a user.

    await client.connectUser(
    {
        id: 'jlahey',
        name: 'Jim Lahey',
        image: 'https://i.imgur.com/fR9Jz14.png',
    },
   //"token",
)

  5. Now, the user is connected to the client.

  6. We have to create a channel, so that the members can send messages.

    const channel =client.channel('team','general',{
      name:'General',
      image:"https://images.unsplash.com/photo-1664575599618-8f6bd76fc670?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxzZWFyY2h8MXx8dGVhbXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=1000&q=60",
    })
await channel.create();

  7. These are the only steps to get started, you can more dive into the documentation to get UI components to display.

To conclude, integrating Stream's Chat API isn't difficult at all.

Stream's Chat API Documentation

Message-app: My web app using Stream's chat API.

GitHub Repo

My LinkedIn

GitHub

WeMakeDevsstream ApiReactAPIsintegration