React 使用动作电缆

Hooks)在您的反应(Native)应用程序中使用"铁路行动电缆".

安装

npm install @aersoftware/react-use-action-cable --save

使用量

正在连接到 Websocket

要连接到 Action Cable, 请使用 ActionCable 钩, 并使用您想要连接的 URL 。 如果您想在整个应用程序中使用此动作电缆,请考虑在 上下文。 。 。 .

import React, { useEffect } from 'react';
import { useActionCable, useChannel } from '@aersoftware/react-use-action-cable';

export default function index() {
  const { actionCable } = useActionCable('ws://localhost:3000/cable');
}

订阅频道

提供先前创建的频道钩子 actionCable。然后访问订阅和发送函数。 在下面的例子中,我们立即在第一个渲染时订阅频道"ChannelName".

...
  const { subscribe, unsubscribe, send } = useChannel(actionCable)

  useEffect(() => {
    subscribe({
      channel: 'ChannelName',
      param2: '...',
      param3: '...'
    }, {
      received: (data) => console.log(data),
      // Custom callbacks can be added for 'initialized', 'connected', and 'disconnected' 
    })
    return () => {
      unsubscribe()
    }
  }, [])
...

发送数据

要将数据发送到我们所订阅的频道,我们可以使用 send 函数如下.

send({
  action: 'ping',
  payload: {}, // Optional
  useQueue: true // Optional, default: false
})

在设置使用队列时 true 信件将被添加到队列中并尽快发送。 就是说,当网锁连接起来的时候 如果当时的websocket没有连接 send() 一旦网络再次连接,将立即发送.