feat: setup yjs for collaboration in pages (#1959)

* feat: setup yjs for collaboration in pages

* refactor: add tests, simplify code

* fix: fix syntax issues

* refactor: apply pr requested changes

* refactor: fix tests

---------

Co-authored-by: kim <kim.phanhoang@epfl.ch>

Author: pyphilia

package.json

@@ -91,6 +91,7 @@
     "i18next": "24.2.3",
     "ioredis": "5.6.1",
     "jsonwebtoken": "9.0.2",
+    "lib0": "0.2.114",
     "lodash.groupby": "4.6.0",
     "lodash.partition": "4.6.0",
     "lodash.uniqby": "4.7.0",
@@ -119,7 +120,10 @@
     "url-http": "1.3.0",
     "uuid": "11.1.0",
     "ws": "8.18.1",
-    "yazl": "3.3.1"
+    "y-leveldb": "0.2.0",
+    "y-protocols": "1.0.6",
+    "yazl": "3.3.1",
+    "yjs": "13.6.27"
   },
   "devDependencies": {
     "@commitlint/cli": "19.8.0",

src/services/item/plugins/page/README.md

@@ -0,0 +1,7 @@
+# Pages
+
+## Collaboration
+
+Collaboration is handled by yjs.js
+
+The server files take their sources from this [example repository](https://github.com/yjs/y-websocket-server/).

src/services/item/plugins/page/page.controller.test.ts

@@ -1,9 +1,12 @@
 import { eq } from 'drizzle-orm';
 import { StatusCodes } from 'http-status-codes';
+import { AddressInfo } from 'net';
+import { v4 } from 'uuid';
+import { WebSocket } from 'ws';
 
 import type { FastifyInstance } from 'fastify';
 
-import { FolderItemFactory, HttpMethod } from '@graasp/sdk';
+import { FolderItemFactory, HttpMethod, PermissionLevel } from '@graasp/sdk';
 
 import build, {
   clearDatabase,
@@ -72,4 +75,56 @@ describe('Page routes tests', () => {
       });
     });
   });
+
+  describe('GET /items/pages/ws', () => {
+    it('Throws if signed out', async () => {
+      const response = await app.inject({
+        method: HttpMethod.Get,
+        url: { protocol: 'ws', pathname: `/items/pages/${v4()}/ws` },
+      });
+
+      expect(response.statusCode).toBe(StatusCodes.UNAUTHORIZED);
+    });
+
+    it('Throws if id is incorrect', async () => {
+      const response = await app.inject({
+        method: HttpMethod.Get,
+        path: {
+          protocol: 'ws',
+          pathname: '/items/pages/wrong-id/ws',
+        },
+      });
+
+      expect(response.statusCode).toBe(StatusCodes.BAD_REQUEST);
+    });
+
+    it('Allow access', async () => {
+      const {
+        actor,
+        items: [item],
+      } = await seedFromJson({
+        items: [{ memberships: [{ account: 'actor', permission: PermissionLevel.Write }] }],
+      });
+      assertIsDefined(actor);
+      mockAuthenticate(actor);
+
+      // start server to correctly listen to websockets
+      await app.listen();
+      await app.ready();
+      const port = (app.server.address() as AddressInfo)!.port;
+      const ws = new WebSocket(`http://localhost:${port}/items/pages/${item.id}/ws`);
+
+      await new Promise((done, reject) => {
+        ws.on('error', (e) => {
+          console.log(e);
+          reject(new Error('should not throw'));
+        });
+
+        ws.on('message', () => {
+          // should be able to receive messages
+          done(true);
+        });
+      });
+    });
+  });
 });

src/services/item/plugins/page/page.controller.ts

@@ -2,17 +2,22 @@ import { StatusCodes } from 'http-status-codes';
 
 import type { FastifyPluginAsyncTypebox } from '@fastify/type-provider-typebox';
 
+import { PermissionLevel } from '@graasp/sdk';
+
 import { resolveDependency } from '../../../../di/utils';
 import { db } from '../../../../drizzle/db';
 import { asDefined } from '../../../../utils/assertions';
 import { isAuthenticated, matchOne } from '../../../auth/plugins/passport';
 import { assertIsMember } from '../../../authentication';
+import { AuthorizedItemService } from '../../../authorizedItem.service';
 import { validatedMemberAccountRole } from '../../../member/strategies/validatedMemberAccountRole';
-import { createPage } from './page.schemas';
+import { createPage, pageWebsocketsSchema } from './page.schemas';
 import { PageItemService } from './page.service';
+import { setupWSConnection } from './setupWSConnection';
 
 export const pageItemPlugin: FastifyPluginAsyncTypebox = async (fastify) => {
   const pageItemService = resolveDependency(PageItemService);
+  const authorizedItemService = resolveDependency(AuthorizedItemService);
 
   fastify.post(
     '/pages',
@@ -42,4 +47,31 @@ export const pageItemPlugin: FastifyPluginAsyncTypebox = async (fastify) => {
       reply.send(item);
     },
   );
+
+  fastify.get(
+    '/pages/:id/ws',
+    {
+      websocket: true,
+      schema: pageWebsocketsSchema,
+      preHandler: [
+        isAuthenticated,
+        matchOne(validatedMemberAccountRole),
+        async ({ user, params }) => {
+          const account = asDefined(user?.account);
+
+          // check write permission
+          await authorizedItemService.assertAccessForItemId(db, {
+            permission: PermissionLevel.Write,
+            itemId: params.id,
+            accountId: account.id,
+          });
+        },
+      ],
+    },
+    async (client, req) => {
+      client.on('error', fastify.log.error);
+
+      setupWSConnection(client, req);
+    },
+  );
 };

src/services/item/plugins/page/page.schemas.ts

@@ -39,3 +39,14 @@ export const createPage = {
   ]),
   response: { [StatusCodes.CREATED]: pageSchema, '4xx': errorSchemaRef },
 } as const satisfies FastifySchema;
+
+export const pageWebsocketsSchema = {
+  operationId: 'pagesWebsockets',
+  tags: ['item', 'page', 'websockets'],
+  summary: 'Connect to websockets for a page',
+  description: 'Connect to websockets for a page and allow collaboration through yjs.',
+
+  params: customType.StrictObject({
+    id: customType.UUID(),
+  }),
+} as const satisfies FastifySchema;