Instruction how to install laravel echo and pusher without vuejs or even npm

Overview

Build Status Total Downloads Latest Stable Version License

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

  1. Install laravel-echo and pusher with npm

  2. Go to your-project-folder/node_modules/laravel-echo/dist and copy echo.js to your-project-folder/public/js

  3. Go to your-project-folder/node_modules/pusher-js/dist/worker and copy pusher.worker.js, rename it to pusher.js then copy to your-project-folder/public/js

  4. 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

You might also like...

This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do any operations that can be performed in python shell with this package.

Django execute code This is a project that is used to execute python codes in the web page. You can install and use it in django projects, You can do

Nov 12, 2022

Possibly the coolest way to install apps and customize your Mac!

Possibly the coolest way to install apps and customize your Mac!

BrewMyMac Possibly the coolest way to install apps and customize your Mac! Introduction This article explains the motivation behind this project. Gett

Dec 6, 2022

A Node.JS tool to automatically install or update your FiveM server artifacts.

ItsANoBrainer FiveM Artifact Updater FiveM Artifact Updater is an application created with Node.JS to easily and quickly install/update your artifacts

Dec 8, 2022

GitHub action to install Foundry

foundry-toolchain Action This GitHub action installs Foundry. Example workflow on: [push] name: test jobs: check: name: Foundry project ru

Jan 5, 2023

A tool to install ubuntu mainline kernels from the console.

Ubuntu Kernel Tool A tool to list, download, and install mainline kernels from the Ubuntu mainline repository. ULTIMATE DISCLAIMER: DO NOT USE THIS TO

Jan 21, 2022

๐ŸŽจ VS Code extension for antd v5 design token. Install it now!๐Ÿ‘‡

๐ŸŽจ VS Code extension for antd v5 design token. Install it now!๐Ÿ‘‡

antd design token VSCode extension for antd v5 design token. Features Provide the hover hint and editor decorations of antd v5 design token, include c

Dec 30, 2022

A command-line tool to manage Deno scripts installed via deno install

๐Ÿž๏ธ nublar nublar is a command-line tool to manage your scripts installed via deno install. ๐Ÿ›ณ๏ธ Installation deno install --allow-read --allow-write -

Dec 26, 2022

An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.

Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f

Dec 28, 2022

E-commerce website using Laravel, Tailwindcss and Alpine.js

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Dec 12, 2022
Owner
Muath Assawadi
Software Engineer On a mission to improve programming quality. It's me, a full-stack web and mobile developer.
Muath Assawadi
Quick programmatically install npm dependencies ๐Ÿ“ฆ

qpind Install dependecies quick & programmatically ?? Install # Using npm: npm install qpind # Using pnpm: pnpm add qpind # Using yarn: yarn add qpind

Conner 15 Oct 6, 2022
An echo cancellation library for browsers using DTLN-aec

dtln-aec breizhn/DTLN-aec ใจใ„ใ†ๆทฑๅฑคๅญฆ็ฟ’ใƒ™ใƒผใ‚นใฎใ‚จใ‚ณใƒผใ‚ญใƒฃใƒณใ‚ปใƒฉใ‚’ใƒ–ใƒฉใ‚ฆใ‚ถใงๅˆฉ็”จใ™ใ‚‹ใŸใ‚ใฎใƒฉใ‚คใƒ–ใƒฉใƒชใงใ™ใ€‚ About Shiguredo's open source software We will not respond to PRs or issues that ha

ๆ™‚้›จๅ ‚ (shiguredo) 17 Dec 24, 2022
๐ŸŽ‹ Echo your message as anonymous on Slack!

Bamboo Forest ?? ์—ฌ๋Ÿฌ๋ถ„์˜ ์Šฌ๋ž™ ์›Œํฌ์ŠคํŽ˜์ด์Šค์— ๊ตฌ์„ฑ์›๋“ค์˜ ๋ฉ”์‹œ์ง€๋ฅผ ์ต๋ช…์œผ๋กœ ์ „์†กํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์„ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ์ด๋Ÿด ๋•Œ ์‚ฌ์šฉํ•ด๋ณด์„ธ์š” ๊ตฌ์„ฑ์›์˜ ์†”์งํ•œ ํ”ผ๋“œ๋ฐฑ์ด ํ•„์š”ํ•  ๋•Œ ๋ฏผ๊ฐํ•œ ์ด์Šˆ์— ๋Œ€ํ•ด ํ† ๋ก ์ด ํ•„์š”ํ•  ๋•Œ ๊ตฌ์„ฑ์›์„ ์นญ์ฐฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ ๊ณ ๋ฏผ๊ฑฐ๋ฆฌ๋ฅผ ํ„ธ์–ด๋†“์„ ์žฅ

Jongyoon Jeong 102 Dec 26, 2022
Proyecto de encriptasion, echo para el curso de Oracle Next Education 2022

Encriptador Proyecto de Encriptador, echo para el curso de Oracle Next Education 2022. Link directo al proyecto desplegado Link al Encriptador Instruc

Bernardo Abel Lopez 14 Dec 28, 2022
With these scripts, you can do it even without knowing html

About the Project: Have you ever wanted to create quick and easy to generate draggable frames in html? With these scripts, you can do it even without

GDLev 4 Apr 29, 2022
VueJS based Shopsystem for the Athena Framework, absolute free and open source! Full Database Integration (MongoDB)

Open Source Shop Herewith we bring a free store system for the Athena Framework which is under the MIT license and thus can be completely modified and

Der Lord! 13 Oct 31, 2022
Powerful rich text editor using Vue.js and Quill. About @quilljs editor component for @vuejs

quill-vuejs Quill editor component for Vue. ๅŸบไบŽ Quillใ€้€‚็”จไบŽ Vue ็š„ๅฏŒๆ–‡ๆœฌ็ผ–่พ‘ๅ™จ๏ผŒๆ”ฏๆŒๆœๅŠก็ซฏๆธฒๆŸ“ๅ’Œๅ•้กตๅบ”็”จใ€‚ Preview Example CDN example page Component example page Install NPM

Chi Zhang 10 Aug 10, 2022
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
Service Installer for VMware Tanzu is a one-click automation solution that enables VMware field engineers to easily and rapidly install, configure, and operate VMware Tanzu services across a variety of cloud infrastructures.

Service Installer for VMware Tanzu Service Installer for VMware Tanzu seeks to provide a one-click automation solution to enable our VMware engineers

VMware Tanzu 42 Dec 1, 2022
Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome.

Flatline Open apps directly in GNOME Software by clicking Install from Flathub and apps.gnome. Load the extension in Firefox Clone the repository Open

Cleo Menezes Jr. 43 Nov 7, 2022