Stream Chat React
made with React

Stream Chat React

这是一个用于自定义聊天应用程序的聊天API和SDK。

相关问答
暂无相关问题
查看全部
简介及使用教程

Stream Chat React是一个用于自定义聊天应用程序的聊天API和SDK,让用户能在更短的时间内建立实时聊天应用。

借助高度可靠的聊天基础结构,产品团队可以快速发布应用内消息,推动应用内转换、参与和保留。

借助Stream的聊天React组件、SDK和UI套件,产品团队可以只需几行代码,即可在Web上或作为移动应用程序释放强大的聊天体验,并通过Stream灵活的后端消息传递API和前端组件最大化开发带宽。

Stream Chat React可以与Stream的React和React Native组件一起使用。

安装

Npm

npm i stream-chat

Yarn

yarn add stream-chat

使用

引入组件

import { StreamChat } from 'stream-chat';

// or

const StreamChat = require('stream-chat').StreamChat;

客户端

const client = new StreamChat("YOUR_API_KEY");
await client.setUser(
    {
        id: 'jlahey',
        name: 'Jim Lahey',
        image: 'https://i.imgur.com/fR9Jz14.png',
    },
    "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiamxhaGV5In0.OkDbpbujWJ-XIVHaf00Dnqt3v8Yp_nQ6CGzm-Z4QUVc",
);

频道设置

const channel = client.channel('messaging', 'travel', {
    name: 'Awesome channel about traveling',
});

// fetch the channel state, subscribe to future updates
const state = await channel.watch();

发送消息

const text = 'I’m mowing the air Rand, I’m mowing the air.';

const response = await channel.sendMessage({
    text,
    customField: '123',
});

事件

channel.on('message.new', event => {
    console.log('received a new message', event.message.text);
    console.log(`Now have ${channel.state.messages.length} stored in local state`);
});

示例

image.png

image.png

image.png

作者

getstream.io

@getstream_io

相关项目

这是一个歌曲歌词搜索APP。
这是一个可定制和复用的React Native组件库。
这是一个基于React多设计选型的完全自定义头部视图组件。
这是一个是一个iOS,Android和React Native库。
这是一个体重和卡路里跟踪应用。