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并添加了一个函数来调用事件，如果用户注册这样：

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（master）

λ节点socket.js
  {name：'asdasd'，
  电子邮件：'aascasc@asda.de'，
  密码：   '$ 2y $ 10 $ yujB1ZSFEezVeZ77Jec67.Mws3qeD7bnx3QaVhJACXo58KBy3E3iG'}

Answer 1

当我通过redis使用socket.io的事件时，我必须使用以下特征：Dispatchable, InteractsWithSockets, SerializesModels。

这些特征在docs

中

<强>实施

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

寄存器上的Laravel事件不会显示套接字

1 个答案: