test websocket connection

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')