From 63da860df5d261b0261866a0b8c930b77c11b632 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C4=8Carodej?= Date: Fri, 20 May 2022 16:48:25 +0200 Subject: [PATCH] test websocket connection --- changelog.md | 3 +- public/mix-manifest.json | 4 +- resources/js/store/modules/broadcasting.js | 40 +++++++++++++++++ .../Settings/AppSettingsTabs/Environment.vue | 44 +++++++++++++++++++ .../Admin/Settings/AppSettingsTabs/Server.vue | 24 ++++++++++ routes/admin.php | 5 ++- .../TestWebsocketConnectionController.php | 21 +++++++++ .../Events/TestWebsocketConnectionEvent.php | 40 +++++++++++++++++ 8 files changed, 176 insertions(+), 5 deletions(-) create mode 100644 src/Domain/Settings/Controllers/TestWebsocketConnectionController.php create mode 100644 src/Domain/Settings/Events/TestWebsocketConnectionEvent.php diff --git a/changelog.md b/changelog.md index 6502db3e..60786222 100644 --- a/changelog.md +++ b/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 diff --git a/public/mix-manifest.json b/public/mix-manifest.json index d0ce392a..f277111d 100644 --- a/public/mix-manifest.json +++ b/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", diff --git a/resources/js/store/modules/broadcasting.js b/resources/js/store/modules/broadcasting.js index a5c16f5c..0d677860 100644 --- a/resources/js/store/modules/broadcasting.js +++ b/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, } diff --git a/resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue index 8145300f..2f8098e5 100644 --- a/resources/js/views/Admin/Settings/AppSettingsTabs/Environment.vue +++ b/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', { diff --git a/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue b/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue index e86bdae1..9bfe9a63 100644 --- a/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue +++ b/resources/js/views/Admin/Settings/AppSettingsTabs/Server.vue @@ -28,6 +28,25 @@ + +
+ Broadcasting + +
+
+ Websocket connection + + Here you can test websocket connection by sending test event. + +
+
+ + {{ $t('Send Test Event') }} + +
+
+
+
Latest Server Logs @@ -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') diff --git a/routes/admin.php b/routes/admin.php index 73998312..e6b826cb 100644 --- a/routes/admin.php +++ b/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); diff --git a/src/Domain/Settings/Controllers/TestWebsocketConnectionController.php b/src/Domain/Settings/Controllers/TestWebsocketConnectionController.php new file mode 100644 index 00000000..7c7e4918 --- /dev/null +++ b/src/Domain/Settings/Controllers/TestWebsocketConnectionController.php @@ -0,0 +1,21 @@ +user() + ); + + return response()->json([ + 'type' => 'success', + 'message' => 'The websocket test event was successfully dispatched.', + ]); + } +} \ No newline at end of file diff --git a/src/Domain/Settings/Events/TestWebsocketConnectionEvent.php b/src/Domain/Settings/Events/TestWebsocketConnectionEvent.php new file mode 100644 index 00000000..503d2626 --- /dev/null +++ b/src/Domain/Settings/Events/TestWebsocketConnectionEvent.php @@ -0,0 +1,40 @@ +user->id}"); + } +}