laravel 5 瀏覽器推播

此篇文章是引用來自：https://jigsawye.com/2015/12/22/push-notification-to-user-in-laravel-5/

文章內容經由小亮哥本人的實際操作結果有所不同，會在此做說明

使用環境：(僅供參考)
作業系統：CENT OS 7
伺服器：NGINX
PHP：7.0.14
框架：Laravel Framwork 5.1

前言：在要操作以下的工具前，請先確保你的 Laravel 專案 已經安裝完成可以執行

再次確認，作業系統裡已經裝好了 composer、npm 這兩個工具

安裝工具套件

先安裝 nodejs，安裝文章網址如下

https://www.phpini.com/linux/rhel-centos-install-node-js

再開始安裝相關套件(終端機 Terminal)

composer require predis/predis 
npm install express socket.io ioredis --save

安裝完成 predis，請看你的 composer.json 是否有

"require": {"php": ">=5.5.9",
 "laravel/framework": "5.1.*",
 "predis/predis": "^1.1"
},

安裝完成 express socket.io ioredis，請看你是否有這個資料夾，這裡面有剛剛安裝的程式工具在其中(終端機 Terminal)

還要安裝一個 Redis Server，安裝文章網址

http://sharadchhetri.com/2014/10/04/install-redis-server-centos-7-rhel-7/

來源文章中的某一段

$ php artisan migrate
$ php artisan make:auth

我這裡是沒有用到的

提示：redis 的 port 預設是 6379，nodejs 的 port 預設是 3000，請記得伺服器要開 port

需要執行的工具如下 

根據來源文章指示，請檢查是否執行

Laravel Application（Nginx or php artisan serve）
Redis server
隊列監聽器（php artisan queue:listen）

到了這裡，簡單的說，你的 laravel 是可以正常跑出程式結果，redis 是可以用的

修改設定與新增程式

安裝好了工具，要設定 laravel 裡對應文件，與要執行的程式，先看到 .env 這個檔案

修改成

...
QUEUE_DRIVER=redis
BROADCAST_DRIVER=redis
...

接著到終端機(Terminal)執行

php artisan make:event PushNotification

將會在 app/Events 資料夾裡建立 PushNotification.php
請將以下的程式更新到剛建立好的 PushNotification.php 裡

<?php 
namespace App\Events;
use App\Events\Event;
use App\User;
use Illuminate\Queue\SerializesModels;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
class PushNotification extends Event implements ShouldBroadcast
{
    use SerializesModels;
    /**
     * @var string
     */
    public $token;
    /**
     * @var string
     */
    public $message;
    /**
     * Create a new event instance.
     *
     * @param User $user
     * @param      $message
     */
    public function __construct(User $user, $message)
    {
        $this->token = sha1($user->id . '|' . $user->email);
        $this->message = $message;
    }
    /**
     * Get the channels the event should be broadcast on.
     *
     * @return array
     */
    public function broadcastOn()
    {
        return ['notification'];
    }
}

再來要建立 socket.js，原作者是放在專案的根目錄，將以下的 js code 貼上

var Redis = require('ioredis');
var redis = new Redis();
// 訂閱 redis 的 notification 頻道，也就是我們在事件中 broadcastOn 所設定的
redis.subscribe('notification', function(err, count) {
  console.log('connect!');
});
// 當該頻道接收到訊息時就列在 terminal 上
redis.on('message', function(channel, notification) {
  console.log(notification);
});

到了這裡，我們要做個測試，確定是否可以執行

先開一個新的終端機畫面，主要先執行 socket.js 這是核心程式，一定要能執行才能繼續下去
找到你存放 socket.js 的位置，執行

node socket.js

問題排除

如果這裡有 NOAUTH 的錯誤，就要先進行 Redis-cli 的密碼設定，開另一個root權限的終端機

請先執行

service redis restart

再執行

node socket.js

就會出現

Listening on Port 3000
connect! 

回到剛重啟 redis 的Terminal執行

redis-cli

它會出現 

127.0.0.1:6379>

輸入

CONFIG SET requirepass "你的密碼"

會出現

OK

再執行

AUTH "你的密碼"

如果出現錯誤訊息

(error) NOAUTH Authentication required.

再重啟 redis 的步驟下來

測試觸發事件

再開一個終端機(Terminal) 操作，記得要切到 laravel 專案底下，才能執行 artisan

php artisan tinker

輸入

event(new App\Events\PushNotification(App\User::first(), 'banana!'))

回到剛執行 nodejs 的那個 terminal 畫面，應該會看到

{"event":"App\\Events\\PushNotification","data":{"token":"long-hash-string","message":"banana!"}}

如果你已經可以執行到這裡，表示你已經完成的這個推播的功能，剩餘的就是自己再做修改調整成要的型態

到了這裡，你可接續原作者的

前端

這一段再往下做，這裡要補充的是，以下這段程式中

var io = require('socket.io-client');
// 建立 socket.io 的連線
var notification = io.connect('http://localhost:3000');
// 當從 socket.io server 收到 notification 時將訊息印在 console 上
notification.on('notification', function(message) {
  console.log(message);
});

我製作過程，沒有加入

var io = require('socket.io-client');

才能順利執行網頁