Many adjustments

Author: bcb

README.md

@@ -28,60 +28,97 @@
 
 ## Installation
 
-### Start the container
+### 1. Start the Refresh container
 
-Bring up the refresh container (this is just
+Bring up the Refresh container (this is just
 [SSEHub](https://github.com/vgno/ssehub) with a little configuration):
 
 ```sh
 docker run --detach --name refresh --publish 8080:8080 ghcr.io/explodinglabs/refresh
 ```
 
-Port 8080 is exposed for you to `POST` to and for the browser connect to. This
-port is hard-coded in `refresh.js`. If you want to use a different port,
-download `refresh.js` and edit the port on the first line.
+Ensure the service is running with
 
-### Create a Channel
+```sh
+docker logs refresh
+```
+
+You should see:
+
+```
+Listening on 0.0.0.0:8080
+Started client router thread.
+```
+
+### 2. Create a Channel
+
+Create a channel by simply posting an event to it:
 
-Create the `changes` channel by simply post an event to it:
+```sh
+curl -X POST -d '{"id": 1, "event": "html", "data": null}' -w '%{response_code}' http://localhost:8080/refresh
+```
+
+Here we used "refresh" as the channel name, but you could use your app's name.
+
+#### Test the connection
+
+To test, start a connection like:
 
 ```sh
-curl -X POST -d '{"id": 1, "event": "html", "data": null}' http://localhost:8080/changes
+curl http://localhost:8080/refresh
+```
+
+You should see:
+
 ```
+:ok
 
-This works because SSEHub is configured with `"allowUndefinedChannels": true`.
+```
 
-### Add Refresh.js to Your Webpage
+### Add the Refresh script to your HTML
 
-Include `refresh.js` in your html (put this at the bottom, right before
-`</body>`):
+Include the `refresh.js` script in your page (put this at the bottom, right
+before `</body>`):
 
 ```html
 <script
   type="text/javascript"
-  data-events-uri=":8080/changes"
+  data-events-uri=":8080/refresh"
   src="https://explodinglabs.github.io/refresh/refresh.js"
   async
 ></script>
 ```
 
+`data-events-uri` is the location of the event source (the refresh container).
+If the protocol and host are omitted, `refresh.js` will use the ones in
+`window.location` (the current url in the browser window).
+
+Another option is to set the events uri to a path like `/refresh` and then
+reverse proxy that, usually to `http://localhost:8080/refresh`.
+
+Load your web page. The javascript console should show:
+
+```
+eventSource open
+```
+
 ## Usage
 
-Send a "html" or "js" event to refresh the entire page:
+To refresh the entire page, send a `html` or `js` event:
 
 ```sh
-curl -X POST -d '{"id": 1, "event": "html", "data": null}' http://localhost:8080/changes
+curl -X POST -d '{"id": 1, "event": "html", "data": null}' http://localhost:8080/refresh
 ```
 
-Send a "css" event to just update the styles:
+To update just the styles, send a `css` event:
 
 ```sh
-curl -X POST -d '{"id": 1, "event": "css", "data": null}' http://localhost:8080/changes
+curl -X POST -d '{"id": 1, "event": "css", "data": null}' http://localhost:8080/refresh
 ```
 
 ### Vim Usage
 
-Here's how I send a curl request when a file is saved in vim.
+Here's how I refresh the browser when a file is saved in vim.
 
 Add to `~/.vimrc` (Vim 9+ only):
 
@@ -90,9 +127,9 @@ def g:CbJobFailed(channel: channel, msg: string)
   echow msg
 enddef
 
-autocmd BufWritePost *.html
+autocmd BufWritePost *.html,*.js
   call job_start(
-    ['curl', '--fail', '--silent', '--show-error', '-X', 'POST', '--data', '{"id": 1, "event": "html", "data": null}', 'http://localhost:8080/changes'],
+    ['curl', '--fail', '--silent', '--show-error', '-X', 'POST', '--data', '{"id": 1, "event": "html", "data": null}', 'http://localhost:8080/refresh'],
     {
       'exit_cb': function('g:CbRefreshBrowser'),
       'err_cb': function('g:CbJobFailed')
@@ -101,29 +138,10 @@ autocmd BufWritePost *.html
 
 autocmd BufWritePost *.css
   call job_start(
-    ['curl', '--fail', '--silent', '--show-error', '-X', 'POST', '--data', '{"id": 1, "event": "css", "data": null}', 'http://localhost:8080/changes'],
+    ['curl', '--fail', '--silent', '--show-error', '-X', 'POST', '--data', '{"id": 1, "event": "css", "data": null}', 'http://localhost:8080/refresh'],
     {
       'exit_cb': function('g:CbRefreshBrowser'),
       'err_cb': function('g:CbJobFailed')
     }
   )
 ```
-
-## Troubleshooting
-
-To debug connecting, start a connection from the command-line:
-
-```sh
-curl http://localhost/changes
-```
-
-### 404 Channel does not exist
-
-An SSE channel needs to be created before connecting, otherwise you get
-"Channel does not exist". Channels are created when the first event is
-published to it. See [Create a Channel](#create_a_channel).
-
-### 403 Forbidden
-
-This can mean you've published to a domain that's not listed in
-`restrictPublish` in `ssehub.json`.

refresh.js

@@ -1,4 +1,9 @@
-var changesEventSource = new EventSource("http://localhost:8080/changes");
+let uri = scriptTag?.dataset.uri || "";
+if (uri.startsWith(":")) {
+  uri = `${window.location.protocol}//${window.location.hostname}${uri}`;
+}
+
+const eventSource = new EventSource(uri);
 
 function isExternal(url) {
   var match = url.match(
@@ -36,22 +41,22 @@ function refreshCss() {
   }
 }
 
-changesEventSource.onopen = (event) => {
-  console.log("changesEventSource open");
+eventSource.onopen = (event) => {
+  console.log("eventSource open");
 };
 
-changesEventSource.onerror = (event) => {
-  console.log("changesEventSource error");
+eventSource.onerror = (event) => {
+  console.log("eventSource error");
 };
 
-changesEventSource.addEventListener("html", (event) => {
+eventSource.addEventListener("html", (event) => {
   document.location.reload();
 });
 
-changesEventSource.addEventListener("js", (event) => {
+eventSource.addEventListener("js", (event) => {
   document.location.reload();
 });
 
-changesEventSource.addEventListener("css", (event) => {
+eventSource.addEventListener("css", (event) => {
   refreshCss();
 });

ssehub.json

@@ -4,22 +4,12 @@
     "port": 8080,
     "bind-ip": "0.0.0.0",
     "logdir": "./",
-    "pingInterval": 5,
+    "pingInterval": 15,
     "pingEvent": false,
     "threadsPerChannel": 2,
     "allowUndefinedChannels": true
   },
-  "amqp": {
-    "enabled": false,
-    "host": "rabbitmq",
-    "port": 5672,
-    "user": "guest",
-    "password": "guest",
-    "exchange": "amq.fanout"
-  },
   "default": {
-    "cacheAdapter": "leveldb",
-    "cacheLength": 500,
     "allowedOrigins": "*"
   }
 }