当组件被安装时，通道要么从现有的抓取，要么创建一个新的。此通道稍后会保存在组件中的持久性状态中。单击组件时，所有通道消息都会更新为已使用。
该代码属于“今日轮班频道”栏目。右侧代码是单独的。
Senario：当我单击一个用户时 onTaskSelect 被调用，它在设置所有消耗的消息后触发右侧的整个用户聊天。这里出现问题 1 和 2。现在我单击另一个用户并单击返回到以前单击的用户问题 3 发生
问题：
1）它不更新消费的消息并且总是返回零。
2) 它停止接收来自 joinOrCreate 函数中调用的.on侦听器的新消息。
3) 在出现错误 SyncError 的重复点击响应中：在 http 的 mapTransportError ( http://localhost:3000/static/js/0.chunk.js:162153:12 ) 处
禁止访问身份（状态：403，代码：54007 ） ://localhost:3000/static/js/0.chunk.js:162210:20
注意：频道设置一次并且永远不会离开，除非页面刷新
注意：右侧的整个聊天工作正常，并且位于单独的模块中。
注意：客户端在应用程序开始时被初始化为上下文，该上下文在应用程序从打开到关闭的整个生命周期中持续存在。
const TaskCard = props => {
const [lastMessage, setLastMessage] = useState({})
const [open, setOpen] = useState(false)
const [unread, setUnread] = useState(0)
const [channel, setChannel] = useState({})
const joinOrCreate = useCallback(async() => {
try{
const fetchedChannel = await props.client.getChannelByUniqueName(props.task.id.toString())
let joined = fetchedChannel
if(fetchedChannel.state.status !== "joined") {
joined = await fetchedChannel.join()
}
console.log()
joined.getMessages()
.then(messages => {
if(messages.items.length > 0) {
if(joined.lastConsumedMessageIndex < messages.items.length - 1) {
setUnread(true)
}
const recent_message = messages.items[messages.items.length - 1]
const limit_message = recent_message.body.slice(0,14)
setLastMessage({
body: limit_message.length === 14? (limit_message + '...') : limit_message,
time: recent_message.timestamp,
index: recent_message.index,
})
}
})
joined.on('messageAdded', messageUpdated)
setChannel(joined)
}
catch(ch) {
console.log(ch)
try{
const newChannel = await props.client.createChannel({
uniqueName: props.task.id.toString(),
friendlyName: 'General Chat Channel'
})
let joined = newChannel
if(newChannel.state.status !== "joined") {
joined = await newChannel.join()
}
joined.getMessages()
.then(messages => {
if(messages.items.length > 0) {
const recent_message = messages.items[messages.items.length - 1]
setLastMessage({
body: recent_message.body,
time: recent_message.timestamp,
})
}
})
joined.on('messageAdded', messageUpdated)
setChannel(joined)
}
catch(e) {
console.log(e)
}
}
}, [props.client, props.task.id])
const messageUpdated = message => {
const limit_message = message.body.slice(0,14)
setLastMessage({
body: limit_message.length === 14? (limit_message + '...') : limit_message,
time: message.timestamp,
index: message.index
})
}
const onTaskSelect = () => {
// console.log(lastMessage.index)
console.log(channel.uniqueName)
if(lastMessage.body) {
channel.updateLastConsumedMessageIndex(+lastMessage.index)
.then(res => {
console.log(res)
})
.catch(e => {
// console.log(props.client)
// console.log(channel)
console.log(e)
})
}
props.onTaskClick(props.task.id.toString())
}
useEffect(() => {
if(props.channelId === props.task.id) {
setOpen(true)
setUnread(false)
}
else {
setOpen(false)
}
}, [props.channelId, props.task.id])
useEffect(() => {
joinOrCreate()
}, [joinOrCreate])
useEffect(() => {
if(channel.lastConsumedMessageIndex < lastMessage.index && !open) {
setUnread(true)
}
}, [channel.lastConsumedMessageIndex, lastMessage, open])
return (
<Row key={props.task.id} >
<Col className='justify-center'>
<Card className={'more-than-90 ' + (open? 'background-active' : null)}
onClick={e => onTaskSelect()}
>
<Row>
<Col md={2} style={{alignSelf: 'center', paddingLeft:'15px'}}>
{
props.task.worker.pic_url === "" || props.task.worker.pic_url === null ?
<div className="name-image">
{props.task.worker.first_name[0] + props.task.worker.last_name[0]}
</div>
:
<Image width={50} height={50} src={props.task.worker.pic_url} roundedCircle />
}
</Col>
<Col md={10}>
<Row>
<Col md={8}>
<p style={{fontSize:'.9rem'}}>{props.task.worker.name}</p>
</Col>
<Col>
<p style={{fontSize:'.7rem'}} className='left-align-text'>{lastMessage.time? moment(lastMessage.time).format('hh:mm A') : null}</p>
</Col>
</Row>
<Row>
<Col md={8}>
<p style={{fontSize:'.7rem'}}>{lastMessage.body? lastMessage.body : null}</p>
</Col>
<Col>
{
unread ?
<FontAwesomeIcon
icon={faEnvelopeOpenText}
size="lg"
color={"#0064bb"}
/>
:
null
}
</Col>
</Row>
</Col>
</Row>
</Card>
</Col>
</Row>
)
}
