dongshuo1257 2018-04-26 05:24
浏览 82
已采纳

使用laravel作为后端API和AngularJS作为前端的实时通知

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条回答 默认 最新

  • doutangliang7769 2018-05-03 04:06
    关注

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 Windows Script Host 无法找到脚本文件"C:\ProgramData\Player800\Cotrl.vbs”
  • ¥15 matlab自定义损失函数
  • ¥15 35114 SVAC视频验签的问题
  • ¥15 impedancepy
  • ¥15 求往届大挑得奖作品(ppt…)
  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图