Laravel × Redis × Docker での Websocketリアルタイム通信

git clone -b feature/websocket https://github.com/fourierLab/techblog-laravel-redis-docker-websocket techblog-laravel-redis-docker-websocket

git clone https://github.com/fourierLab/techblog-laravel-redis-docker-websocket techblog-laravel-redis-docker-websocket

cd techblog-laravel-redis-docker-websocket

docker compose build --no-cache

docker compose up -d

docker compose exec app bash
composer install
cp .env.example .env
php artisan key:generate
php artisan migrate

FROM node:16.15.1-alpine
RUN npm install -g laravel-echo-server
WORKDIR /work
CMD ["laravel-echo-server", "start"]

FROM php:8.1-fpm

# php設定コピー
COPY ./docker/app/php.ini /usr/local/etc/php/php.ini
COPY ./docker/app/php-fpm.d/zzz-docker.conf /usr/local/etc/php-fpm.d/zzz-docker.conf

# パッケージインストール
RUN apt update && \
    apt -y install \
    git \
    zip \
    unzip \
    vim \
    && docker-php-ext-install opcache \
    && docker-php-ext-install pdo_mysql bcmath

# Composer
COPY --from=composer:2.1 /usr/bin/composer /usr/bin/composer

# phpredis // インストールを忘れすに！！
RUN pecl install redis \
    && docker-php-ext-enable redis

# Node.js
COPY --from=node:16.15.1 /usr/local/bin /usr/local/bin
COPY --from=node:16.15.1 /usr/local/lib /usr/local/lib

WORKDIR /var/www/html

version: "3.8"

services:
  app:
    container_name: laravel-websocket-app
    build:
      context: .
      dockerfile: ./docker/app/Dockerfile
    restart: always
    volumes:
      - type: bind
        source: ./src
        target: /var/www/html
      - type: volume
        source: php_fpm_socket
        target: /var/run/php-fpm

  web:
    container_name: laravel-websocket-web
    build:
      context: .
      dockerfile: ./docker/web/Dockerfile
    restart: always
    volumes:
      - type: bind
        source: ./src
        target: /var/www/html
      - type: volume
        source: php_fpm_socket
        target: /var/run/php-fpm
    ports:
      - "${WEB_PORT}:80"
    depends_on:
      - app

  db:
    container_name: laravel-websocket-db
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    restart: always
    volumes:
      - type: volume
        source: mysql_volume
        target: /var/lib/mysql
    ports:
      - ${DB_PORT}:3306
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}

  redis:
    container_name: laravel-websocket-redis
    image: "redis:latest"
    restart: always
    volumes:
      - type: volume
        source: redis_data 
        target: /data
    ports:
      - "6379:6379"

  echo-server:
    container_name: laravel-websocket-echo-server
    build: ./docker/echo-server
    restart: always
    volumes:
      - type: bind
        source: ./src
        target: /work
    ports:
      - "6001:6001"

volumes:
  php_fpm_socket:
  mysql_volume:
  redis_data:

networks:
  default:
    name: laravel-websocket-network

docker compose run echo-server laravel-echo-server init

? Do you want to run this server in development mode? Yes
? Which port would you like to serve from? 6001
? Which database would you like to use to store presence channel members? redis
? Enter the host of your Laravel authentication server. http://localhost
? Will you be serving on http or https? http
? Do you want to generate a client ID/Key for HTTP API? No
? Do you want to setup cross domain access to the API? No
? What do you want this config to be saved as? laravel-echo-server.json
Configuration file saved. Run laravel-echo-server start to run server.

"databaseConfig": {
        "redis": {
            "host": "redis",
            "port": 6379
        },
  ...
},

