https://github.com/motia/laravel-echo-spa-plugin
A library to simplify the integration of Laravel Echo with your SPA/PWA
https://github.com/motia/laravel-echo-spa-plugin
javascript laravel-echo laravel-echo-server pwa spa websocket
Last synced: 11 months ago
JSON representation
A library to simplify the integration of Laravel Echo with your SPA/PWA
- Host: GitHub
- URL: https://github.com/motia/laravel-echo-spa-plugin
- Owner: motia
- License: mit
- Created: 2019-12-05T14:03:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-05T14:18:09.000Z (over 6 years ago)
- Last Synced: 2025-06-27T06:07:05.440Z (12 months ago)
- Topics: javascript, laravel-echo, laravel-echo-server, pwa, spa, websocket
- Language: JavaScript
- Homepage:
- Size: 2.93 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Laravel Echo SPA Module
A library to simplify the integration of Laravel Echo with your SPA/PWA
# Setup
```
yarn add laravel-echo-spa-plugin
```
Define env variables for your application
```js
env: {
ECHO_AUTH_ENDPOINT: '/api/broadcasting/auth',
ECHO_HOST: 'http://echo-demo.test'
}
```
# Usage
```js
import { createPlugin } from 'laravel-echo-spa-plugin'
const $echo = createPlugin()
// load 'socket.io.js' dynamically if 'window.io' is not defined
// no PROMISE is returned!
// register your callbacks using $echo.onEchoReady
$echo.loadScript()
$echo.onEchoReady((echo) => {
// this is the Laravel Echo Instance
echo.private('room')
.listen(...)
// it can be accessed by $echo.echo
console.log(echo === $echo.echo) // true
})
// add token if you need private channels
$echo.setToken('AUTH_TOKEN_FOR_PRIVATE_CHANNELS')
// connect, this method will wait for the setup method to completes
$echo.connect()
// you can access the echo instance directly
$echo.echo.private('room')
.listen(...)
...
// shutdown the echo instance
$echo.close()
// you can reconnect later
$echo.connect()
```
# Nuxt.js Example
```js
// ~/plugins/echo.js
import Vue from 'vue'
import { createPlugin, registerAxiosInterceptor } from 'laravel-echo-spa-plugin'
export default function({ app, $axios }) {
const $echo = createPlugin()
Vue.prototype.$echo = app.$echo = $echo
// Support broadcasting to others for axios
if ($axios) {
registerAxiosInterceptor($axios)
}
}
// nuxt.config.js
{
env: {
ECHO_AUTH_ENDPOINT: '/api/broadcasting/auth',
ECHO_HOST: 'http://echo-demo.test'
},
plugins: [
'~/plugins/echo'
],
}
```