app/Events/RefreshPage.php

@@ -1,53 +0,0 @@
-<?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,20 +5,12 @@ 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;
 
     /**
@@ -40,11 +32,6 @@ class ReturnItem
      */
     public function broadcastOn()
     {
-        return new PrivateChannel('touchedItem');
+        return new PrivateChannel('channel-name');
-    }
-
-    public function broadcastAs()
-    {
-        return 'ReturnItem';
     }
 }

app/Http/Controllers/TakeController.php

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

app/Http/Middleware/TrustProxies.php

@@ -2,7 +2,7 @@
 
 namespace App\Http\Middleware;
 
-use Illuminate\Http\Middleware\TrustProxies as Middleware;
+use Fideloper\Proxy\TrustProxies as Middleware;
 use Illuminate\Http\Request;
 
 class TrustProxies extends Middleware
@@ -19,10 +19,5 @@ class TrustProxies extends Middleware
      *
      * @var int
      */
-    protected $headers =
+    protected $headers = Request::HEADER_X_FORWARDED_ALL;
-        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,22 +5,21 @@
     "license": "MIT",
     "type": "project",
     "require": {
-        "php": "^8.0.2",
+        "php": "^7.3.0",
-        "inertiajs/inertia-laravel": "^0.6.3",
+        "fideloper/proxy": "^4.4",
-        "laravel/framework": "^9.19.0",
+        "laravel/framework": "^8.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": "^6.1",
+        "nunomaduro/collision": "^5.0",
         "nunomaduro/larastan": "^0.7.4",
-        "nunomaduro/phpinsights": "*",
+        "nunomaduro/phpinsights": "^1.14",
         "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

@@ -1,36 +0,0 @@
-<?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,23 +1,26 @@
 {
     "private": true,
     "scripts": {
-        "dev": "vite",
+        "dev": "npm run development",
-        "build": "vite build"
+        "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"
     },
     "devDependencies": {
-        "axios": "^1.1.3",
+        "axios": "^0.21",
         "bootstrap": "^4.6.0",
         "cross-env": "^5.2.1",
         "jquery": "^3.5.1",
-        "laravel-echo": "^1.14.1",
+        "laravel-mix": "^6.0.18",
-        "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.56.1",
+        "sass": "^1.32.12",
         "sass-loader": "^8.0.2",
-        "vite": "^3.2.3"
+        "vue": "^2.6.12",
+        "vue-template-compiler": "^2.6.12"
     }
 }

public/build/assets/pusher.a7756fcc.js

@@ -1 +0,0 @@
-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

@@ -1,12 +0,0 @@
-{
-  "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 +1,4 @@
-{}
+{
+    "/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.
  */
 
-import './bootstrap';
+require('./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 @@ import './bootstrap';
  * 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({
+const app = new Vue({
-//     el: '#app'
+    el: '#app'
-// });
+});

resources/js/bootstrap.js

@@ -1,5 +1,18 @@
-import _ from 'lodash';
+
-window._ = _;
+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) {}
 
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
@@ -7,28 +20,37 @@ window._ = _;
  * CSRF token as a header based on the value of the "XSRF" token cookie.
  */
 
-import axios from 'axios';
+window.axios = require('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'
 
-import Pusher from 'pusher-js';
+// window.Pusher = require('pusher-js');
-window.Pusher = Pusher;
 
-window.Echo = new Echo({
+// window.Echo = new Echo({
-    broadcaster: 'pusher',
+//     broadcaster: 'pusher',
-    key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     key: process.env.MIX_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`,
+//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
-    wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     encrypted: true
-    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

@@ -0,0 +1,23 @@
+<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

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

resources/views/layouts/app.blade.php

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

routes/channels.php

@@ -14,8 +14,3 @@
 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

@@ -1,28 +0,0 @@
-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

@@ -0,0 +1,15 @@
+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');