Laravel事件在注册时不会与套接字一起显示

Question

I am trying to Show new registered users in my browser, so users who are already logged in can see something like "blabla has registered..."

First I created an Event class with its channel like this:

class UserSignedUp extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $user;

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

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

I used laravel auth scaffolding to built a Basic Login/Register System, so I went inside the Auth/RegisterController and added a function to call the Event if a user Registers like this:

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));
}

I installed node.js, socket.io and 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);

I run that Server successfully with this command: node socket.js

Further I have this vue script to push the registered users in an array

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));
   }

});

And in my blade view I have this li to show new registered users

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

if I register using another browser that user is not displayed, but the users information gets display in my command line like this: C:\\xampp\\htdocs\\myApp (master)

λ node socket.js
{ name: 'asdasd',
email: 'aascasc@asda.de',
password: '$2y$10$yujB1ZSFEezVeZ77Jec67.Mws3qeD7bnx3QaVhJACXo58KBy3E3iG' }

Answer 1

When I am using events with socket.io via redis I have to use the following traits: Dispatchable, InteractsWithSockets, SerializesModels .

These traits are in the docs

Implementation

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');
});

usage:

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

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