{
    "authHost": "http://localhost",
    "authEndpoint": "/broadcasting/auth",
    "clients": [],
    "database": "redis",
    "databaseConfig": {
        "redis": {
            "host": "redis",
            "port": 6379
        },
        "sqlite": {
            "databasePath": "/database/laravel-echo-server.sqlite"
        }
    },
    "devMode": true,
    "host": null,
    "port": "6001",
    "protocol": "http",
    "socketio": {},
    "secureOptions": 67108864,
    "sslCertPath": "",
    "sslKeyPath": "",
    "sslCertChainPath": "",
    "sslPassphrase": "",
    "subscribers": {
        "http": true,
        "redis": true
    },
    "apiOriginAllow": {
        "allowCors": false,
        "allowOrigin": "",
        "allowMethods": "",
        "allowHeaders": ""
    }
}

$ docker compose ps
NAME                           COMMAND                 SERVICE      STATUS   PORTS
... 
laravel-websocket-echo-server  "docker-entrypoint.s…"  echo-server  running  0.0.0.0:6001->6001/tcp

BROADCAST_DRIVER=redis  // logからredisに変更
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=redis  // syncからredisに変更、dockerコンテナ名（redis）
SESSION_DRIVER=file
SESSION_LIFETIME=120

REDIS_HOST=redis        // dockerコンテナ名（redis）
REDIS_PASSWORD=null
REDIS_PORT=6379
REDIS_CLIENT=phpredis   // appコンテナにインストールされたphpredisを使用
REDIS_PREFIX=""

App\Providers\BroadcastServiceProvider::class, // コメントアウトを外す

'redis' => [

    'client' => env('REDIS_CLIENT', 'phpredis'),

    'options' => [
        'cluster' => env('REDIS_CLUSTER', 'redis'),
        'prefix' => env('REDIS_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_database_'),
    ],

    'default' => [
        'url' => env('REDIS_URL'),
        'host' => env('REDIS_HOST', '127.0.0.1'),
        'username' => env('REDIS_USERNAME'),
        'password' => env('REDIS_PASSWORD'),
        'port' => env('REDIS_PORT', '6379'),
        'database' => env('REDIS_DB', '0'),
    ],

    'cache' => [
        'url' => env('REDIS_URL'),
        'host' => env('REDIS_HOST', '127.0.0.1'),
        'username' => env('REDIS_USERNAME'),
        'password' => env('REDIS_PASSWORD'),
        'port' => env('REDIS_PORT', '6379'),
        'database' => env('REDIS_CACHE_DB', '1'),
    ],

],

docker compose exec app bash

npm install laravel-echo

npm install socket.io-client@^2.4.0

php artisan make:event MessageEvent

<?php

namespace App\Events;

use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Broadcasting\PresenceChannel;
use Illuminate\Broadcasting\PrivateChannel;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class MessageEvent implements ShouldBroadcast // インターフェースの記述を忘れずに
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public $message;

    /**
     * Create a new event instance.
     *
     * @return void
     */
    public function __construct($message)
    {
        $this->message = $message;
    }

    /**
     * Get the channels the event should broadcast on.
     *
     * @return \Illuminate\Broadcasting\Channel|array
     */
    public function broadcastOn()
    {
        return new Channel('message-event');
    }

    public function broadcastWith()
    {
        return [
            'message' => $this->message,
        ];
    }
}

php artisan queue:work

Route::get('messages', [App\Http\Controllers\MessagesController::class, 'index'])->name('messages.index');
Route::post('messages', [App\Http\Controllers\MessagesController::class, 'store'])->name('messages.store');

php artisan make:controller MessagesController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class MessagesController extends Controller
{
    public function index()
    {
        return view('messages.index');
    }

    public function store(Request $request)
    {
        event(new \App\Events\MessageEvent($request->message));

        return redirect()->route('messages.index');
    }
}

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Docker Laravel Websocket</title>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body>
      <div>
        <form action="{{ route('messages.store') }}" method="POST" >
          @csrf
          <input type="text" name="message" value="">
          <button type="submit">送信</button>
        </form>
      </div>
    </body>
</html>

import Echo from 'laravel-echo';
import io from 'socket.io-client';
window.io = io;
window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

    </body>
    <script>
      window.addEventListener('load', (event) => {
        window.Echo.channel('message-event').listen('MessageEvent', (e) => {
          console.log(e)
        })
      });
    </script>
</html>

npm run build

php artisan queue:work