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 微信小程序 用oss下载 aliyun-oss-sdk-6.18.0.min client报错
  • ¥15 ArcGIS批量裁剪
  • ¥15 labview程序设计
  • ¥15 为什么在配置Linux系统的时候执行脚本总是出现E: Failed to fetch http:L/cn.archive.ubuntu.com
  • ¥15 Cloudreve保存用户组存储空间大小时报错
  • ¥15 伪标签为什么不能作为弱监督语义分割的结果?
  • ¥15 编一个判断一个区间范围内的数字的个位数的立方和是否等于其本身的程序在输入第1组数据后卡住了(语言-c语言)
  • ¥15 Mac版Fiddler Everywhere4.0.1提示强制更新
  • ¥15 android 集成sentry上报时报错。
  • ¥15 抖音看过的视频,缓存在哪个文件