mirror of
https://github.com/php/frankenphp.git
synced 2026-03-24 00:52:11 +01:00
225ca409d3
This patch brings hot reloading capabilities to PHP apps: in development, the browser will automatically refresh the page when any source file changes! It's similar to HMR in JavaScript. It is built on top of [the watcher mechanism](https://frankenphp.dev/docs/config/#watching-for-file-changes) and of the [Mercure](https://frankenphp.dev/docs/mercure/) integration. Each time a watched file is modified, a Mercure update is sent, giving the ability to the client to reload the page, or part of the page (assets, images...). Here is an example implementation: ```caddyfile root ./public mercure { subscriber_jwt {env.MERCURE_SUBSCRIBER_JWT_KEY} anonymous } php_server { hot_reload } ``` ```php <?php header('Content-Type: text/html'); ?> <!DOCTYPE html> <html lang="en"> <head> <title>Test</title> <script> const es = new EventSource('<?=$_SERVER['FRANKENPHP_HOT_RELOAD']?>'); es.onmessage = () => location.reload(); </script> </head> <body> Hello ``` I plan to create a helper JS library to handle more advanced cases (reloading CSS, JS, etc), similar to [HotWire Spark](https://github.com/hotwired/spark). Be sure to attend my SymfonyCon to learn more! There is still room for improvement: - Provide an option to only trigger the update without reloading the worker for some files (ex, images, JS, CSS...) - Support classic mode (currently, only the worker mode is supported) - Don't reload all workers when only the files used by one change However, this PR is working as-is and can be merged as a first step. This patch heavily refactors the watcher module. Maybe it will be possible to extract it as a standalone library at some point (would be useful to add a similar feature but not tight to PHP as a Caddy module). --------- Signed-off-by: Kévin Dunglas <kevin@dunglas.fr> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
89 lines
1.6 KiB
Go
89 lines
1.6 KiB
Go
//go:build !nowatcher && !nomercure
|
|
|
|
package caddy_test
|
|
|
|
import (
|
|
"context"
|
|
"net/http"
|
|
"net/url"
|
|
"os"
|
|
"path/filepath"
|
|
"strings"
|
|
"sync"
|
|
"testing"
|
|
|
|
"github.com/caddyserver/caddy/v2/caddytest"
|
|
"github.com/stretchr/testify/require"
|
|
)
|
|
|
|
func TestHotReload(t *testing.T) {
|
|
const topic = "https://frankenphp.dev/hot-reload/test"
|
|
|
|
u := "/.well-known/mercure?topic=" + url.QueryEscape(topic)
|
|
|
|
tmpDir := t.TempDir()
|
|
indexFile := filepath.Join(tmpDir, "index.php")
|
|
|
|
tester := caddytest.NewTester(t)
|
|
tester.InitServer(`
|
|
{
|
|
debug
|
|
skip_install_trust
|
|
admin localhost:2999
|
|
}
|
|
|
|
http://localhost:`+testPort+` {
|
|
mercure {
|
|
transport local
|
|
subscriber_jwt TestKey
|
|
anonymous
|
|
}
|
|
|
|
php_server {
|
|
root `+tmpDir+`
|
|
hot_reload {
|
|
topic `+topic+`
|
|
watch `+tmpDir+`/*.php
|
|
}
|
|
}
|
|
`, "caddyfile")
|
|
|
|
var connected, received sync.WaitGroup
|
|
|
|
connected.Add(1)
|
|
received.Go(func() {
|
|
cx, cancel := context.WithCancel(t.Context())
|
|
req, _ := http.NewRequest(http.MethodGet, "http://localhost:"+testPort+u, nil)
|
|
req = req.WithContext(cx)
|
|
resp := tester.AssertResponseCode(req, http.StatusOK)
|
|
|
|
connected.Done()
|
|
|
|
var receivedBody strings.Builder
|
|
|
|
buf := make([]byte, 1024)
|
|
for {
|
|
_, err := resp.Body.Read(buf)
|
|
require.NoError(t, err)
|
|
|
|
receivedBody.Write(buf)
|
|
|
|
if strings.Contains(receivedBody.String(), "index.php") {
|
|
cancel()
|
|
|
|
break
|
|
}
|
|
}
|
|
|
|
require.NoError(t, resp.Body.Close())
|
|
})
|
|
|
|
connected.Wait()
|
|
|
|
require.NoError(t, os.WriteFile(indexFile, []byte("<?=$_SERVER['FRANKENPHP_HOT_RELOAD'];"), 0644))
|
|
|
|
received.Wait()
|
|
|
|
tester.AssertGetResponse("http://localhost:"+testPort+"/index.php", http.StatusOK, u)
|
|
}
|