mirror of
https://github.com/go-gitea/gitea.git
synced 2026-07-31 14:05:08 +02:00
feat: Replace SSE with WebSocket for UI notifications (#36965)
* Closes #36942 * Fixes #19265 Replaces the SSE-based push channel (`/user/events`) with a WebSocket endpoint (`/-/ws`). ### What changes - **New `/-/ws` endpoint** (authenticated). One WebSocket per origin, shared across tabs via a single `SharedWorker`. - **Pubsub broker** (`services/pubsub`) for fan-out by topic, behind a `Broker` interface. `MemoryBroker` is the default (single process); a Redis backend is available for multi-process setups, configured via `[websocket].PUBSUB_TYPE` / `PUBSUB_CONN_STR`. The internal Gitea queue was not usable here because it has FIFO/single-consumer semantics. - **Push-only event production.** Events are emitted by write-triggered notifiers — `NotificationCountChange`, `PublishStopwatchesForUser`, and the logout publisher — wired into the existing `notify.Notifier` interface. No server-side pollers. - **Typed pub/sub on the client.** `web_src/js/modules/worker.ts` is a singleton transport; features subscribe per event type via `onUserEvent('notification-count', cb)` instead of branching on `event.data.type`. - **Wire contract** (`UserEventType` union) is shared between the worker and consumers via `web_src/js/types.ts`, kept in sync with `services/websocket/events.go`. - **Client-side periodic polling fallback** kicks in only when the WebSocket cannot be established (e.g. proxy blocks WS, browser lacks module-SharedWorker support). ### What's removed - `modules/eventsource` (SSE manager, run loop, messenger). - `/user/events` route and `tests/integration/eventsource_test.go`. - All server-side polling for stopwatches and notification counts. ### Stopwatch multi-tab fix The navbar stopwatch icon was previously rendered conditionally on `{{if $activeStopwatch}}`, so tabs loaded before the timer started had no DOM element to update. The icon and popup are now always rendered (toggled with `tw-hidden`), and the start/stop/cancel handlers POST silently so all open tabs reflect the change in real time. ### Deployment note WebSocket needs the upgrade headers to pass through a reverse proxy, e.g. for nginx: ```nginx proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; ``` Without them the WebSocket cannot be established, and after 3 consecutive failed opens the shared worker signals `push-unavailable`: the notification count and stopwatch fall back to periodic polling on the existing `[ui.notification]` timeouts. Real-time push is lost, the features keep working. The reverse-proxy docs need the same note (see the `docs-update-needed` label). --------- Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: Epid <rexmrj@gmail.com>
This commit is contained in:
mohammad rahimi
co-authored by
silverwind
wxiaoguang
Epid
silverwind
wxiaoguang
Epid
parent
e15a7e9066
commit
13d0f24423
@@ -0,0 +1,69 @@
|
||||
import type {UserEventMessage, WorkerInboundMessage} from '../types.ts';
|
||||
|
||||
// Minimal SharedWorker/MessagePort doubles: worker.ts wires user events onto
|
||||
// `sharedWorker.port`, so we capture the port to feed it messages and assert dispatch behavior.
|
||||
type PortListener = (ev: {data: WorkerInboundMessage}) => void;
|
||||
|
||||
class MockMessagePort {
|
||||
listeners: Record<string, PortListener[]> = {};
|
||||
posted: unknown[] = [];
|
||||
addEventListener(type: string, cb: PortListener) {
|
||||
(this.listeners[type] ||= []).push(cb);
|
||||
}
|
||||
removeEventListener() {}
|
||||
postMessage(msg: unknown) { this.posted.push(msg) }
|
||||
start() {}
|
||||
close() {}
|
||||
// Simulate the underlying worker delivering a message to the page.
|
||||
deliver(msg: UserEventMessage) {
|
||||
for (const cb of this.listeners['message'] || []) cb({data: {msgType: 'user-event', msgData: msg}});
|
||||
}
|
||||
}
|
||||
|
||||
let lastWorker: MockSharedWorker;
|
||||
|
||||
class MockSharedWorker {
|
||||
port = new MockMessagePort();
|
||||
// eslint-disable-next-line unicorn/no-this-assignment
|
||||
constructor() { lastWorker = this }
|
||||
addEventListener() {}
|
||||
}
|
||||
|
||||
// worker.ts caches module-scope state (subscribers, initialized), so re-import
|
||||
// a fresh module per test after stubbing the globals it reads on init.
|
||||
async function freshWorker() {
|
||||
vi.resetModules();
|
||||
vi.stubGlobal('WebSocket', class {});
|
||||
vi.stubGlobal('SharedWorker', MockSharedWorker);
|
||||
return await import('./worker.ts');
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
// sequential: freshWorker resets the module registry and stubs globals, which is unsafe
|
||||
// to interleave with the other test under the repo's `sequence.concurrent` vitest config.
|
||||
// Every push follows a real DB write, so a repeated value still means the
|
||||
// underlying list changed (e.g. a new comment on an already-unread issue).
|
||||
test('dispatches every push, including repeated values', {concurrent: false}, async () => {
|
||||
const {onUserEvent} = await freshWorker();
|
||||
const received: number[] = [];
|
||||
onUserEvent('notification-count', (msg) => { received.push(msg.eventData.count) });
|
||||
|
||||
lastWorker.port.deliver({eventType: 'notification-count', eventData: {count: 1}});
|
||||
lastWorker.port.deliver({eventType: 'notification-count', eventData: {count: 1}});
|
||||
|
||||
expect(received).toEqual([1, 1]);
|
||||
});
|
||||
|
||||
test('worker-connected flags the page and reaches its subscribers', {concurrent: false}, async () => {
|
||||
const {onUserEvent} = await freshWorker();
|
||||
let connects = 0;
|
||||
onUserEvent('worker-connected', () => { connects++ });
|
||||
|
||||
lastWorker.port.deliver({eventType: 'worker-connected'});
|
||||
|
||||
expect(connects).toBe(1);
|
||||
expect(document.documentElement.getAttribute('data-user-events-connected')).toBe('true');
|
||||
});
|
||||
+121
-59
@@ -1,68 +1,130 @@
|
||||
import type {
|
||||
SharedWorkerControlMessage,
|
||||
UserEventMessage,
|
||||
UserEventType,
|
||||
WorkerEventMessage,
|
||||
WorkerInboundMessage,
|
||||
} from '../types.ts';
|
||||
|
||||
const {appSubUrl, sharedWorkerUri} = window.config;
|
||||
|
||||
export class UserEventsSharedWorker {
|
||||
sharedWorker: SharedWorker;
|
||||
type EventOf<T extends UserEventType> = Extract<UserEventMessage, {eventType: T}>;
|
||||
type Subscriber<T extends UserEventType = UserEventType> = (msg: EventOf<T>) => void;
|
||||
const subscribers = new Map<UserEventType, Set<Subscriber>>();
|
||||
let fallbackSignalled = false;
|
||||
let sharedWorker: SharedWorker | null = null;
|
||||
|
||||
// options can be either a string (the debug name of the worker) or an object of type WorkerOptions
|
||||
constructor(options?: string | WorkerOptions) {
|
||||
const worker = new SharedWorker(sharedWorkerUri, options);
|
||||
this.sharedWorker = worker;
|
||||
worker.addEventListener('error', (event) => {
|
||||
console.error('worker error', event);
|
||||
});
|
||||
worker.port.addEventListener('messageerror', () => {
|
||||
console.error('unable to deserialize message');
|
||||
});
|
||||
worker.port.postMessage({
|
||||
type: 'start',
|
||||
url: `${window.location.origin}${appSubUrl}/user/events`,
|
||||
});
|
||||
worker.port.addEventListener('error', (e) => {
|
||||
console.error('worker port error', e);
|
||||
});
|
||||
window.addEventListener('beforeunload', () => {
|
||||
// FIXME: this logic is not quite right.
|
||||
// "beforeunload" can be canceled by some actions like "are-you-sure" and the navigation can be cancelled.
|
||||
// In this case: the worker port is incorrectly closed while the page is still there.
|
||||
worker.port.postMessage({type: 'close'});
|
||||
worker.port.close();
|
||||
});
|
||||
function dispatch(msg: UserEventMessage) {
|
||||
if (msg.eventType === 'worker-connected') {
|
||||
document.documentElement.setAttribute('data-user-events-connected', 'true');
|
||||
}
|
||||
const set = subscribers.get(msg.eventType);
|
||||
if (!set) return;
|
||||
for (const cb of set) cb(msg);
|
||||
}
|
||||
|
||||
addMessageEventListener(listener: (event: MessageEvent) => void) {
|
||||
this.sharedWorker.port.addEventListener('message', (event: MessageEvent) => {
|
||||
if (!event.data || !event.data.type) {
|
||||
console.error('unknown worker message event', event);
|
||||
function signalFallback() {
|
||||
if (fallbackSignalled) return;
|
||||
fallbackSignalled = true;
|
||||
dispatch({eventType: 'worker-unavailable'});
|
||||
}
|
||||
|
||||
function init() {
|
||||
try {
|
||||
sharedWorker = new SharedWorker(sharedWorkerUri, {type: 'module', name: 'user-events'});
|
||||
} catch (err) {
|
||||
console.warn('SharedWorker unavailable, falling back to periodic polling', err);
|
||||
queueMicrotask(signalFallback);
|
||||
return;
|
||||
}
|
||||
// Browsers without module-SharedWorker support fail at parse time, before the WebSocket opens.
|
||||
sharedWorker.addEventListener('error', (event) => {
|
||||
console.error('worker error', event);
|
||||
signalFallback();
|
||||
});
|
||||
sharedWorker.port.addEventListener('messageerror', () => {
|
||||
console.error('unable to deserialize message');
|
||||
});
|
||||
sharedWorker.port.addEventListener('error', (e) => {
|
||||
console.error('worker port error', e);
|
||||
});
|
||||
|
||||
const postSharedWorkerControlMessage = (sw: SharedWorker, msg: SharedWorkerControlMessage) => {
|
||||
sw.port.postMessage(msg);
|
||||
};
|
||||
|
||||
const handleWorkerEvent = (msg: WorkerEventMessage) => {
|
||||
if (msg.workerEvent === 'error') {
|
||||
console.error('worker port event error', msg);
|
||||
} else if (msg.workerEvent === 'close') {
|
||||
postSharedWorkerControlMessage(sharedWorker!, {type: 'close'});
|
||||
sharedWorker!.port.close();
|
||||
} else {
|
||||
console.error('unknown worker port event', msg);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
postSharedWorkerControlMessage(sharedWorker!, {type: 'close'});
|
||||
sharedWorker!.port.close();
|
||||
// slightly delay our "logout" for a short while, in case there are other logout requests in-flight.
|
||||
// * if the logout is triggered by a page redirection (e.g.: user clicks "/user/logout")
|
||||
// * "beforeunload" event is triggered, this code path won't execute
|
||||
// * if the logout is triggered by a fetch call
|
||||
// * "beforeunload" event is not triggered until JS does the redirection.
|
||||
// * in this case, the logout fetch call already completes and has sent the "logout" message to the worker
|
||||
// * there can be a data-race between the fetch call's redirection and the "logout" message from the worker
|
||||
// * the fetch call's logout redirection should always win over the worker message, because it might have a custom location
|
||||
setTimeout(() => { window.location.assign(`${appSubUrl}/`) }, 1000);
|
||||
};
|
||||
|
||||
sharedWorker.port.addEventListener('message', (event: MessageEvent<WorkerInboundMessage>) => {
|
||||
const msg = event.data;
|
||||
if (msg?.msgType === 'worker-event') {
|
||||
handleWorkerEvent(msg.msgData);
|
||||
} else if (msg?.msgType === 'user-event') {
|
||||
if (msg.msgData?.eventType === 'logout') {
|
||||
handleLogout();
|
||||
return;
|
||||
}
|
||||
dispatch(msg.msgData);
|
||||
} else {
|
||||
console.error('unknown inbound message', msg);
|
||||
}
|
||||
});
|
||||
|
||||
if (event.data.type === 'error') {
|
||||
console.error('worker port event error', event.data);
|
||||
} else if (event.data.type === 'logout') {
|
||||
if (event.data.data !== 'here') return;
|
||||
this.sharedWorker.port.postMessage({type: 'close'});
|
||||
this.sharedWorker.port.close();
|
||||
// slightly delay our "logout" for a short while, in case there are other logout requests in-flight.
|
||||
// * if the logout is triggered by a page redirection (e.g.: user clicks "/user/logout")
|
||||
// * "beforeunload" event is triggered, this code path won't execute
|
||||
// * if the logout is triggered by a fetch call
|
||||
// * "beforeunload" event is not triggered until JS does the redirection.
|
||||
// * in this case, the logout fetch call already completes and has sent the "logout" message to the worker
|
||||
// * there can be a data-race between the fetch call's redirection and the "logout" message from the worker
|
||||
// * the fetch call's logout redirection should always win over the worker message, because it might have a custom location
|
||||
setTimeout(() => { window.location.assign(`${appSubUrl}/`) }, 1000);
|
||||
} else if (event.data.type === 'close') {
|
||||
this.sharedWorker.port.postMessage({type: 'close'});
|
||||
this.sharedWorker.port.close();
|
||||
} else if (event.data.type === 'open') {
|
||||
// e2e tests wait for this attribute to know events cannot be missed anymore
|
||||
document.documentElement.setAttribute('data-user-events-connected', 'true');
|
||||
}
|
||||
listener(event);
|
||||
});
|
||||
}
|
||||
|
||||
startPort() {
|
||||
this.sharedWorker.port.start();
|
||||
}
|
||||
sharedWorker.port.start();
|
||||
const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
|
||||
postSharedWorkerControlMessage(sharedWorker, {
|
||||
type: 'start',
|
||||
url: `${wsProtocol}//${window.location.host}${appSubUrl}/-/ws`,
|
||||
showDebugLog: !window.config.runModeIsProd,
|
||||
});
|
||||
window.addEventListener('beforeunload', () => {
|
||||
// FIXME: this logic is not quite right.
|
||||
// "beforeunload" can be canceled by some actions like "are-you-sure" and the navigation can be cancelled.
|
||||
// In this case: the worker port is incorrectly closed while the page is still there.
|
||||
postSharedWorkerControlMessage(sharedWorker!, {type: 'close'});
|
||||
sharedWorker!.port.close();
|
||||
});
|
||||
}
|
||||
|
||||
let initialized = false;
|
||||
export function onUserEvent<T extends UserEventType>(type: T, cb: Subscriber<T>): () => void {
|
||||
if (!initialized) {
|
||||
initialized = true;
|
||||
if (window.WebSocket && window.SharedWorker) {
|
||||
init();
|
||||
} else {
|
||||
queueMicrotask(signalFallback);
|
||||
}
|
||||
}
|
||||
let set = subscribers.get(type);
|
||||
if (!set) {
|
||||
set = new Set();
|
||||
subscribers.set(type, set);
|
||||
}
|
||||
const wrapped: Subscriber = (msg) => cb(msg as EventOf<T>);
|
||||
set.add(wrapped);
|
||||
return () => { set.delete(wrapped) };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user