test websocket connection

changelog.md

@@ -4,7 +4,8 @@
 - Solved issue where after team member was invited into team folder, email with urging the recipient to create new account was sent
 - You are now allowed to set price for metered billing in 3 decimal places
 - Solved UI issue with empty notification popup
-- If you send file request for native user via email option, the push notification will be send to the user
+- If you send file request for native user via email option, the push notification will be sent to the user
+- Ability to test your websocket (Broadcasting) connection via Admin / Server / Broadcasting tab
 
 ## Version 2.1.3
 #### Release date: 10. May 2022

public/mix-manifest.json

@@ -42,11 +42,11 @@
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=b0d1082fdcbbd17c",
     "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=8ba3feb2cc81a2c3",
     "/chunks/app-index.js": "/chunks/app-index.js?id=0c50096e8de09288",
-    "/chunks/app-environment.js": "/chunks/app-environment.js?id=3436286fd625f8b7",
+    "/chunks/app-environment.js": "/chunks/app-environment.js?id=09e6d087847e6057",
     "/chunks/app-others.js": "/chunks/app-others.js?id=dd23507db4551d0a",
     "/chunks/app-sign-in-out.js": "/chunks/app-sign-in-out.js?id=77ac953ce49b5b55",
     "/chunks/app-adsense.js": "/chunks/app-adsense.js?id=c7e7dc2975317062",
-    "/chunks/app-server.js": "/chunks/app-server.js?id=ff66d34e90ff98a0",
+    "/chunks/app-server.js": "/chunks/app-server.js?id=60b6d1a5e3b1aeb8",
     "/chunks/app-language.js": "/chunks/app-language.js?id=46d7fc713d36cea8",
     "/chunks/homepage.js": "/chunks/homepage.js?id=55c3e017e2a12876",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=9553d7a2912cb901",

resources/js/store/modules/broadcasting.js

@@ -1,16 +1,52 @@
 import { events } from '../../bus'
 import i18n from "../../i18n"
