Cacher is the code snippet organizer for pro developers

# clone repo
git clone https://github.com/imarc/laravel-echo-example
cd laravel-echo-example

# install php dependencies
composer install
composer run-script install-tasks

# install npm dependencies and build
npm install
npm run prod

# start docker services
DOMAIN=localtest.me docker-compose up

# Advanced/Optional: to deploy to a real public domain with Traefik's TLS management enabled, do this:
DOMAIN=your-domain.com docker-compose -f docker-compose.yml up

const app = new Vue({
    el: '#app',

    data() {
        return {
            messages: []
        }
    },

    mounted() {
        window.Echo.channel('global')
            .listen('TestEvent', (e) => {
                this.messages.unshift(e.data);
            });
    },

    methods: {
        broadcast() {
            axios.get('/broadcast-test');
        }
    }
});

// excerpt from bootstrap.js

import Echo from 'laravel-echo'

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: `${window.echoConfig.host}:${window.echoConfig.port}`
});

version: '2'

services:
  proxy:
    image: traefik
    command: --docker.domain=${DOMAIN} --logLevel=DEBUG
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
      - ./traefik/traefik.toml:/etc/traefik/traefik.toml
      - ./traefik/acme.json:/etc/traefik/acme/acme.json

  www:
    image: imarcagency/php-apache:2
    environment:
      - "APACHE_ROOT=/var/www/public"
      - "DOMAIN=${DOMAIN}"
    labels:
      - "traefik.enable=true"
      - "traefik.frontend.rule=Host:www.${DOMAIN}"
      - "traefik.port=80"
    volumes:
      - "./:/var/www"
      - "./docker-configure.sh:/usr/local/bin/docker-configure"
      - "app_storage:/var/www/storage"

  mysql:
    image: "mariadb:10.3"
    environment:
      - "MYSQL_DATABASE=app"
      - "MYSQL_USER=app"
      - "MYSQL_PASSWORD=app"
      - "MYSQL_RANDOM_ROOT_PASSWORD=yes"
    volumes:
      - "mysql_data:/var/lib/mysql"

  redis:
    image: "redis:3.2"
    command: "redis-server --appendonly yes"
    volumes:
      - "redis_data:/data"

  echo:
    build: ./echo
    labels:
      - "traefik.enable=true"
      - "traefik.frontend.rule=Host:echo.${DOMAIN}"
      - "traefik.port=80"
    working_dir: "/usr/src/app"
    volumes:
      - "./:/usr/src/app"

volumes:
  app_storage:
  mysql_data:
  redis_data:

// excerpt from web/routes.php

Route::get('/broadcast-test', function() {
   event(new TestEvent('The server time is now ' . date('H:i:s')));
});

{{-- excerpt from welcome.blade.php --}}

<script>
    window.echoConfig = {
        host: {!! json_encode(env('ECHO_HOST')) !!},
        port: {!! json_encode(env('ECHO_PORT')) !!}
    };
</script>

<!-- Scripts -->
<script src="//{{ env('ECHO_HOST') }}/socket.io/socket.io.js"></script>
<script src="{{ asset('js/app.js') }}"></script>