[Workers] Add tutorial: Live cursors & RPC with Next.js and Durable Objects #18008

exectx · 2024-11-06T01:13:06Z

Summary

Hi, here's the tutorial for the Cloudflare Developer Spotlight program. It's covers using Next.js Workers with Durable Objects and Workers RPC to visualize connected users cursors via WebSockets. I've also shortened the original title a bit

Documentation checklist

The documentation style guide has been adhered to.

hyperlint-ai

1 files reviewed, 17 total issue(s) found.

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

hyperlint-ai

1 files reviewed, 12 total issue(s) found.

Note: We resolved prior Hyperlint review comments because:

We updated our inline suggestion AI.

We do this to avoid keeping outdated or irrelevant comments around. We'll leave a new review with current comments below.

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

ToriLindsay

Fixing typos and grammar

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

…c-do/index.mdx

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

…c-do/index.mdx

…c-do/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>

harshil1712

Hey @exectx, this is a great tutorial! I have left a few comments. Will it be possible to simplify the Cursor component? Not a huge issue, but if it can be simplified, it will help the reader follow more easily. Rest looks good! I am excited to see this go live

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

harshil1712 · 2024-11-26T09:20:00Z

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

+	tag = "v1"
+	new_classes = ["CursorSessions"]
+	```
+2. Initialize the Durable Object class in your `worker/src/index.ts` file:


We should add a few lines here explaining the intention of the code below

harshil1712 · 2024-11-26T09:26:27Z

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

+	- The main `fetch` handler routes requests with a `/ws` URL to the `CursorSessions` Durable Object where a WebSocket connection is established.
+	- The `CursorSessions` class manages WebSocket connections, session states, and broadcasts messages to other connected clients.
+		- When a new WebSocket connection is established, the Durable Object broadcasts a `join` message to all connected clients; similarly, a `quit` message is broadcast when a client disconnects.
+		- It tracks each WebSocket client's last cursor position under the `move` message, which is broadcasted to all active clients.
+		- When a `get-cursors` message is received, it sends the number of currently active clients to the specific client that requested it.
+


We should modify the sentences here. It sounds like we have already implemented this in the code. Either move it after the code block, or reword it to let the user know this is what the below code block implements

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

harshil1712 · 2024-11-26T10:36:33Z

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

+	Build the app:
+	<PackageManagers type="run" pkg="build:worker" frame="none" />
+
+	Now, you can run Next.js development server:
+	<PackageManagers type="run" pkg="dev" frame="none" />


I get an error in the console. I build the worker app and started the Next.js server. Do I need to run the worker as well?

We should encourage the user to open the app in the browser and test it out

Did the build fail? I got eslint warnings, mainly caused by the code that highlights incoming/outgoing ws messages, which isn't directly relevant to the main content of the tutorial.

Yes, the durable object worker needs to be running. I'm adding a note

hyperlint-ai

1 files reviewed, 13 total issue(s) found.

Note: We resolved prior Hyperlint review comments because:

We updated our inline suggestion AI.

We do this to avoid keeping outdated or irrelevant comments around. We'll leave a new review with current comments below.

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

hyperlint-ai

1 files reviewed, 13 total issue(s) found.

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

bllchmbrs · 2024-11-27T19:00:44Z

@exectx , I would recommend adding the label hyperlint-ignore to this PR. The indentation isn't something we support well today and this is just too chatty to be useful (IMO). Up to you, but that might help remove some of the extraneous suggestions while we look at how best to support the indentation.

exectx · 2024-11-27T19:48:34Z

@bllchmbrs, thank you for the information but I don't have the necessary permissions for that. Perhaps @harshil1712 or @ToriLindsay could?

- Ensured WebSocket ID remains accessible by closing connections after broadcasting. - Cleaned up `cursor.tsx` by moving the main functions to the top. - Simplified component logic for easier understanding and maintenance.

harshil1712

Hey @exectx,
Thank you for making the changes. We are at the finish line! I have left two more comments. Once we have resolved them, we should be good to go 🚀

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

harshil1712

Thank you for making the changes!

db-cloudflare · 2024-12-02T16:48:03Z

Amazing work. @exectx Once your author details are confirmed by email and have been updated on this PR then this should be ready to merge!

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx

…c-do/index.mdx Add author details

holopin-bot · 2024-12-03T13:12:27Z

Congratulations @exectx, the maintainer of this repository has issued you a holobyte! Here it is: https://holopin.io/holobyte/cm48hb98o100910cl72yrc2m0a

This badge can only be claimed by you, so make sure that your GitHub account is linked to your Holopin account. You can manage those preferences here: https://holopin.io/account.
Or if you're new to Holopin, you can simply sign up with GitHub, which will do the trick!

…bjects (#18008) * add new nextjs durable objects rpc tutorial * fix: hyperlint-ai suggestions * fix: address reviewer comments * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> * fix: address reviewer comments * fix: use `getWebSockets` method * fix: durable object bug and simplify client-side code - Ensured WebSocket ID remains accessible by closing connections after broadcasting. - Cleaned up `cursor.tsx` by moving the main functions to the top. - Simplified component logic for easier understanding and maintenance. * Explicitly mention to use host, add optional RPC step * Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Add author details --------- Co-authored-by: ToriLindsay <[email protected]> Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com> Co-authored-by: db-cloudflare <[email protected]>

add new nextjs durable objects rpc tutorial

9ae0002

exectx requested review from a team, GregBrimble, ToriLindsay, WalshyDev, irvinebroque and mikenomitch as code owners November 6, 2024 01:13

hyperlint-ai bot reviewed Nov 6, 2024

View reviewed changes

fix: hyperlint-ai suggestions

a821c5d

github-actions bot assigned GregBrimble, irvinebroque, ToriLindsay, WalshyDev and mikenomitch Nov 6, 2024

github-actions bot added size/l product:workers Related to Workers product labels Nov 6, 2024

db-cloudflare added DevRel Tasks that need support from developer relations. developer-spotlight labels Nov 6, 2024

bllchmbrs reviewed Nov 6, 2024

View reviewed changes

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

db-cloudflare reviewed Nov 7, 2024

View reviewed changes

fix: address reviewer comments

b34c168

hyperlint-ai bot reviewed Nov 7, 2024

View reviewed changes

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

harshil1712 self-assigned this Nov 14, 2024

ToriLindsay approved these changes Nov 25, 2024

View reviewed changes

ToriLindsay added 3 commits November 25, 2024 11:32

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

bf9b497

…c-do/index.mdx

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

7164a21

…c-do/index.mdx

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

52a5847

…c-do/index.mdx

hyperlint-ai bot reviewed Nov 25, 2024

View reviewed changes

ToriLindsay and others added 2 commits November 25, 2024 11:33

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

d0e78bf

…c-do/index.mdx

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

32814f5

…c-do/index.mdx Co-authored-by: hyperlint-ai[bot] <154288675+hyperlint-ai[bot]@users.noreply.github.com>

harshil1712 requested changes Nov 26, 2024

View reviewed changes

fix: address reviewer comments

b3013cd

hyperlint-ai bot reviewed Nov 27, 2024

View reviewed changes

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

fix: use getWebSockets method

7f975ef

hyperlint-ai bot reviewed Nov 27, 2024

View reviewed changes

pedrosousa added the hyperlint-ignore label Nov 28, 2024

fix: durable object bug and simplify client-side code

e91bd9f

- Ensured WebSocket ID remains accessible by closing connections after broadcasting. - Cleaned up `cursor.tsx` by moving the main functions to the top. - Simplified component logic for easier understanding and maintenance.

harshil1712 requested changes Nov 29, 2024

View reviewed changes

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

Explicitly mention to use host, add optional RPC step

fab0bc6

harshil1712 approved these changes Dec 2, 2024

View reviewed changes

db-cloudflare reviewed Dec 3, 2024

View reviewed changes

src/content/docs/workers/tutorials/live-cursors-with-nextjs-rpc-do/index.mdx Show resolved Hide resolved

Update src/content/docs/workers/tutorials/live-cursors-with-nextjs-rp…

a820dc0

…c-do/index.mdx Add author details

db-cloudflare enabled auto-merge (squash) December 3, 2024 13:01

db-cloudflare merged commit 0feed50 into cloudflare:production Dec 3, 2024
4 checks passed

workers-devprod added the contribution [Holopin] Recognizes a docs contribution, big or small label Dec 3, 2024

[Workers] Add tutorial: Live cursors & RPC with Next.js and Durable Objects #18008

[Workers] Add tutorial: Live cursors & RPC with Next.js and Durable Objects #18008

Uh oh!

Conversation

exectx commented Nov 6, 2024

Summary

Documentation checklist

Uh oh!

hyperlint-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hyperlint-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ToriLindsay left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harshil1712 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harshil1712 Nov 26, 2024

Choose a reason for hiding this comment

Uh oh!

harshil1712 Nov 26, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harshil1712 Nov 26, 2024

Choose a reason for hiding this comment

Uh oh!

exectx Nov 27, 2024

Choose a reason for hiding this comment

Uh oh!

hyperlint-ai bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hyperlint-ai bot left a comment •

edited

Loading

hyperlint-ai bot left a comment •

edited

Loading

bllchmbrs commented Nov 27, 2024 •

edited by pedrosousa

Loading