就以Taro为例子,对实时数据库的应用进行示例。

实时效果

1k1QzdxoX7rykh3U.jpg

安装依赖

npm install @minappjs/weapp

使用

chat表的新增数据进行订阅。如下:

import React, {useEffect, useState} from 'react'
import {View, Text, Button} from '@tarojs/components'

import {subscribe, unsubscribe} from '@minappjs/weapp'

import {TABLE} from '../../constants/constants'

function Index() {

  const [say, setSay] = useState([])
  
  useEffect(() => {
    subscribe(TABLE.chat, 'create', (res) => {
      console.log('AAAAAAAAAAA', res)
      if(res.event === 'on_create'){
        setSay(prev => ([...prev, res.after]))
      }
    })
  }, [])

  return(
    <View>
      {say.map((item, index) => (
        <View key={item.id}>
          <Text className='content'>{item.content}</Text>
        </View>
      ))}
      <Button
        onClick={() => {
          unsubscribe(TABLE.chat, 'create')
        }}
      >取消订阅</Button>
    </View>
  )
}

export default Index

注意点

数据表的权限会影响订阅是否有返回,请确认当前用户是否有读写的权限
使用subscribeunsubscribe时,必须一一对应。如

subscribe(TABLE.chat, 'create', (res) => {
  if(res.event === 'on_create'){
       
  }
}, '5')
//对应
unsubscribe(TABLE.chat, 'create', '5')

/************************************/

subscribe(TABLE.chat, 'update', (res) => {
  if(res.event === 'on_update'){
       
  }
})
//对应
unsubscribe(TABLE.chat, 'update')

wzj5cnaz
23 声望1 粉丝