reactjs - 如何使用 React 连接 Laravel Websocket？

Question

我正在构建一个订购应用程序，我使用 Laravel 做后端，使用 ReactJS 和 React Native 做前端

每当客户发布订单以及订单更新时，我都希望获得实时更新。

目前，我成功运行了使用 Pusher API 的 WebSocket using devmarketer他的教程。

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

这一步就是我面临困难的地方。

因为我不确定如何创建一个可供我的应用程序访问的路由以及如何通过此路由访问 channel 。

官方 Laravel 文档提供了如何访问 Pusher 的示例，但没有提供如何通过外部连接(例如:我的 React Native 应用程序)进行连接的示例

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 应用程序上的广播 channel ？

添加后端事件

class OrderPushed implements ShouldBroadcastNow
{
    use Dispatchable, InteractsWithSockets, SerializesModels;
    public $neworder;
    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct(Order $neworder)
    {
        $this->neworder = $neworder;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        //return new Channel('Rapio.'.$this->neworder->id);
       return new Channel('Rapio');

    }
    public function broadcastWith()
    {
        return [
            'status' => $this->neworder->status,
            'user' => $this->neworder->user->id,
        ];
    }
}

Answer 1

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

为了正确回答您的问题，了解这一点很重要，因为如果您是这样，Laravel echo 客户端会假定命名空间为 App\OrderPushed。

当使用broadcastAs()时，您需要在其前面添加一个点，以告诉echo不要使用命名空间，因此在您的示例中，它将是:

.listen('.OrderPushed')

此外，您不需要在后端进行任何额外的设置，以便每个客户端应用程序连接到套接字服务器，除非您希望进行 Multi-Tenancy 设置，从而不同的后端应用程序将使用 WebSockets服务器。

我还使用 wsHost 和 wsPort 而不仅仅是主机和端口，但不确定这是否有区别