Never Punch Manticores

    cozy-realtime

    4.2.3 • Public • Published

    Cozy Realtime


    Subscribe to cozy-stack server side events cozy-stack via Websocket.

    Install

    npm install --save cozy-realtime`
    yarn add cozy-realtime

    Setup

    CozyRealtime comes with a plugin for cozy-client. This is the recommended way to setup:

    // setup.js
    import CozyClient from 'cozy-client'
    import { RealtimePlugin } from 'cozy-realtime'
    
    const client = new CozyClient({})
    client.registerPlugin(RealtimePlugin)

    Then, you can listen for a whole doctype, thanks to the <RealTimeQueries> component, provided by cozy-client. This will automatically subscribe to all the events occuring on the specified doctype and accordingly update the store, so your app will reflect the data changes in realtime.

    // App.js
    import { RealTimeQueries } from 'cozy-client'
    
    <App>
      <RealTimeQueries doctype="io.cozy.files" />
      ...
    </App>

    Simple, isn't it?

    Manual subscribe

    If your app needs to handle specific events on the data, you need to subscribe/unsubscribe like this:

    const realtime = client.plugins.realtime
    realtime.subscribe('created', 'io.cozy.bank.accounts', handleBankAccountCreated)
    realtime.unsubscribe('created', 'io.cozy.bank.accounts', handleBankAccountCreated)

    Example

    It is important to unsubscribe when unmounting React components.

    // some-component.js
    
    const handleCreate = accounts => {
      console.log(`A new 'io.cozy.accounts' is created with id '${accounts._id}'.`)
    }
    
    const handleUpdate = accounts => {
      console.log(`An account is updated with id '${accounts._id}'.`)
    }
    
    class MyComp extends Component {
    
      constructor(props){
        super(props)
      }
    
      componentDidMount(){
        this.realtime = this.props.client.plugins.realtime
        if(this.realtime){
          // Listen to document creations
          await this.realtime.subscribe('created', type, this.handleCreate)
          //listen of the update for a type
          await this.realtime.subscribe('updated', type, this.handleUpdate)
          // Listen to a specific document
          await this.realtime.subscribe('updated', type, id, this.handleUpdate)
        }
    
      }
    
      componentWillUnmount(){
        if(this.realtime){
          // To unsubscribe
          await this.realtime.unsubscribe('created', type, handleCreate)
          await this.realtime.unsubscribe('updated', type, handleUpdate)
          await this.realtime.unsubscribe('updated', type, id, handleUpdate)
    
          // To unsubscribe all
          await this.realtime.unsubscribeAll()
        }
      }
    }
    
    export default withClient(MyComp)

    Subscribe to multiple events

    Here we subscribe to

    • The creation event
    • The update of a single document
    import CozyRealtime from 'cozy-realtime'
    
    const realtime = new CozyRealtime({ client: cozyClient })
    const type = 'io.cozy.accounts'
    const id = 'document_id'
    
    const handleCreate = accounts => {
      console.log(`A new 'io.cozy.accounts' is created with id '${accounts._id}'.`)
    }
    const handleUpdate = accounts => {
      console.log(`An account is updated with id '${accounts._id}'.`)
    }
    
    // To subscribe
    await realtime.subscribe('created', type, handleCreate)
    await realtime.subscribe('updated', type, id, handleUpdate)
    
    // To unsubscribe
    await realtime.unsubscribe('created', type, handleCreate)
    await realtime.unsubscribe('updated', type, id, handleUpdate)
    
    // To unsubscribe all events in one go
    await realtime.unsubscribeAll()

    License

    cozy-realtime is distributed under the MIT license.

    Keywords

    none

    Install

    npm i cozy-realtime

    DownloadsWeekly Downloads

    167

    Version

    4.2.3

    License

    MIT

    Unpacked Size

    297 kB

    Total Files

    41

    Last publish

    Collaborators

    • mycozycloud