build: vite build

app/Events/RefreshPage.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace App\Events;
+
+use \App\Item;
+
+use Illuminate\Broadcasting\Channel;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Broadcasting\PresenceChannel;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Queue\SerializesModels;
+
+class RefreshPage implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * Item
+     *
+     * @var Item
+     */
+    public $item;
+
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(Item $item)
+    {
+        $this->item = $item;
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     *
+     * @return \Illuminate\Broadcasting\Channel|array
+     */
+    public function broadcastOn()
+    {
+        return ['touchedItem'];
+    }
+
+    public function broadcastAs()
+    {
+        return 'RefreshPage';
+    }
+
+}

app/Events/ReturnItem.php

@@ -5,12 +5,20 @@ namespace App\Events;
 use \App\Item;
 use Illuminate\Broadcasting\InteractsWithSockets;
 use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
 use Illuminate\Foundation\Events\Dispatchable;
 use Illuminate\Queue\SerializesModels;
 
 class ReturnItem
 {
     use Dispatchable, InteractsWithSockets, SerializesModels;
+
+
+    /**
+     * Item
+     *
+     * @var Item
+     */
     public $item;
 
     /**
@@ -32,6 +40,11 @@ class ReturnItem
      */
     public function broadcastOn()
     {
-        return new PrivateChannel('channel-name');
+        return new PrivateChannel('touchedItem');
+    }
+
+    public function broadcastAs()
+    {
+        return 'ReturnItem';
     }
 }

app/Http/Controllers/TakeController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Events\RefreshPage;
 use App\Events\ReturnItem;
 use App\Item;
 use App\User;
@@ -32,6 +33,7 @@ class TakeController extends Controller
             );
         }
 
+        RefreshPage::dispatch($item);
         return redirect('home');
     }
 
@@ -55,7 +57,8 @@ class TakeController extends Controller
             );
         }
 
-        event(new ReturnItem($item));
+        RefreshPage::dispatch($item);
+        ReturnItem::dispatch($item);
         return redirect('home');
     }
 }

app/Http/Middleware/TrustProxies.php

@@ -2,7 +2,7 @@
 
 namespace App\Http\Middleware;
 
-use Fideloper\Proxy\TrustProxies as Middleware;
+use Illuminate\Http\Middleware\TrustProxies as Middleware;
 use Illuminate\Http\Request;
 
 class TrustProxies extends Middleware
@@ -19,5 +19,10 @@ class TrustProxies extends Middleware
      *
      * @var int
      */
-    protected $headers = Request::HEADER_X_FORWARDED_ALL;
+    protected $headers =
+        Request::HEADER_X_FORWARDED_FOR |
+        Request::HEADER_X_FORWARDED_HOST |
+        Request::HEADER_X_FORWARDED_PORT |
+        Request::HEADER_X_FORWARDED_PROTO |
+        Request::HEADER_X_FORWARDED_AWS_ELB;
 }

composer.json

@@ -5,21 +5,22 @@
     "license": "MIT",
     "type": "project",
     "require": {
-        "php": "^7.3.0",
-        "fideloper/proxy": "^4.4",
-        "laravel/framework": "^8.0",
+        "php": "^8.0.2",
+        "inertiajs/inertia-laravel": "^0.6.3",
+        "laravel/framework": "^9.19.0",
         "laravel/helpers": "^1.4",
         "laravel/tinker": "^2.4.1",
-        "laravel/ui": "^3.0"
+        "laravel/ui": "^3.0",
+        "pusher/pusher-php-server": "^7.2"
     },
     "require-dev": {
         "beyondcode/laravel-dump-server": "^1.0",
         "filp/whoops": "^2.0",
         "fzaninotto/faker": "^1.4",
         "mockery/mockery": "^1.0",
-        "nunomaduro/collision": "^5.0",
+        "nunomaduro/collision": "^6.1",
         "nunomaduro/larastan": "^0.7.4",
-        "nunomaduro/phpinsights": "^1.14",
+        "nunomaduro/phpinsights": "*",
         "phpstan/phpstan": "^0.12.85",
         "phpunit/phpunit": "^9.0"
     },

config/app.php

