How to use laravel-echo - 10 common examples

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

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);
            });
        }
    }

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);
}

*/

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
});

* 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
})

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`;

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

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
});