带有 socket-io 的 Laravel 事件 [接收通知]

Question

第一次尝试使用laravel 和socket-io 我正在尝试向管理员发送非常简单的通知。 到目前为止，我的事件正在触发，但我在接收事件通知方面需要帮助。

逻辑

这是非常基础的，因为我想了解这个过程。

1. 用户打开页面Add Product
2. 管理员收到user X 在App Product 页面中的通知。

到目前为止

到目前为止，我可以触发事件并获取用户数据（Add Product 页面中的用户）

需要帮助

我需要帮助来了解管理员接收通知的方式。

代码

组件脚本

created() {
  let user = JSON.parse(localStorage.getItem("user"))
  this.listenForBroadcast(user);
},
methods: {
  listenForBroadcast(user) {
    Echo.join('userInAddProduct')
    .here((Loggeduser) => {
      console.log('My user data', Loggeduser);
    });
  }
}

以上代码的结果

My user data [{…}]
  0:
    id: 1
    name: "Test User"
    photo: "User-1588137335.png"
    __ob__: Observer {value: {…}, dep: Dep, vmCount: 0}
    get id: ƒ reactiveGetter()
    set id: ƒ reactiveSetter(newVal)
    get name: ƒ reactiveGetter()
    set name: ƒ reactiveSetter(newVal)
    get photo: ƒ reactiveGetter()
    set photo: ƒ reactiveSetter(newVal)
    __proto__: Object
    length: 1
    __proto__: Array(0)

渠道路线

Broadcast::channel('userInAddProduct', function ($user) {
    return [
        'id' => $user->id,
        'photo' => $user->photo,
        'name' => $user->name
    ];
});

MessagePushed（事件文件）

class MessagePushed implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;

    public function __construct(User $user)
    {
        $this->user = $user;
    }

    public function broadcastOn()
    {
        return new PresenceChannel('userInAddProduct');
    }
}

问题

如何接收有关此事件触发的通知？我想通知我的管理员用户 user x 在页面 Add Product 中？

更新

自从我发布这个问题以来，我做了一些更改，这是我最新的代码 + 问题。

bootstrap.js

window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: { // added authentication token (because all my events are private)
        headers: {
            Authorization: localStorage.getItem('access_token'),
        },
    },
});

Add.vue (add product component where event has to be fired)

listenForBroadcast(user) {
    let ui = JSON.parse(localStorage.getItem("user"))
    Echo.join('userInAddProduct')
    .here((users) => {
        console.log('My user data', users)
    })
    .joining((user) => {
        this.$notify({
            title: '',
            message: user + 'joining',
            offset: 100,
            type: 'success'
        });
    })
    .leaving((user) => {
        this.$notify({
            title: '',
            message: user + 'is leaving new product',
            offset: 100,
            type: 'warning'
        });
    })
    .whisper('typing', (e) => {
        this.$notify({
            title: '',
            message: ui.username + 'is adding new product',
            offset: 100,
            type: 'success'
        })
    })
    .listenForWhisper('typing', (e) => {
        console.log(e)
        this.$notify({
            title: '',
            message: ui.username + 'is entered add new product page.',
            offset: 100,
            type: 'success'
        });
    })
    .notification((notification) => {
        console.log('noitication listener: ', notification.type);
    });
},

然后我制作了 4 个文件来处理事件：

• 事件 (passing data)
• 事件监听器（process the database storage 和 showing notifications 在线管理员）
• 观察者（射击事件）
• 通知（store data to database 为管理员提供，以防事件触发时他们不在线，以便他们稍后可以看到通知）

Event file

class MessagePushed extends Event implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $user;
    public $product;

    public function __construct(User $user, Product $product)
    {
        $this->user = $user;
        $this->product = $product;
    }

    public function broadcastOn()
    {
        return new PresenceChannel('userInAddProduct');
    }
}

Listener file

class ThingToDoAfterEventWasFired implements ShouldQueue
{
    public function handle(MessagePushed $event)
    {
        //Log testing purpose only
        $user = $event->user->username;
        $product = $event->product->name;

        // Real data that should be broadcasts
        $user2 = $event->user;
        $product2 = $event->product;

        // inform all admins and authorized staffs about new product
        $admins = User::role(['admin', 'staff'])->get();
        foreach($admins as $admin) {
            $admin->notify(new UserAddProduct($user2, $product2));
        }

        Log::info("Product $product was Created, by worker: $user");
    }
}

Notification

class UserAddProduct extends Notification implements ShouldQueue
{
    use Queueable;

    protected $product;
    protected $user;

    public function __construct(User $user, Product $product)
    {
        $this->product = $product;
        $this->user = $user;
    }

    public function via($notifiable)
    {
        return ['database', 'broadcast'];
    }

