0

Is it possible to use Real-time notification in AngularJS when the back-end api is laravel? should I user laravel echo in AngularJS or there is another solution for it?

As I've searched I should use pusher as websocket server, and should use laravel echo which is a JS library.

The question is should I use laravel-echo library in AngularJS or there is another solution for it?

FYI: laravel (back-end) api is separated from AngularJS (front-end) they communicate through CRUD requests which is authenticated using O-Auth.

2
  • 2
    You could use socket.IO, It is possible to integrate with laravel, check this post, medium.com/@adnanxteam/… Commented Apr 26, 2018 at 5:33
  • @Luillyfe good point, I'll check that out. Commented Apr 26, 2018 at 5:50

2 Answers 2

3

I've managed to solve this issue using laravel + redis + socket.io + socket client, I put my solution here hope to stop wasting others time trying to figure it out.

cd your-project-name

Install packages

npm install express ioredis socket.io --save

Your package.json file will look like

{
  "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 require predis/predis

Creating the Event

php artisan make:event EventName

Make sure that it implements ShouldBroadcast

The entire EventName.php class should look like:

<?php namespace App\Events;

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

class EventName extends Event implements ShouldBroadcast
{
    use SerializesModels;

    public $data;

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

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

use this code in angular js :

<script src="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\\EventName", function(message){
            // increase the power everytime we load test route
            $('#power').text(parseInt($('#power').text()) + parseInt(message.data.power));
        });
    </script>

Routing Set up three routes like so. Add them to your app/Http/routes.php file.

Route::get('/', function() {
    // this doesn't do anything other than to
    // tell you to go to /fire
    return "go to /fire";
});

Route::get('fire', function () {
    // this fires the event
    event(new App\Events\EventName());
    return "event fired";
});

Route::get('test', function () {
    // this checks for the event
    return view('test');
});

Create the socket.js file in your project root

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.data);
});
http.listen(3000, function(){
    console.log('Listening on Port 3000');
});

FYI : Make sure you have installed redis server + connect it to Laravel using .env or database file.

Sign up to request clarification or add additional context in comments.

6 Comments

where should i socket.js included?
In your project root directory.
I am getting error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://192.168.10.10:3000/socket.io/?EIO=3&transport=polling&t=MFjDQl0. (Reason: CORS request did not succeed).
Now working fine.. thank you very much.. @Mohammad_Hosseini saved me a lot hours.. thanks
@shihabudheen Anytime, please vote up If it was helpful.
|
0

I used @Mohammad_Hosseini's solution before but after upgrading Laravel 5.4 to 5.8 it's not working anymore. Last but not least; @Mohammad_Hosseini's solution not included auth and private channels.

So, I highly suggest use laravel-echo-server for easy upgrade. Also, it's open-source and maintenance by the great community.

3 Comments

This is not an answer. Please delete it or change it into one: stackoverflow.com/help/how-to-answer
thanks for mentioning it's not working in laravel 5.8, I'll be looking into that as soon as I find free time. but this is not an answer and should be written as a comment.
notice that this is a solution for running a socket server of your own project and not using any third party.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.