+import axios from "axios";
 
 const defaultState = {
     remoteUploadQueue: undefined,
+    isTestingConnection: false,
     isBroadcasting: false,
 }
 
 const actions = {
+    testConnection: ({ commit, getters }) => {
+        commit('SET_TESTING_CONNECTION', true)
+
+        commit('PROCESSING_POPUP', {
+            title: 'Testing Connection',
+            message: 'We are testing your websocket connection, please wait a minute...',
+        })
+
+        setTimeout(() => {
+            axios.post('/api/admin/test-websockets')
+        },1500)
+
+        // In case if connection wasn't established
+        setTimeout(() => {
+            if (getters.isTestingConnection) {
+                events.$emit('toaster', {
+                    type: 'danger',
+                    message: "Your websocket connection wasn't established",
+                })
+
+                commit('PROCESSING_POPUP', undefined)
+                commit('SET_TESTING_CONNECTION', false)
+            }
+        }, 10000)
+    },
     runConnection: ({ commit, getters, dispatch }) => {
         commit('SET_RUNNING_COMMUNICATION')
 
         Echo.private(`App.Users.Models.User.${getters.user.data.id}`)
+            .listen('.TestWebsocketConnection', () => {
+                commit('PROCESSING_POPUP', undefined)
+                commit('SET_TESTING_CONNECTION', false)
+
+                events.$emit('toaster', {
+                    type: 'success',
+                    message: 'Your websocket connection was successfully established',
+                })
+            })
             .listen('.RemoteFile.Created', (event) => {
                 commit('UPDATE_REMOTE_UPLOAD_QUEUE', event.payload)
 
@@ -59,6 +95,9 @@ const mutations = {
     SET_RUNNING_COMMUNICATION(state) {
         state.isBroadcasting = true
     },
+    SET_TESTING_CONNECTION(state, val) {
+        state.isTestingConnection = val
+    },
     UPDATE_REMOTE_UPLOAD_QUEUE(state, payload) {
         if (payload.progress.total !== payload.progress.processed) {
             state.remoteUploadQueue = {
@@ -72,6 +111,7 @@ const mutations = {
 }
 
 const getters = {
+    isTestingConnection: (state) => state.isTestingConnection,
     remoteUploadQueue: (state) => state.remoteUploadQueue,
     isBroadcasting: (state) => state.isBroadcasting,
 }

resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue

@@ -77,6 +77,7 @@ import MailSetup from '../../../../components/Forms/MailSetup'
 import { events } from '../../../../bus'
 import axios from 'axios'
 import BroadcastSetup from "../../../../components/Forms/BroadcastSetup";
+import Echo from "laravel-echo";
 
 export default {
     name: 'AppEnvironment',
@@ -120,6 +121,49 @@ export default {
                         type: 'success',
                         message: this.$t('broadcast_driver_updated'),
                     })
+
+					let config = {
+						'pusher': {
+							broadcasting: 'pusher',
+							broadcastingKey: this.broadcast.key,
+							broadcastingHost: this.broadcast.host,
+							broadcastingCluster: this.broadcast.cluster,
+						},
+						'native': {
+							broadcasting: 'pusher',
+							broadcastingHost: this.broadcast.host,
+							broadcastingKey: 'local',
+							broadcastingCluster: 'local',
+						},
+						'none': {
+							broadcasting: 'null',
+						}
+					}
+
+					// Set up echo
+					if (['pusher', 'native'].includes(this.broadcast.driver)) {
+						window.Echo = new Echo({
+							broadcaster: 'pusher',
+							cluster: this.broadcast.cluster || 'local',
+							key: this.broadcast.key || 'local',
+							wsHost: this.broadcast.host,
+							forceTLS: false,
+							enabledTransports: ['ws', 'wss'],
+						});
+					}
+
+					Object
+						.entries(config[this.broadcast.driver])
+						.map(([key, value]) => {
+							this.$store.commit('REPLACE_CONFIG_VALUE', {
+								key: key,
+								value: value,
+							})
+
+							if (key === 'broadcasting' && value === 'pusher') {
+								this.$store.dispatch('runConnection')
+							}
+						})
                 })
                 .catch(() => {
                     events.$emit('toaster', {

resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue

@@ -28,6 +28,25 @@
             </div>
         </div>
 
+		<!--Broadcasting-->
+        <div class="card shadow-card">
+            <FormLabel icon="info">Broadcasting</FormLabel>
+
+            <div class="lg:flex lg:space-y-0 space-y-3 items-center justify-between">
+                <div class="text-left">
+                    <b class="block text-sm font-bold">Websocket connection</b>
+                    <small class="text-xs text-gray-600 pt-1 block leading-normal">
+                        Here you can test websocket connection by sending test event.
+                    </small>
+                </div>
+                <div class="flex items-center">
+                    <ButtonBase @click.native="testWebsocketConnection" class="w-full sm:w-auto" button-style="theme">
+                        {{ $t('Send Test Event') }}
+                    </ButtonBase>
+                </div>
+            </div>
+        </div>
+
         <!--Logs-->
         <div class="card shadow-card">
             <FormLabel icon="list">Latest Server Logs</FormLabel>
@@ -204,10 +223,12 @@ import PageTab from '../../../../components/Layout/PageTab'
 import InfoBox from '../../../../components/UI/Others/InfoBox'
 import { mapGetters } from 'vuex'
 import axios from 'axios'
+import ButtonBase from "../../../../components/UI/Buttons/ButtonBase";
 
 export default {
     name: 'Server',
     components: {
+		ButtonBase,
         FormLabel,
         InfoBox,
         PageTab,
@@ -235,6 +256,9 @@ export default {
         }
     },
 	methods: {
+		testWebsocketConnection() {
+			this.$store.dispatch('testConnection')
+		},
 		downloadLog(log) {
 
 			let anchor = document.createElement('a')

routes/admin.php

@@ -5,6 +5,7 @@ use Domain\Pages\Controllers\AdminPagesController;
 use Domain\Settings\Controllers\FlushCacheController;
 use Domain\Localization\Controllers\LanguageController;
 use Domain\Admin\Controllers\Users\DeleteUserController;
+use Domain\Settings\Controllers\TestWebsocketConnectionController;
 use Domain\Settings\Controllers\UpgradeLicenseController;
 use Domain\Settings\Controllers\GetServerStatusController;
 use Domain\Settings\Controllers\GetSettingsValueController;
@@ -64,7 +65,7 @@ Route::group(['prefix' => 'settings'], function () {
 Route::patch('/languages/{language}/strings', UpdateLanguageStringController::class);
 Route::apiResource('/languages', LanguageController::class);
 
-// Server Status
+// Miscellaneous
 Route::get('/status', GetServerStatusController::class);
-
 Route::post('/upgrade-license', UpgradeLicenseController::class);
+Route::post('/test-websockets', TestWebsocketConnectionController::class);

src/Domain/Settings/Controllers/TestWebsocketConnectionController.php

@@ -0,0 +1,21 @@
+<?php
+
+namespace Domain\Settings\Controllers;
+
+use Domain\Settings\Events\TestWebsocketConnectionEvent;
+use Illuminate\Http\JsonResponse;
+
+class TestWebsocketConnectionController
+{
+    public function __invoke(): JsonResponse
+    {
+        TestWebsocketConnectionEvent::dispatch(
+            auth()->user()
+        );
+
+        return response()->json([
+            'type' => 'success',
+            'message' => 'The websocket test event was successfully dispatched.',
+        ]);
+    }
+}

src/Domain/Settings/Events/TestWebsocketConnectionEvent.php

@@ -0,0 +1,40 @@
+<?php
+namespace Domain\Settings\Events;
+
+use App\Users\Models\User;
+use Illuminate\Queue\SerializesModels;
+use Illuminate\Broadcasting\PrivateChannel;
+use Illuminate\Foundation\Events\Dispatchable;
+use Illuminate\Broadcasting\InteractsWithSockets;
+use Illuminate\Contracts\Broadcasting\ShouldBroadcastNow;
+
+class TestWebsocketConnectionEvent implements ShouldBroadcastNow
+{
+    use Dispatchable, InteractsWithSockets, SerializesModels;
+
+    /**
+     * Create a new event instance.
+     *
+     * @return void
+     */
+    public function __construct(
+        public User $user,
+    ) {
+    }
+
+    /**
+     * The event's broadcast name.
+     */
+    public function broadcastAs(): string
+    {
+        return 'TestWebsocketConnection';
+    }
+
+    /**
+     * Get the channels the event should broadcast on.
+     */
+    public function broadcastOn(): PrivateChannel
+    {
+        return new PrivateChannel("App.Users.Models.User.{$this->user->id}");
+    }
+}