A good resource for implementing a simple notification system in Laravel 5.1 and Socket.io

Yes I would be interested too by broadcasting events using nodejs

@pmall and others, when looking at Pusher's pricing namely the Sandbox plan what is a connection?

It includes 20 max connections, 100k messages per day, SSL protection and unlimited channels.

I'm looking at Pusher as I'm thinking (I may be wrong) that it is easier to implement as they do most of the work.

@mstnorris 20 max connection means there can be 20 users connected simultaneously to the socket server.

@toniperic that's what I thought it meant; which could be a problem although it is unlikely that 20 people will be online at the same time. Am I right in thinking that if one user has two browsers open then that counts as two connections also?

Are you aware of what happens if you're on the Sandbox plan and you go over the connection limit?

@mstnorris, yes, that's right, it's counted as two connections.

If you're running a website that has lots of visitors, it could easily be the case that Sandbox plan is not sufficient.

What happens when you hit the max connection limit is that socket server (hosted by Pusher) just keeps rejecting new connections, but the 20 connections that are alive can still send and receive messages. If the same thing happens on a paid plan - well, you'll receive an email when you are close to the limits of your plan. You are allowed 2 days a month over the limits before they hard limit your plan.

@toniperic thanks for the info, that's really helpful. I doubt I'd hit 20 connections to begin with as it is only to be used internally within a small team and not everyone will be online at the same time, although I know what some people are like with keeping tabs open so that could cause issues.

Have you yourself set up anything with socket.io?

What about setting this up with node js ? It is just for a small team intranet app, i don't need pusher.

@pmall I'm probably being totally ignorant here but I'd need socket.io and nodejs right? And yes, I would prefer to do that but I personally do not have the knowledge. I am however good at following instructions and reading through an article to set it up but I have doubts whether or not it will be a fairly straightforward thing to set up both in Homestead (for development and testing) and with my Digital Ocean server (provisioned through Forge).

@pmall @mstnorris yes I have used node js and socket.io, only locally though.

I was really sceptic I'd get it right as I am not all that good with Javascript (and especially server-side'ish Javascript), but it was really easy.

I have used the official chat application example. It took me an hour of my free time, but it was definitely worth it going through the page and reading everything, then trying out in my code editor. It's amazing that you can do so much with only a couple of lines of code once you understand what they do.

@mstnorris as for original post - the concept is literally the same for both chat app and notifications system.

Thank you both, I've looked at the chat app and it's a little daunting but I will give it my best shot. See you in an hour or two ;)

@toniperic yes but what driver do you use in app/broadcast.php when using socket io ?

@mstnorris I had the same feeling it's too overwhelming. Trust me, after you give it a shot and code along with the tutorial, you'll be so grateful to yourself that you've done it.

@toniperic in the chat app documentation, it says to create an index.js file and then run node index.js. As I am using Homestead; (a) Will this be an issue? (b) Can I create an app.js file within the public folder? Or should it reside elsewhere?

It's node, it doesn't matter where you place the file.. as long as you call the file using node you can pass in any file location. Now if you read the documentation of Homestead you will find this: http://laravel.com/docs/5.0/homestead#included-software So yeah Node is included ;)

@pmall redis. Check out this article on L5.1 broadcasting.

@toniperic humpf, this is a lot of stuffs to install just to enable broadcasting :(

@pmall sadly yes, but still think how revolutionary this is for PHP apps. Much easier to make real-time apps with PHP than it was months or years before. Lets face it, we would just use server-polling before :)

@toniperic I have followed your the steps in the last article you posted (I got the chat app working locally earlier :D !!!)

Right now I am getting an error Failed to load resource: Could not connect to the server. http://localhost:3000/socket.io/?EIO=3&transport=polling&t=1433337644016-5. Is there anything you can think of off the top of your head that would be causing this?

@mstnorris it's got to be something with your Redis server. You sure the server was running when you tested it?

@toniperic I can't be sure no ;p I'm running it on a brand new Laravel 5.1 installation and I haven't changed any of the names fro the article just so that I know it is working first before I modify it.

MyEventNameHere.php

<?php namespace App\Events;

use App\Events\Event;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Queue\SerializesModels;

class MyEventNameHere extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $data;
    /**
     * Constructor
     */
    public function __construct()
    {
        $this->data = array(
            'power'=> '10'
        );
    }

    /**
     * Get the channels the event should be broadcast on.
     *
     * @return array
     */
    public function broadcastOn()
    {
        return ['test-channel'];
    }
}

package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.8.8",
    "laravel-elixir": "*"
  },
  "dependencies": {
    "express": "^4.12.4",
    "ioredis": "^1.4.0",
    "redis": "^0.12.1",
    "socket.io": "^1.3.5"
  }
}

