Stream Chat React
made with
React
简介及使用教程
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`);
});
示例
作者
getstream.io
@getstream_io相关项目