Question

我正在构建一个订购应用程序，其中我使用Laravel和ReactJS和React Native进行后端

每当客户发布订单和更新订单时，我都希望实时更新。

目前，我设法使Websocket运行，该Websocket使用了他的教程中的pusher API using devmarketer。

我已成功在控制台中回显了订单，但现在我想使用我的channel应用程序来访问react

这是我面临困难的地方。

由于我不确定如何创建同时适用于我的应用程序的route以及如何通过此路由访问频道。

laravel官方文档提供了一个示例，说明如何访问pusher，但未提供如何通过外部连接（例如：我的本机应用程序）进行连接

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: 'rapio1',
  host: 'http://backend.rapio',
  authEndpoint: 'http://backend.rapio/broadcasting/auth',
  auth: {
    headers: {
      // Authorization: `Bearer ${token}`,
      Accept: 'application/json',
    },
  }
  // encrypted: true
});
window.Echo.channel('rapio.1').listen('OrderPushed', (e) =>{
    console.log(e.order)
})

所以我的问题是如何在React应用中访问广播频道？

Answer 1

您是否在后端使用broadcastAs()方法？

重要的是要知道这一点，以便正确回答您的问题，因为如果您是，Laravel回显客户端将假定名称空间为App \ OrderPushed。

使用broadcastAs()时，您需要在其前面加上点，以告诉echo不要使用命名空间，因此在您的示例中为：

.listen('.OrderPushed')

此外，您不需要在后端进行任何其他设置即可让每个客户端应用程序连接到套接字服务器，除非您希望进行多租户设置，从而使不同的后端应用程序可以利用websocket服务器。

我还使用wsHost和wsPort而不只是主机和端口，虽然不确定是否会有所不同

Answer 2

如果您只需通过console.log进入控制台就可以访问前端上的数据，那么您应该已经在大多数地方了。

将数据实际放入React组件的方式取决于您使用的是状态管理库（例如redux）还是纯粹的react。

基本上，您将在前端维护数据的本地副本，然后使用Echo事件更新该数据。例如，您可以在redux，react组件之一或其他位置获得一份订单列表，您可以根据创建，更新和删除事件对其进行追加和修改。

我将亲自在包含给定订单模型的后端创建一个OrderCreated，OrderUpdated和OrderDeleted事件。

class OrdersList extends React.Component {
    componentDidMount() {
        this.fetchInitialDataUsingHttp();

        //Set up listeners when the component is being mounted
        window.Echo.channel('rapio.1').listen('OrderCreated', (e) =>{
            this.addNewOrder(e.order);
        }).listen('OrderUpdated', (e) =>{
            this.updateOrder(e.order);
        }).listen('OrderDeleted', (e) =>{
            this.removeOrder(e.order);
        });
    }

    componentWillUnmount() {
        //@TODO: Disconnect echo
    }
}

如何通过React连接到Laravel Websocket？

2 个答案: