Laravel使用Socket.io将广播转播到私人频道

我试图创建一个使用Laravel作为后端API客户端和我的前端的SPA的实时通知系统，我使用React作为前端，但是对于以下例如，我将使用我创建的简单Vue.Js和刀片来获取工作示例。Laravel使用Socket.io将广播转播到私人频道

所以，这一切的一切，我有一个触发事件的路线，这是显示像下面的例子：

Route::get('fire', function() { 
    // this fires the event 
    $user = App\Models\User::find(1); 
    event(new App\Events\CampaignUploadedWithSuccess($user, 'testing a notification')); 
    return "event fired"; 
});

，它触发看起来像这样

<?php 

namespace App\Events; 

use Illuminate\Broadcasting\Channel; 
use Illuminate\Queue\SerializesModels; 
use Illuminate\Broadcasting\PrivateChannel; 
use Illuminate\Broadcasting\PresenceChannel; 
use Illuminate\Foundation\Events\Dispatchable; 
use Illuminate\Broadcasting\InteractsWithSockets; 
use Illuminate\Contracts\Broadcasting\ShouldBroadcast; 

class CampaignUploadedWithSuccess implements ShouldBroadcast 
{ 
    protected $user; 

    public $notification; 

    use Dispatchable, InteractsWithSockets, SerializesModels; 

    /** 
    * Create a new event instance. 
    * 
    * @param $user 
    * @param $notification 
    */ 
    public function __construct($user, $notification) 
    { 
     $this->user = $user; 
     $this->notification = $notification; 
    } 

    /** 
    * Get the channels the event should broadcast on. 
    * 
    * @return Channel|array 
    */ 
    public function broadcastOn() 
    { 
     return ['notifications-channel.' . $this->user->id]; 
    } 
}

事件所以我在一个名为notification-channel.{userId}

的频道上播出我有一个使用节点运行的socket.js文件。

这看起来像使用node socket.js这

var app = require('express')(); 
var http = require('http').Server(app); 
var io = require('socket.io')(http); 
var Redis = require('ioredis'); 

var redis = new Redis(); 
redis.subscribe('notifications-channel.1', function(err, count) { 
}); 
redis.on('message', function(channel, message) { 
    console.log('Notification Recieved: ' + message); 
    message = JSON.parse(message); 
    io.emit(channel + ':' + message.event, message.data); 
}); 
http.listen(3000, function(){ 
    console.log('Listening on Port 3000'); 
});

运行在服务器和触发事件做什么，我要象下面这样：

快乐的日子！我向广播信道..

不过，我现在有一个刀片文件调用test.blade将在Vue公司和Socket.io

，看起来像这样

<!DOCTYPE html> 
<html> 
<head> 
    <title>Laravel</title> 
</head> 
<body> 
<h1>Notifications</h1> 

<ul> 
    <li v-repeat="notification: notifications">@{{ notifications }}</li> 
</ul> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.7/socket.io.min.js"></script> 

<script> 
    var socket = io('http://localhost:3000'); 
    new Vue({ 
     el: 'body', 
     data: { 
      notifications: [] 
     }, 
     ready: function() { 
      socket.on('notifications-channel.1', function(data) { 
       alert(data.notification); 
      }); 
     } 
    }); 
</script> 
</body> 
</html>

和拉这里的目标是在通知通道1有广播数据时让消息警报。然而这不起作用。

所以我的问题是，如何向频道广播并使用socket.io，Laravel和Redis从频道中消费广播。

我也有点在私人频道的黑暗中，以及如何为一位用户创建频道。该文档很好，但它没有提供如何实现这一目标的真实世界示例，并且有多个平台使用通知。

来源

2017-09-22 Devin Gray

我也面临着同样的问题搜索，我发现这个问题是由于插座版之后。请确保您使用相同的socket.io版本同时在服务器端和客户端，你可以先验证此检查中的package.json文件中的插座版本就像我的情况下，你可以看到下面

"devDependencies": { 
    "socket.io": "^2.0.3", 
    "socket.io-client": "^2.0.3", 
}

然后验证您测试的套接字版本。刀片文件如下

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>

你可以看到这两个版本都是一样的。

并且您的刀片文件中存在一个问题，您可以通过key channel：event.name发送套接字事件，但在您的刀片文件中，只能监听通道名称，而不会连接事件名称。请与下面的代码

<script> 
    var socket = io('http://localhost:3000'); 
    new Vue({ 
     el: 'body', 
     data: { 
      notifications: [] 
     }, 
     ready: function() { 
      socket.on('notifications-channel.1:App\\Events\\CampaignUploadedWithSuccess', function(data) { 
       alert(data.notification); 
      }); 
     } 
    }); 
</script>

来源

2017-09-22 11:19:41

这使得有很大的意义代替它，所以我改变了叶片的文件，当我在浏览器中运行它，我看到我的H1标签，说通知，控制台显示错误的连接拒绝，所以我运行节点socket.js和错误消失，在我的脑海里，这意味着它连接到本地主机：3000，我解雇了事件，它显示在服务器控制台中，但不会控制台登录客户端...我使版本匹配:) –

我想我可能会错过与我的socket.js文件中的套接字的连接 –

您广播您的事件的频道具有名称通知 - 然后动态地通过用户标识并在客户端上传输通道硬编码它与1.你目前登录的用户有ID 1请你确认。 –

我认为你缺少的IO外观的设置在

https://socket.io/docs/server-api/

像这样的事情就需要你的服务器的NodeJS和/或客户端上。

希望这有助于

来源

2017-09-22 09:50:11

Laravel使用Socket.io将广播转播到私人频道

回答

相关问题