Dockerfile for PHP 8.1 with Apache and XDebug3

Hits: 4834

FROM php:8.1.1-apache

RUN echo "Europe/Berlin" > /etc/timezone && dpkg-reconfigure -f noninteractive tzdata

ENV APACHE_DOCUMENT_ROOT /var/www/html/web

RUN  apt-get update && apt-get install -y ca-certificates gnupg
RUN curl -fsSL https://deb.nodesource.com/setup_16.x | bash -

RUN apt-get update && apt-get upgrade -y && apt-get install -y git nodejs

RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf
RUN sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf

RUN /usr/sbin/a2enmod rewrite && /usr/sbin/a2enmod headers && /usr/sbin/a2enmod expires

RUN apt-get update && apt-get install -y libzip-dev zip && docker-php-ext-install zip

RUN docker-php-ext-install pdo pdo_mysql mysqli

RUN apt-get install -y libtidy-dev && docker-php-ext-install tidy && docker-php-ext-enable tidy

RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

RUN pecl install xdebug && docker-php-ext-enable xdebug
RUN echo 'zend_extension=xdebug' >> /usr/local/etc/php/php.ini
RUN echo 'xdebug.mode=develop,debug' >> /usr/local/etc/php/php.ini
RUN echo 'xdebug.client_host=host.docker.internal' >> /usr/local/etc/php/php.ini
RUN echo 'xdebug.start_with_request=yes' >> /usr/local/etc/php/php.ini
RUN echo 'session.save_path = "/tmp"' >> /usr/local/etc/php/php.ini

Vue3 – Global Socket.io Installation (in all components)

Hits: 1284

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import .....
import io from 'socket.io-client';

const app =  createApp(App);
app.config.globalProperties.$soketio = io('YOUR-SOCKET-IO-SERVER-HOSTNAME-WITH-PORT');
app.use(store).use(router).mount('#app')

Listening example in Vue Component

<template>
<div>
  <ol class="list-group list-group">
    <li class="list-group-item d-flex justify-content-between align-items-start"
        v-for="(message,index) in messages" :key="index">
      <div class="ms-2 me-auto">
        {{ message.message }}
      </div>
    </li>
  </ol>
 </div>
</template>

<script>

export default {
  name: "Message",
  data() {
    return {
        messages: []
    }
  },
  created() {
    this.$soketio.on('new-message', (data) => {
      this.messages.push(data);
    })
  }
}
</script>

Emit example in Vue Component

<template>
  <div class="thing">
    <button @click="makeSomething">makeSomething</button>
  </div>
</template>

<script>

export default {
  name: 'User',
  data() {
    return {
    }
  },
  methods: {
    makeSomething(){
      this.$soketio.emit('remove-user', this.user);
    }
  },
}
</script>