How to use laravel-echo - 10 common examples

To help you get started, we’ve selected a few laravel-echo examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github cretueusebiu / laravel-web-push-demo / resources / js / bootstrap.js View on Github external
Vue.use(VueTimeago, {
  locale: 'en-US',
  locales: { 'en-US': require('vue-timeago/locales/en-US.json') }
})

window.Vue = Vue
window.Pusher = Pusher
window.jQuery = window.$ = $

require('bootstrap-sass/assets/javascripts/bootstrap')

// Configure Laravel Echo
const { key, cluster } = window.Laravel.pusher
if (key) {
  window.Echo = new Echo({
    broadcaster: 'pusher',
    key: key,
    cluster: cluster,
    forceTLS: true
  })

  axios.interceptors.request.use(
    config => {
      config.headers['X-Socket-ID'] = window.Echo.socketId()
      return config
    },
    error => Promise.reject(error)
  )
}

window.axios = axios
github botman / web-widget / src / widget / widget.tsx View on Github external
private setupEcho() {
        if (this.props.conf.useEcho === true) {

            this.Echo = new Echo(this.props.conf.echoConfiguration);
            // Join channel
            let channel;
            if (this.props.conf.echoChannelType === 'private') {
                channel = this.Echo.private(this.props.conf.echoChannel);
            } else {
                channel = this.Echo.channel(this.props.conf.echoChannel);
            }

            channel.listen(this.props.conf.echoEventName, (message: IMessage) => {
                window.botmanChatWidget.writeToMessages(message);
            });
        }
    }
github codeitlikemiley / vuetified / resources / js / services / echo.js View on Github external
import Vue from "vue";
import Echo from "laravel-echo"; /* Make App Realtime */
import VueEcho from "vue-echo"; /* Vue Wrapper for laravel echo */

if (typeof io !== "undefined") {
  window.Echo = Echo;
  let EchoInstance = new Echo({
    namespace: "App\\Events",
    broadcaster: "socket.io",
    host: `${window.location.hostname}:6001`
  });
  /* Install VueEcho: this.$echo */
  Vue.use(VueEcho, EchoInstance);
}
github m-elewa / freelancers-market / resources / js / bootstrap.js View on Github external
*/

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

import Echo from 'laravel-echo';
window.io = require('socket.io-client');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001' // this is laravel-echo-server host
});
github genealogiawebsite / genealogy / resources / assets / js / core / structure / navbar / Notifications.vue View on Github external
init() {
            this.Echo = new Echo({
                broadcaster: 'pusher',
                key: this.meta.pusher,
                cluster: this.meta.pusherCluster,
                namespace: 'App.Events',
            });
        },
        listen() {
github genealogiawebsite / genealogy / resources / js / core / structure / navbar / Notifications.vue View on Github external
initEcho() {
            this.echo = new Echo({
                broadcaster: 'pusher',
                key: this.meta.pusher,
                cluster: this.meta.pusherCluster,
                namespace: 'App.Events',
            });
        },
        initDesktopNotification() {
github guillaumebriday / laravel-blog / resources / js / bootstrap.js View on Github external
* API Token as common header
 */

const apiToken = document.head.querySelector('meta[name="api-token"]')

if (apiToken) {
  window.axios.defaults.headers.common.Authorization = 'Bearer ' + apiToken.content
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

window.Echo = new Echo({
  broadcaster: 'pusher',
  key: process.env.MIX_PUSHER_APP_KEY,
  cluster: process.env.MIX_PUSHER_APP_CLUSTER,
  encrypted: true
})
github abdelaziz321 / Q-Blog / admin-panel / src / store / modules / chat.js View on Github external
import axios from 'axios';
import Echo from 'laravel-echo';

const Pusher = require('pusher-js');

const echo = new Echo({
  broadcaster: 'pusher',
  key: '468adb0d5808c1',
  wsHost: '127.0.0.1',
  httpHost: '127.0.0.1',
  wsPort: 6001,
  disableStats: true,
  encrypted: false,
  auth: {
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('access_token')
    }
  },
  enabledTransports: ['ws', 'wss']
});

echo.connector.pusher.config.authEndpoint = `http://127.0.0.1:8000/broadcasting/auth`;
github fredsted / webhook.site / resources / assets / js / echo.js View on Github external
import Echo from 'laravel-echo'

let echoConfig = {
    broadcaster: AppConfig.Broadcaster,
    key: AppConfig.PusherToken === '' ? null : AppConfig.PusherToken,
};

if (AppConfig.EchoHostMode === 'port') {
    echoConfig.host = window.location.hostname + ':6001';
} else if (AppConfig.EchoHostMode === 'path') {
    echoConfig.host = { host: '/socket.io' };
}

window.Echo = new Echo(echoConfig);
github vaibhavpandeyvpz / deapk / resources / js / bootstrap.js View on Github external
window.$ = window.jQuery = require('jquery');
require('popper.js');
require('bootstrap');
const Echo = require('laravel-echo').default;
window.Pusher = require('pusher-js');

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

window.Echo = new Echo({
    broadcaster: 'pusher',
    cluster: process.env.MIX_PUSHER_APP_CLUSTER,
    encrypted: true,
    key: process.env.MIX_PUSHER_APP_KEY
});

laravel-echo

Laravel Echo library for beautiful Pusher and Socket.IO integration

MIT
Latest version published 8 days ago

Package Health Score

89 / 100
Full package analysis

Popular laravel-echo functions