This 2 .js files are used to listen from server broadcasting with laravel-websockets, so that you don't need the use of Vue.js in your laravel app
- Follow all installation and configuration process of laravel-websockets and instead of using Vue.js component, just add this line where you want to listen for changes :
<script>
window.Laravel = <?php echo json_encode([
'csrfToken' => csrf_token(),
]); ?>;
var module = { }; /* <-----THIS LINE */
</script>
<script type="module">
import Echo from '{{asset('js/echo.js')}}'
import {Pusher} from '{{asset('js/pusher.js')}}'
window.Pusher = Pusher
window.Echo = new Echo({
broadcaster: 'pusher',
key: 'your-key',
wsHost: window.location.hostname,
wsPort: 6001,
forceTLS: false,
disableStats: true,
});
window.Echo.channel('your-channel')
.listen('your-event-class', (e) => {
console.log(e)
})
console.log("websokets in use")
</script>
To generate them follow this instructions
-
Install laravel-echo and pusher with npm
-
Go to
your-project-folder/node_modules/laravel-echo/dist
and copyecho.js
toyour-project-folder/public/js
-
Go to
your-project-folder/node_modules/pusher-js/dist/worker
and copypusher.worker.js
, rename it topusher.js
then copy toyour-project-folder/public/js
-
To the new
pusher.js
renamed add "export" before the "var Pusher" in the first line of code like so:export var Pusher =
Thats it