    public function toDatabase($notifiable)
    {
        return [
            'user_id' => $this->user->id,
            'user_username' => $this->user->username,
            'product_id' => $this->product->id,
            'product_name' => $this->product->name,
        ];
    }

    public function toArray($notifiable)
    {
        return [
            'id' => $this->id,
            'read_at' => null,
            'data' => [
                'user_id' => $this->user->id,
                'user_username' => $this->user->username,
                'product_id' => $this->product->id,
                'product_name' => $this->product->name,
            ],
        ];
    }
}

Observer

public function created(Product $product)
{
    $user = Auth::user();
    event(new MessagePushed($user, $product));
}

问题

1. 如何在在整个应用程序中触发事件后立即返回实时通知？目前我的代码放在add.vue component admins get notify IF they are in same page only :/
2. 如何获得多个事件的通知？假设我有另一个 event, listener, observer 用于其他页面操作，我希望管理员在整个应用中同时收到 product event 和 other event 的通知。

谢谢

Answer 1

我们区分公共和私人等渠道类型。

公共：照亮\广播\频道。它无需任何身份验证即可工作，因此匿名用户可以收听此广播。就像所有人都可以看到的足球比赛比分一样。

私人：照亮\广播\私人频道。它与身份验证一起使用，因此只有经过身份验证的用户才能收听此广播。就像管理员查看特定用户的操作或用户查看他们的订单状态一样。

另一方面，还有另一个私有频道，即 Illuminate\Broadcasting\PresenceChannel。还需要认证。例如，就像任何聊天室一样。例如：只有经过身份验证的用户才能相互通信。

所以这些类型将定义您的方法。你必须走不同的道路。我非常建议阅读 Laravel 文档 (https://laravel.com/docs/broadcasting)，它会非常仔细地指导你。

在 routes/channels.php 中，您必须决定或验证经过身份验证的用户是否可以收听此特定频道。所以你必须返回布尔值（真或假）。因此，在这里，您不会向客户端返回任何值。

MessagePushed 广播事件中的每个公共属性都将被序列化并发送到客户端。您必须将每个信息数据提供给 MessagePushed 构造函数并设置为属性/属性。现在您可以像这样处理接收到的数据，例如：

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001',
    auth: {
      headers: {
        'X-Auth-Token': "<token>"
      }
    }
});

window.Echo.private('userInAddProduct')
   .listen('MessagePushed ', (e) => {
       console.log(e.auction);
    });

我建议使用令牌创建自定义身份验证。上面我将令牌发送到服务器以验证用户。 https://laravel.com/docs/authentication#adding-custom-guards

在你的情况下，我会将这两种机制分开。

1. 检查用户是否进入应用产品页面
2. 通知管理员

对于第二点，使用 Illuminate\Broadcasting\PrivateChannel 就足够了。所以在管理页面上需要 websocket。 1. 点可能很棘手，因为这取决于您的要求。通知管理员用户进入确切的应用产品页面就足够了？

• 如果是，那么当用户访问该页面时，您将在控制器中触发此广播事件。

• 如果还不够，那么您需要用户页面上的另一个 websocket 来“轮询”您的服务器并每隔 X 秒向管理员发送一次滴答广播。

触发广播事件：

broadcast(new App\Events\MessagePushed($user));

---

我的用法是：

• 客户端：socket.io-client
• 服务器端：laravel-echo-server
• redis 广播器
• 自定义身份验证机制

希望，我能帮上忙！

Answer 2

我最近写了一篇文章How to use Laravel WebSockets for NuxtJs notifications，我在其中详细描述了 Laravel WebSockets 的事件设置。我希望你觉得它有用。

Answer 3

已解决

这是我根据我的需要和我的问题完成的（如果你的情况与我的不同，它可能会有所不同）

在该活动发生的组件中（在我的情况下为Add.vue）

Echo.join('userInAddProduct')
.here((users) => {
    console.log('here: ', users);
})
.joining((user) => {
    console.log('joining: ', user);
})
.leaving((user) => {
    console.log('leaving: ', user);
})
.whisper('typing', {data: notf}) // this part sends my data
.notification((notification) => {
    console.log('noitication listener1: ', notification.type);
});

由于我需要我的通知在所有页面中对管理员可见，我已将我的套接字发射（即Echo.listenForWhisper）添加到我的导航栏组件中。

mounted() {
  this.notifs();
    window.Echo.join('userInAddProduct')
       // listen to broadcast from Add.vue
      .listenForWhisper('typing', (product) => {
        // add it into my navbar notifications list
        this.notifications.unshift(product);
      });
}

现在每次用户向服务器管理员添加新产品时都会收到通知。

注意要查看我的其他设置，请滚动回我的更新部分并查看Event, Listener & Observe 文件代码。 （您将这些文件和上面的所有这些代码制作成您喜欢的组件，然后您将获得实时通知）。