我正在尝试在浏览器中显示新的注册用户,因此已登录的用户可以看到类似“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'}
答案 0 :(得分:0)
当我通过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;
});