cat/Kanban
Private
Public Access
1
0
Fork 0
Code Activity

Phase 5: Real-time updates via Socket.IO

Browse Source 
Wire Socket.IO broadcast from all write API routes so board changes
propagate instantly to other connected clients. Add session-based auth
on socket connections, in-memory presence tracking, and a presence UI
in the board header showing who else is viewing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Catherine Renelle
2026-02-26 00:03:13 -05:00
parent 095d9756a8
commit e61c549ddb
23 changed files with 408 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/api/boards/[boardId]/+server.ts
+8 -1
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { boardSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireBoardView, requireBoardEditor, requireBoardOwner } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Get single board with all columns and cards
export const GET: RequestHandler = async ({ params, locals }) => {
@@ -36,11 +37,14 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'board:updated', { board: updated, socketId });
return json({ board: updated });
};
// Delete board
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -49,5 +53,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.board.delete({ where: { id: params.boardId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'board:deleted', { boardId: params.boardId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/+server.ts
+4
View File
@@ -4,6 +4,7 @@ import { columnSchema } from '$lib/server/validation.js';
import { generatePosition } from '$lib/utils/fractional-index.js';
import { withTenant } from '$lib/server/rls.js';
import { requireBoardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Create column
export const POST: RequestHandler = async ({ params, request, locals }) => {
@@ -39,5 +40,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'column:created', { column, socketId });
return json({ column }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/+server.ts
+8 -1
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { columnSchema, moveColumnSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireColumnEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Update column title or position
export const PATCH: RequestHandler = async ({ params, request, locals }) => {
@@ -37,11 +38,14 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'column:updated', { column: updated, socketId });
return json({ column: updated });
};
// Delete column
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -50,5 +54,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.column.delete({ where: { id: params.columnId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'column:deleted', { columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/+server.ts
+4
View File
@@ -4,6 +4,7 @@ import { cardSchema } from '$lib/server/validation.js';
import { generatePosition } from '$lib/utils/fractional-index.js';
import { withTenant } from '$lib/server/rls.js';
import { requireColumnEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Create card in column
export const POST: RequestHandler = async ({ params, request, locals }) => {
@@ -44,5 +45,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:created', { card, columnId: params.columnId, socketId });
return json({ card }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/+server.ts
+8 -1
View File
@@ -4,6 +4,7 @@ import { cardSchema, moveCardSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireBoardView, requireCardEditor } from '$lib/server/guards.js';
import { canViewBoard } from '$lib/server/permissions.js';
import { broadcast } from '$lib/server/realtime.js';
// Get single card with full details
export const GET: RequestHandler = async ({ params, locals }) => {
@@ -110,11 +111,14 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { card: updated, cardId: params.cardId, columnId: params.columnId, socketId });
return json({ card: updated });
};
// Delete card
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -123,5 +127,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.card.delete({ where: { id: params.cardId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:deleted', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/assignees/+server.ts
+7
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { cardAssigneeSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const POST: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -27,6 +28,9 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ assignee }, { status: 201 });
};
@@ -49,5 +53,8 @@ export const DELETE: RequestHandler = async ({ params, request, locals }) => {
await tx.cardAssignee.delete({ where: { id: assignee.id } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/attachments/+server.ts
+4
View File
@@ -5,6 +5,7 @@ import { requireCardEditor } from '$lib/server/guards.js';
import { writeFile, mkdir } from 'fs/promises';
import { join } from 'path';
import { randomUUID } from 'crypto';
import { broadcast } from '$lib/server/realtime.js';
const MAX_SIZE = 10 * 1024 * 1024; // 10MB
const UPLOAD_ROOT = '/app/uploads';
@@ -42,5 +43,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ attachment }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/checklists/+server.ts
+4
View File
@@ -4,6 +4,7 @@ import { checklistSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { generatePosition } from '$lib/utils/fractional-index.js';
import { broadcast } from '$lib/server/realtime.js';
export const POST: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -33,5 +34,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ checklist }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/checklists/[checklistId]/+server.ts
+8 -1
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { checklistSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const PATCH: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -27,10 +28,13 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ checklist });
};
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -45,5 +49,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.checklist.delete({ where: { id: params.checklistId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/checklists/[checklistId]/items/+server.ts
+4
View File
@@ -4,6 +4,7 @@ import { checklistItemSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { generatePosition } from '$lib/utils/fractional-index.js';
import { broadcast } from '$lib/server/realtime.js';
export const POST: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -37,5 +38,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ item }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/checklists/[checklistId]/items/[itemId]/+server.ts
+8 -1
View File
@@ -2,6 +2,7 @@ import { json, error } from '@sveltejs/kit';
import type { RequestHandler } from './$types.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const PATCH: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -31,10 +32,13 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ item });
};
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -52,5 +56,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.checklistItem.delete({ where: { id: params.itemId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/comments/+server.ts
+4
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { commentSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const POST: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -27,5 +28,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ comment }, { status: 201 });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/comments/[commentId]/+server.ts
+8 -1
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { commentSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor, requireAuth } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const PATCH: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -33,10 +34,13 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ comment });
};
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -60,5 +64,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.comment.delete({ where: { id: params.commentId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/columns/[columnId]/cards/[cardId]/labels/+server.ts
+7
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { cardLabelSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireCardEditor } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
export const POST: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
@@ -26,6 +27,9 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ label }, { status: 201 });
};
@@ -48,5 +52,8 @@ export const DELETE: RequestHandler = async ({ params, request, locals }) => {
await tx.cardLabel.delete({ where: { id: label.id } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'card:updated', { cardId: params.cardId, columnId: params.columnId, socketId });
return json({ ok: true });
};
src/routes/api/boards/[boardId]/members/+server.ts
+4
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { addMemberSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireBoardMemberManager } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Add member by email
export const POST: RequestHandler = async ({ params, request, locals }) => {
@@ -44,5 +45,8 @@ export const POST: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'member:added', { member, socketId });
return json({ member }, { status: 201 });
};
src/routes/api/boards/[boardId]/members/[memberId]/+server.ts
+8 -1
View File
@@ -3,6 +3,7 @@ import type { RequestHandler } from './$types.js';
import { changeMemberRoleSchema } from '$lib/server/validation.js';
import { withTenant } from '$lib/server/rls.js';
import { requireBoardMemberManager } from '$lib/server/guards.js';
import { broadcast } from '$lib/server/realtime.js';
// Change member role
export const PATCH: RequestHandler = async ({ params, request, locals }) => {
@@ -40,11 +41,14 @@ export const PATCH: RequestHandler = async ({ params, request, locals }) => {
});
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'member:updated', { member: updated, socketId });
return json({ member: updated });
};
// Remove member
export const DELETE: RequestHandler = async ({ params, locals }) => {
export const DELETE: RequestHandler = async ({ params, request, locals }) => {
const tenant = locals.tenant;
if (!tenant) throw error(400, 'Unknown tenant');
@@ -67,5 +71,8 @@ export const DELETE: RequestHandler = async ({ params, locals }) => {
await tx.boardMember.delete({ where: { id: params.memberId } });
});
const socketId = request.headers.get('X-Socket-ID');
broadcast(params.boardId, 'member:removed', { memberId: params.memberId, socketId });
return json({ ok: true });
};