mirror of
https://github.com/go-gitea/gitea.git
synced 2026-08-04 06:07:40 +00: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
+74
-17
@@ -1,16 +1,17 @@
|
||||
import {test, expect} from '@playwright/test';
|
||||
import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, timeoutFactor, randomString} from './utils.ts';
|
||||
import {loginUser, baseUrl, apiUserHeaders, apiCreateUser, apiCreateRepo, apiCreateIssue, apiStartStopwatch, apiCancelStopwatch, apiCloseIssue, randomString} from './utils.ts';
|
||||
|
||||
// These tests rely on a short EVENT_SOURCE_UPDATE_TIME in the e2e server config.
|
||||
// The /-/ws WebSocket pipeline is push-only: every event is fired by the server
|
||||
// immediately on the DB write. These tests exercise that each event type
|
||||
// (notification-count, stopwatches, logout) reaches a connected tab.
|
||||
test.describe('events', () => {
|
||||
test('notification count', async ({page, request}) => {
|
||||
test('notification count increases on new notification', async ({page, request}) => {
|
||||
const owner = `ev-notif-owner-${randomString(8)}`;
|
||||
const commenter = `ev-notif-commenter-${randomString(8)}`;
|
||||
const repoName = `ev-notif-${randomString(8)}`;
|
||||
|
||||
await Promise.all([apiCreateUser(request, owner), apiCreateUser(request, commenter)]);
|
||||
|
||||
// Create repo and login in parallel — repo is needed for the issue, login for the event stream
|
||||
await Promise.all([
|
||||
apiCreateRepo(request, {name: repoName, autoInit: false, headers: apiUserHeaders(owner)}),
|
||||
loginUser(page, owner),
|
||||
@@ -19,33 +20,90 @@ test.describe('events', () => {
|
||||
const badge = page.locator('a.not-mobile .notification_count');
|
||||
await expect(badge).toBeHidden();
|
||||
|
||||
// Create issue as another user — this generates a notification delivered via server push
|
||||
await apiCreateIssue(request, {owner, repo: repoName, title: 'events notification test', headers: apiUserHeaders(commenter)});
|
||||
await expect(page.locator('html[data-user-events-connected]')).toBeAttached();
|
||||
|
||||
// Wait for the notification badge to appear via server event
|
||||
await expect(badge).toBeVisible({timeout: 15000 * timeoutFactor});
|
||||
await apiCreateIssue(request, {owner, repo: repoName, title: 'events-notif', headers: apiUserHeaders(commenter)});
|
||||
await expect(badge).toBeVisible();
|
||||
});
|
||||
|
||||
test('stopwatch', async ({page, request}) => {
|
||||
const name = `ev-sw-${randomString(8)}`;
|
||||
test('stopwatch appears and hides via real-time push', async ({page, request}) => {
|
||||
const name = `ev-sw-push-${randomString(8)}`;
|
||||
const headers = apiUserHeaders(name);
|
||||
|
||||
await apiCreateUser(request, name);
|
||||
await Promise.all([
|
||||
loginUser(page, name),
|
||||
(async () => {
|
||||
await apiCreateRepo(request, {name, headers});
|
||||
await apiCreateIssue(request, {owner: name, repo: name, title: 'events stopwatch push test', headers});
|
||||
})(),
|
||||
]);
|
||||
// Page loads before the stopwatch starts — the icon is hidden in the rendered HTML
|
||||
await page.goto('/');
|
||||
const stopwatch = page.locator('.active-stopwatch.not-mobile');
|
||||
// Element must exist in the DOM (just hidden); otherwise the push has nothing to reveal.
|
||||
await expect(stopwatch).toHaveCount(1);
|
||||
await expect(stopwatch).toBeHidden();
|
||||
|
||||
// Login in parallel with repo+issue+stopwatch setup (all independent after user exists)
|
||||
await expect(page.locator('html[data-user-events-connected]')).toBeAttached();
|
||||
|
||||
// Drive both directions from outside this tab; each push must reach it
|
||||
await apiStartStopwatch(request, name, name, 1, {headers});
|
||||
await expect(stopwatch).toBeVisible();
|
||||
|
||||
await apiCancelStopwatch(request, name, name, 1, {headers});
|
||||
await expect(stopwatch).toBeHidden();
|
||||
});
|
||||
|
||||
// Closing an issue stops the timer away from any stopwatch route handler.
|
||||
test('stopwatch renders when already active and hides when the issue is closed', async ({page, request}) => {
|
||||
const name = `ev-sw-close-${randomString(8)}`;
|
||||
const headers = apiUserHeaders(name);
|
||||
|
||||
await apiCreateUser(request, name);
|
||||
await Promise.all([
|
||||
loginUser(page, name),
|
||||
(async () => {
|
||||
await apiCreateRepo(request, {name, autoInit: false, headers});
|
||||
await apiCreateIssue(request, {owner: name, repo: name, title: 'events stopwatch test', headers});
|
||||
await apiCreateIssue(request, {owner: name, repo: name, title: 'events stopwatch close test', headers});
|
||||
await apiStartStopwatch(request, name, name, 1, {headers});
|
||||
})(),
|
||||
]);
|
||||
await page.goto('/');
|
||||
|
||||
// Verify stopwatch is visible and links to the correct issue
|
||||
const stopwatch = page.locator('.active-stopwatch.not-mobile');
|
||||
await expect(stopwatch).toBeVisible();
|
||||
await expect(page.locator('html[data-user-events-connected]')).toBeAttached();
|
||||
|
||||
await apiCloseIssue(request, name, name, 1, {headers});
|
||||
await expect(stopwatch).toBeHidden();
|
||||
});
|
||||
|
||||
// Repro for https://github.com/go-gitea/gitea/pull/36965#issuecomment-4321282667:
|
||||
// clicking the sidebar "Start timer" button reportedly produced a blank page.
|
||||
// Drives the actual UI button (not the API) so the link-action → JSONRedirect("")
|
||||
// → fetchActionDoRedirect("") path is exercised end-to-end.
|
||||
test('sidebar start timer button starts stopwatch without blanking the page', async ({page, request}) => {
|
||||
const name = `ev-sw-ui-${randomString(8)}`;
|
||||
const headers = apiUserHeaders(name);
|
||||
|
||||
await apiCreateUser(request, name);
|
||||
await Promise.all([
|
||||
loginUser(page, name),
|
||||
(async () => {
|
||||
await apiCreateRepo(request, {name, headers});
|
||||
await apiCreateIssue(request, {owner: name, repo: name, title: 'sidebar start timer test', headers});
|
||||
})(),
|
||||
]);
|
||||
await page.goto(`/${name}/${name}/issues/1`);
|
||||
|
||||
await page.getByRole('button', {name: 'Start timer'}).click();
|
||||
|
||||
// After the click the page reloads; the sidebar should now show the Stop/Discard
|
||||
// controls and the navbar stopwatch icon should appear. If the page blanked,
|
||||
// neither of these would be present.
|
||||
await expect(page.getByRole('button', {name: 'Stop timer'})).toBeVisible();
|
||||
await expect(page.getByRole('button', {name: 'Discard timer'})).toBeVisible();
|
||||
await expect(page.locator('.active-stopwatch.not-mobile')).toBeVisible();
|
||||
});
|
||||
|
||||
test('logout propagation', async ({browser, request}) => {
|
||||
@@ -65,9 +123,8 @@ test.describe('events', () => {
|
||||
|
||||
// Verify page2 is logged in
|
||||
await expect(page2.getByRole('link', {name: 'Sign In'})).toBeHidden();
|
||||
|
||||
// Wait until the server has registered page2's event stream, otherwise the logout
|
||||
// event can race the connection and be silently dropped.
|
||||
// Wait until page2's event stream is connected, otherwise the logout event
|
||||
// can race the connection and be silently dropped.
|
||||
await expect(page2.locator('html[data-user-events-connected]')).toBeAttached();
|
||||
|
||||
// Logout from page1 — this sends a logout event to all tabs
|
||||
|
||||
@@ -67,6 +67,19 @@ export async function apiStartStopwatch(requestContext: APIRequestContext, owner
|
||||
}), 'apiStartStopwatch');
|
||||
}
|
||||
|
||||
export async function apiCancelStopwatch(requestContext: APIRequestContext, owner: string, repo: string, issueIndex: number, {headers}: {headers?: Record<string, string>} = {}) {
|
||||
await apiRetry(() => requestContext.delete(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues/${issueIndex}/stopwatch/delete`, {
|
||||
headers: headers || apiHeaders(),
|
||||
}), 'apiCancelStopwatch');
|
||||
}
|
||||
|
||||
export async function apiCloseIssue(requestContext: APIRequestContext, owner: string, repo: string, issueIndex: number, {headers}: {headers?: Record<string, string>} = {}) {
|
||||
await apiRetry(() => requestContext.patch(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues/${issueIndex}`, {
|
||||
headers: headers || apiHeaders(),
|
||||
data: {state: 'closed'},
|
||||
}), 'apiCloseIssue');
|
||||
}
|
||||
|
||||
export async function apiCreateFile(requestContext: APIRequestContext, owner: string, repo: string, filepath: string, content: string, {branch, newBranch, message}: {branch?: string; newBranch?: string; message?: string} = {}) {
|
||||
await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/contents/${filepath}`, {
|
||||
headers: apiHeaders(),
|
||||
|
||||
@@ -420,7 +420,7 @@ func testForkToEditFile(t *testing.T, session *TestSession, user, owner, repo, b
|
||||
resp := session.MakeRequest(t, req, http.StatusOK)
|
||||
htmlDoc := NewHTMLParser(t, resp.Body)
|
||||
|
||||
uploadForm := htmlDoc.doc.Find(".form-fetch-action")
|
||||
uploadForm := htmlDoc.doc.Find(".repo-file-upload.form-fetch-action")
|
||||
formAction := uploadForm.AttrOr("action", "")
|
||||
assert.Equal(t, fmt.Sprintf("/%s/%s-1/_upload/%s/%s?from_base_branch=%s&foo=bar", user, repo, branch, filePath, branch), formAction)
|
||||
uploadLink := uploadForm.Find(".dropzone").AttrOr("data-link-url", "")
|
||||
|
||||
@@ -1,84 +0,0 @@
|
||||
// Copyright 2020 The Gitea Authors. All rights reserved.
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
package integration
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"net/http"
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
activities_model "gitea.dev/models/activities"
|
||||
auth_model "gitea.dev/models/auth"
|
||||
repo_model "gitea.dev/models/repo"
|
||||
"gitea.dev/models/unittest"
|
||||
user_model "gitea.dev/models/user"
|
||||
"gitea.dev/modules/eventsource"
|
||||
api "gitea.dev/modules/structs"
|
||||
"gitea.dev/tests"
|
||||
|
||||
"github.com/stretchr/testify/assert"
|
||||
)
|
||||
|
||||
func TestEventSourceManagerRun(t *testing.T) {
|
||||
defer tests.PrepareTestEnv(t)()
|
||||
manager := eventsource.GetManager()
|
||||
|
||||
eventChan := manager.Register(2)
|
||||
defer func() {
|
||||
manager.Unregister(2, eventChan)
|
||||
// ensure the eventChan is closed
|
||||
for {
|
||||
_, ok := <-eventChan
|
||||
if !ok {
|
||||
break
|
||||
}
|
||||
}
|
||||
}()
|
||||
expectNotificationCountEvent := func(count int64) func() bool {
|
||||
return func() bool {
|
||||
select {
|
||||
case event, ok := <-eventChan:
|
||||
if !ok {
|
||||
return false
|
||||
}
|
||||
data, ok := event.Data.(activities_model.UserIDCount)
|
||||
if !ok {
|
||||
return false
|
||||
}
|
||||
return event.Name == "notification-count" && data.Count == count
|
||||
default:
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
user2 := unittest.AssertExistsAndLoadBean(t, &user_model.User{ID: 2})
|
||||
repo1 := unittest.AssertExistsAndLoadBean(t, &repo_model.Repository{ID: 1})
|
||||
thread5 := unittest.AssertExistsAndLoadBean(t, &activities_model.Notification{ID: 5})
|
||||
assert.NoError(t, thread5.LoadAttributes(t.Context()))
|
||||
session := loginUser(t, user2.Name)
|
||||
token := getTokenForLoggedInUser(t, session, auth_model.AccessTokenScopeWriteNotification, auth_model.AccessTokenScopeWriteRepository)
|
||||
|
||||
// -- mark notifications as read --
|
||||
req := NewRequest(t, "GET", "/api/v1/notifications?status-types=unread").
|
||||
AddTokenAuth(token)
|
||||
resp := session.MakeRequest(t, req, http.StatusOK)
|
||||
|
||||
apiNL := DecodeJSON(t, resp, []api.NotificationThread{})
|
||||
assert.Len(t, apiNL, 2)
|
||||
|
||||
lastReadAt := "2000-01-01T00%3A50%3A01%2B00%3A00" // 946687801 <- only Notification 4 is in this filter ...
|
||||
req = NewRequest(t, "PUT", fmt.Sprintf("/api/v1/repos/%s/%s/notifications?last_read_at=%s", user2.Name, repo1.Name, lastReadAt)).
|
||||
AddTokenAuth(token)
|
||||
session.MakeRequest(t, req, http.StatusResetContent)
|
||||
|
||||
req = NewRequest(t, "GET", "/api/v1/notifications?status-types=unread").
|
||||
AddTokenAuth(token)
|
||||
resp = session.MakeRequest(t, req, http.StatusOK)
|
||||
apiNL = DecodeJSON(t, resp, []api.NotificationThread{})
|
||||
assert.Len(t, apiNL, 1)
|
||||
|
||||
assert.Eventually(t, expectNotificationCountEvent(1), 30*time.Second, 1*time.Second)
|
||||
}
|
||||
@@ -177,8 +177,8 @@ func TestRequireSignInView(t *testing.T) {
|
||||
require.False(t, setting.Service.BlockAnonymousAccessExpensive)
|
||||
req := NewRequest(t, "GET", "/user2/repo1/src/branch/master")
|
||||
MakeRequest(t, req, http.StatusOK)
|
||||
req = NewRequest(t, "GET", "/user/events")
|
||||
MakeRequest(t, req, http.StatusOK)
|
||||
req = NewRequest(t, "GET", "/-/ws")
|
||||
MakeRequest(t, req, http.StatusUpgradeRequired)
|
||||
})
|
||||
t.Run("RequireSignInView", func(t *testing.T) {
|
||||
defer test.MockVariableValue(&setting.Service.RequireSignInViewStrict, true)()
|
||||
@@ -194,7 +194,7 @@ func TestRequireSignInView(t *testing.T) {
|
||||
|
||||
req := NewRequest(t, "GET", "/user2/repo1")
|
||||
MakeRequest(t, req, http.StatusOK)
|
||||
req = NewRequest(t, "GET", "/user/events")
|
||||
req = NewRequest(t, "GET", "/-/ws")
|
||||
MakeRequest(t, req, http.StatusSeeOther)
|
||||
|
||||
req = NewRequest(t, "GET", "/user2/repo1/src/branch/master")
|
||||
|
||||
Reference in New Issue
Block a user