Laravel事件在注冊時不會與套接字一起顯示

Question

我正在嘗試在瀏覽器中顯示新的注冊用戶，因此已經登錄的用戶可以看到類似“ blabla已經注冊...”的信息。

首先，我創建了一個Event類，其通道如下所示：

class UserSignedUp extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $user;

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

    public function broadcastOn()
    {
        return ['signed-up-channel'];
    }
}

我使用laravel auth腳手架構建了一個基本的登錄/注冊系統，因此我進入了Auth / RegisterController並添加了一個函數，如果用戶注冊時調用Event：

protected function create(array $data)
{
    $this->user = [
        'name' => $data['name'],
        'email' => $data['email'],
        'password' => bcrypt($data['password']),
    ];

    # fire event
    $this->broadcastSignedUpUsers($this->user);

    return User::create($this->user);
}

# Call UserSignedUp Event and show using node + socket.io
protected function broadcastSignedUpUsers($user)
{
    event(new UserSignedUp($user));
}

我安裝了node.js，socket.io和Redis。

I built following script to create a Server:

var server = require('http').Server();

var io = require('socket.io')(server);

// class declaration
var Redis = require('ioredis');

// Redis UserSignedUp Channel
var redisSignedUp = new Redis();

redisSignedUp.subscribe('signed-up-channel');

redisSignedUp.on('message', function(channel, message) {
    message = JSON.parse(message);
    console.log(message.data.user);
    io.emit(channel + ':' + message.event, message.data);
});

// run server on port 3000
server.listen(3000);

我使用以下命令成功運行該服務器：node socket.js

此外，我有這個vue腳本將注冊的用戶推送到數組中

var socket = io('http://192.168.3.114:3000');

new Vue({

    el: '#app',

   data: {
       users: []
   },

   ready: function() {
       socket.on('signed-up-channel:App\\Event\\UserSignedUp', function(data) {
           console.log(data);
           this.users.push(data.user);
       }.bind(this));
   }

});

在我的刀片視圖中，我有這個li來顯示新的注冊用戶

<li v-for="user in users">@{{ user.name }}</li>

如果我使用其他瀏覽器進行注冊，則不會顯示該用戶，但是用戶信息會像這樣在我的命令行中顯示：C：\\ xampp \\ htdocs \\ myApp（主用戶）

λ節點socket.js
{名稱：'asdasd'，
電子郵件：“ aascasc@asda.de”，
密碼：“ $ 2y $ 10 $ yujB1ZSFEezVeZ77Jec67.Mws3qeD7bnx3QaVhJACXo58KBy3E3iG”}

Answer 1

當我通過redis在socket.io中使用事件時，我必須使用以下特征： Dispatchable, InteractsWithSockets, SerializesModels 。

這些特征在文檔中

實作

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

    public $campaign;

    public function __construct(Campaign $campaign)
    {
        $this->campaign = $campaign;
    }

    public function broadcastOn()
    {
        return new Channel('campaign-changed');
    }
}

socket.js

let app = require('express')();
let http = require('http').Server(app);
let io = require('socket.io')(http);
let Redis = require('ioredis');
let redis = new Redis();

redis.subscribe(['campaign-changed','canceled-bid','winning-bid','highest-bid','no-bids'], function(err, count) {});

redis.on('message', function(channel, message) {
    message = JSON.parse(message);
    if(channel === 'campaign-changed'){
        io.emit('campaign-changed:' + message.data.campaign.id, message.data);
    }
    else {
        io.emit(channel + ':' + message.data.item.id, message.data);
    }
});

http.listen(3000, function(){
    console.log('Listening on Port 3000');
});

用法：

window.socket = io('http://192.168.10.10:3000');

socket.on("campaign-changed:"+this.campaign.id, message =>{
    this.campaign = message.campaign;
});