@@ -156,7 +156,7 @@ return [
          */
         App\Providers\AppServiceProvider::class,
         App\Providers\AuthServiceProvider::class,
-        // App\Providers\BroadcastServiceProvider::class,
+        App\Providers\BroadcastServiceProvider::class,
         App\Providers\EventServiceProvider::class,
         App\Providers\RouteServiceProvider::class,
 

database/migrations/2022_11_13_183613_create_jobs_table.php

@@ -0,0 +1,36 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::create('jobs', function (Blueprint $table) {
+            $table->bigIncrements('id');
+            $table->string('queue')->index();
+            $table->longText('payload');
+            $table->unsignedTinyInteger('attempts');
+            $table->unsignedInteger('reserved_at')->nullable();
+            $table->unsignedInteger('available_at');
+            $table->unsignedInteger('created_at');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::dropIfExists('jobs');
+    }
+};

package.json

@@ -1,26 +1,23 @@
 {
     "private": true,
     "scripts": {
-        "dev": "npm run development",
-        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "watch": "npm run development -- --watch",
-        "watch-poll": "npm run watch -- --watch-poll",
-        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
-        "prod": "npm run production",
-        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+        "dev": "vite",
+        "build": "vite build"
     },
     "devDependencies": {
-        "axios": "^0.21",
+        "axios": "^1.1.3",
         "bootstrap": "^4.6.0",
         "cross-env": "^5.2.1",
         "jquery": "^3.5.1",
-        "laravel-mix": "^6.0.18",
+        "laravel-echo": "^1.14.1",
+        "laravel-vite-plugin": "^0.7.0",
         "lodash": "^4.17.21",
         "popper.js": "^1.16.1",
+        "postcss": "^8.4.19",
+        "pusher-js": "^7.4.1",
         "resolve-url-loader": "^3.1.3",
-        "sass": "^1.32.12",
+        "sass": "^1.56.1",
         "sass-loader": "^8.0.2",
-        "vue": "^2.6.12",
-        "vue-template-compiler": "^2.6.12"
+        "vite": "^3.2.3"
     }
 }

public/build/assets/pusher.a7756fcc.js

@@ -0,0 +1 @@
+import"https://js.pusher.com/7.2/pusher.min.js";var n=new Pusher("93b3e504421787295454",{cluster:"us2"}),o=n.subscribe("touchedItem");o.bind("RefreshPage",function(e){window.location.reload(),console.log(JSON.stringify(e))});

public/build/manifest.json

@@ -0,0 +1,12 @@
+{
+  "resources/js/app.js": {
+    "file": "assets/app.0299f74e.js",
+    "src": "resources/js/app.js",
+    "isEntry": true
+  },
+  "resources/js/pusher.js": {
+    "file": "assets/pusher.a7756fcc.js",
+    "src": "resources/js/pusher.js",
+    "isEntry": true
+  }
+}

public/mix-manifest.json

@@ -1,4 +1 @@
-{
-    "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
-}
+{}

resources/js/app.js

@@ -5,9 +5,9 @@
  * building robust, powerful web applications using Vue and Laravel.
  */
 
-require('./bootstrap');
+import './bootstrap';
 
-window.Vue = require('vue');
+// window.Vue = require('vue');
 
 /**
  * Next, we will create a fresh Vue application instance and attach it to
@@ -15,8 +15,8 @@ window.Vue = require('vue');
  * or customize the JavaScript scaffolding to fit your unique needs.
  */
 
-Vue.component('example-component', require('./components/ExampleComponent.vue'));
+// Vue.component('example-component', require('./components/ExampleComponent.vue'));
 
-const app = new Vue({
-    el: '#app'
-});
+// const app = new Vue({
+//     el: '#app'
+// });

resources/js/bootstrap.js

@@ -1,18 +1,5 @@
-
-window._ = require('lodash');
-window.Popper = require('popper.js').default;
-
-/**
- * We'll load jQuery and the Bootstrap jQuery plugin which provides support
- * for JavaScript based Bootstrap features such as modals and tabs. This
- * code may be modified to fit the specific needs of your application.
- */
-
-try {
-    window.$ = window.jQuery = require('jquery');
-
-    require('bootstrap');
-} catch (e) {}
+import _ from 'lodash';
+window._ = _;
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -20,37 +7,28 @@ try {
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-window.axios = require('axios');
+import axios from 'axios';
+window.axios = axios;
 
 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 
-/**
- * Next we will register the CSRF Token as a common header with Axios so that
- * all outgoing HTTP requests automatically have it attached. This is just
- * a simple convenience so we don't have to attach every token manually.
- */
-
-let token = document.head.querySelector('meta[name="csrf-token"]');
-
-if (token) {
-    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-} else {
-    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
-}
-
 /**
  * Echo exposes an expressive API for subscribing to channels and listening
  * for events that are broadcast by Laravel. Echo and event broadcasting
  * allows your team to easily build robust real-time web applications.
  */
 
-// import Echo from 'laravel-echo'
+import Echo from 'laravel-echo';
 
-// window.Pusher = require('pusher-js');
+import Pusher from 'pusher-js';
+window.Pusher = Pusher;
 
-// window.Echo = new Echo({
-//     broadcaster: 'pusher',
-//     key: process.env.MIX_PUSHER_APP_KEY,
-//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-//     encrypted: true
-// });
+window.Echo = new Echo({
+    broadcaster: 'pusher',
+    key: import.meta.env.VITE_PUSHER_APP_KEY,
+    wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+    wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+    forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+    enabledTransports: ['ws', 'wss'],
+});

resources/js/components/ExampleComponent.vue

@@ -1,23 +0,0 @@
-<template>
-    <div class="container">
-        <div class="row justify-content-center">
-            <div class="col-md-8">
-                <div class="card card-default">
-                    <div class="card-header">Example Component</div>
-
-                    <div class="card-body">
-                        I'm an example component.
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        mounted() {
-            console.log('Component mounted.')
-        }
-    }
-</script>

resources/js/pusher.js

@@ -0,0 +1,10 @@
+import 'https://js.pusher.com/7.2/pusher.min.js';
+    var pusher = new Pusher('93b3e504421787295454', {
+      cluster: 'us2'
+    });
+
+    var channel = pusher.subscribe('touchedItem');
+    channel.bind('RefreshPage', function(data) {
+        window.location.reload();
+        console.log(JSON.stringify(data));
+    });

resources/views/home.blade.php

@@ -2,15 +2,7 @@
 
 @section('content')
 
-<script type="text/javascript">    
-    setInterval(
-        function() {
-                if (!document.hasFocus() ) {
-                    window.location.reload(true);
-                }
-        },
-        2*60000); //NOTE: period is passed in milliseconds
-</script>
+@vite('resources/js/pusher.js')
 
 <div class="container">
     <div class="row justify-content-center">
@@ -53,4 +45,4 @@
         </div>
     </div>
 </div>
-@endsection
+@endsection

resources/views/layouts/app.blade.php

@@ -11,7 +11,7 @@
     <title>{{ config('app.name', 'Laravel') }} {{ isset($usedItems) && $usedItems > 0 ? "(${usedItems})" : '' }}</title>
 
     <!-- Scripts -->
-    <script src="{{ asset('js/app.js') }}" defer></script>
+    @vite('resources/js/app.js')
 
     <!-- Fonts -->
     <link rel="dns-prefetch" href="https://fonts.gstatic.com">
@@ -88,4 +88,4 @@
     </div>
 </body>
 
-</html>
+</html>

routes/channels.php

@@ -14,3 +14,8 @@
 Broadcast::channel('App.User.{id}', function ($user, $id) {
     return (int) $user->id === (int) $id;
 });
+
+Broadcast::channel('touchedItem', function ($user) {
+    return true;
+    /* return $user->id === Item::findOrNew($itemId)->users->find($user->id)->id; */
+});

vite.config.js

@@ -0,0 +1,28 @@
+import { defineConfig } from 'vite';
+import laravel from 'laravel-vite-plugin';
+// import react from '@vitejs/plugin-react';
+// import vue from '@vitejs/plugin-vue';
+
+export default defineConfig({
+    plugins: [
+        laravel([
+            // 'resources/css/app.css',
+            'resources/js/app.js',
+            'resources/js/pusher.js',
+        ]),
+        // react(),
+        // vue({
+        //     template: {
+        //         transformAssetUrls: {
+        //             base: null,
+        //             includeAbsolute: false,
+        //         },
+        //     },
+        // }),
+    ],
+    resolve: {
+        alias: {
+            '@': '/resources/js'
+        }
+    }
+});

webpack.mix.js

@@ -1,15 +0,0 @@
-const mix = require('laravel-mix');
-
-/*
- |--------------------------------------------------------------------------
- | Mix Asset Management
- |--------------------------------------------------------------------------
- |
- | Mix provides a clean, fluent API for defining some Webpack build steps
- | for your Laravel application. By default, we are compiling the Sass
- | file for the application as well as bundling up all the JS files.
- |
- */
-
-mix.js('resources/js/app.js', 'public/js')
-   .sass('resources/sass/app.scss', 'public/css');