composer.json

"require": {
    "predis/predis": "^1.1@dev"
},

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('test-channel', function(err, count) {
});
redis.on('message', function(channel, message) {
    console.log('Message Recieved: ' + message);
    message = JSON.parse(message);
    io.emit(channel + ':' + message.event, message.payload);
});
http.listen(3000, function(){
    console.log('Listening on Port 3000');
});

.env

BROADCAST_DRIVER=redis

test.blade.php

<script src="{{ asset('js/socket.io.js') }}"></script>
<script>
    var socket = io('http://localhost:3000');
    socket.on("test-channel:App\\Events\\MyEventNameHere", function(message){
        // increase the power everytime we load test route
        $('#power').text(parseInt($('#power').text()) + parseInt(message.data.power));
    });
</script>

Ok, so I have run redis-cli monitor yet I am still getting the same error. Do I need to do anything in any particular order?

I currently have two tabs open, both SSH'd into Homestead and the pwd is the root of my project (project name: fiveone-socket). In the first tab I ran redis-cli monitor and in the second I ran node socket.js.

Can you guys take a look at Socketo.me and share what you think about it. It looks pretty good!

@mstnorris no need to do it. If you're using Homestead (like I am), you can just run redis-server from wherever you want.

What might differ from the tutorial I've linked you to is the IP address of the server. In the view file you might have code like

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

The localhost part should be substituted with Homestead IP address, which by default is 192.168.10.10, so it should be

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

That should get rid of the "Cannot connect to the server" error. Hope I helped.

Also, if you're following the tutorial, I think in socket.js file you should substitute

io.emit(channel + ':' + message.event, message.payload);

with

io.emit(channel + ':' + message.event, message.data);

Apparently the property name has been changed from payload to data (just tested it now from scratch).

@toniperic I ran redis-server and got the following

redis-server
[4112] 03 Jun 15:48:14.834 # Warning: no config file specified, using the default config. In order to specify a config file use redis-server /path/to/redis.conf
[4112] 03 Jun 15:48:14.835 # You requested maxclients of 10000 requiring at least 10032 max file descriptors.
[4112] 03 Jun 15:48:14.836 # Redis can't set maximum open files to 10032 because of OS error: Operation not permitted.
[4112] 03 Jun 15:48:14.836 # Current maximum open files is 1024. maxclients has been reduced to 4064 to compensate for low ulimit. If you need higher maxclients increase 'ulimit -n'.
[4112] 03 Jun 15:48:14.837 # Creating Server TCP listening socket *:6379: bind: Address already in use

Is this an issue?

@mstnorris it means the server hasn't started.

Run redis-server --port 3001 and it'll start. You'll have to open another terminal though. If you hit CTRL+C it'll kill the redis server.

@toniperic Just so we're on the same page:

Thank you for your continuous help :)

• I have redis-server running on port 3001
• node socket.js running on port 3001
• I hit the URI /fire in one tab,
• and in another the home route /test where I get the following error: (which I assume is a good thing as it is working!)

TypeError: null is not an object (evaluating 'message.data')

$('#power').text(parseInt($('#power').text()) + parseInt(message.data.power));

socket.js node index.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('test-channel', function(err, count) {
});
redis.on('message', function(channel, message) {
    console.log('Message Recieved: ' + message);
    message = JSON.parse(message);
    io.emit(channel + ':' + message.event, message.payload);
});
http.listen(3000, function(){
    console.log('Listening on Port 3000');
});

test.blade.php responds to URI /test

<script src="{{ asset('js/socket.io.js') }}"></script>
<script>
    //var socket = io('http://localhost:3000');
    var socket = io('http://192.168.10.10:3000');
    socket.on("test-channel:App\\Events\\MyEventNameHere", function(message){
        // increase the power everytime we load test route
        $('#power').text(parseInt($('#power').text()) + parseInt(message.data.power));
    });
</script>

Route::get('/', function() {
    return "go to /fire";
});

Route::get('fire', function () {
    event(new App\Events\MyEventNameHere());
    return "event fired";
});

Route::get('test', function () {
    return view('test');
});

Read my previous answer, I've edited it just a couple of seconds before you've posted so you probably missed that. You have to change "message.payload" to "message.data" in your socket.js file (and re-run node socket.js). It's just that object property name has been changed within the ioredis library by its author, no big deal.

Yes I had missed it. You got it!

@mstnorris glad you sorted it out. Told you it'll be a walk in the park. Now you can create real-time apps. ;)

@toniperic just a quick question, when I first started the tutorial I ran npm install socket.io and then followed everything else. It didn't work however, so I found a previous tutorial that I had just looked at and it said to install npm install --save express@4.10.2 and then it worked. Was that an oversight in the tutorial you showed me?