Cleanup

app/(main)/blog/posts/building-figma-multiplayer-cursors/content.mdx

@@ -56,6 +56,14 @@ application include:
 - [Vite](https://vitejs.dev) for bundling
 - [Bun](https://bun.sh) as the server
 
+In addition to these frameworks and tools, I'm using several packages which
+you can install using your npm or your favorite package manager.
+
+```bash
+npm install @faker-js/faker clsx color-hash
+npm install -D @types/bun @types/color-hash
+```
+
 Starting at the root of the application, there are two primary components
 we need to build: `Cursors` and `Tracker`. The `Cursors` component will be
 responsible for showing the cursors of **other** users that are connected
@@ -137,13 +145,13 @@ useEffect(() => {
   }
 
   window.addEventListener("mousemove", handleMove)
-  window.addEventListener("touchmove", handleTouch)
+  window.addEventListener("touchmove", handleMove)
 
   return () => {
     window.removeEventListener("mousemove", handleMove)
-    window.removeEventListener("touchmove", handleTouch)
+    window.removeEventListener("touchmove", handleMove)
   }
-}, [socket])
+}, [])
 ```
 
 ### Displaying cursors
@@ -177,7 +185,7 @@ The `Cursor` component also uses
 later when updating cursor position from incoming WebSocket messages.
 
 ```tsx showLineNumbers ./Cursor.tsx [9-41]
-interface ClientConnection extends ServerConnection {
+export interface ClientConnection extends ServerConnection {
   ref: React.RefObject<HTMLDivElement>
 }
 
@@ -188,7 +196,7 @@ interface CursorProps {
 export const Cursor = forwardRef<HTMLDivElement, CursorProps>(
   function Cursor({ connection }, ref) {
     const hash = new ColorHash({ lightness: 0.3 })
-    const color = hash(connection.user.name)
+    const color = hash.hex(connection.username)
 
     return (
       <div
@@ -212,7 +220,7 @@ export const Cursor = forwardRef<HTMLDivElement, CursorProps>(
           className="relative -left-1.5 top-4 rounded-sm px-1.5 py-0.5 text-white"
           style={{ backgroundColor: color }}
         >
-          {connection.user.name}
+          {connection.username}
         </span>
       </div>
     )
@@ -401,7 +409,7 @@ this, we'll modify the `websocket.open()` method:
 ```ts showLineNumbers ./server.ts
 const GROUP_ID = "cursors"
 
-Bun.serve({
+const server = Bun.serve({
   // ...
   websocket: {
     open(ws) {
@@ -426,7 +434,7 @@ longer connected. We can use the `websocket.close()` method to handle these
 scenarios:
 
 ```ts showLineNumbers ./server.ts
-Bun.serve({
+const server = Bun.serve({
   // ...
   websocket: {
     close(ws) {
@@ -464,10 +472,14 @@ notify other users when a user is moving their cursor. We can do this
 inside of the `websocket.message()` method:
 
 ```ts showLineNumbers ./server.ts
-Bun.serve({
+const server = Bun.serve({
   // ...
   websocket: {
-    message(ws, message) {
+    message(ws, raw) {
+      const message = JSON.parse(
+        typeof raw === "string" ? raw : new TextDecoder().decode(raw),
+      )
+
       switch (message.type) {
         case "move": {
           // Ignore users we don't recognize
@@ -591,7 +603,10 @@ export function send(message: Record<string, unknown>) {
 
 export function subscribe(callback: Subscriber) {
   subscribers.add(callback)
-  return () => subscribers.delete(callback)
+
+  return () => {
+    subscribers.delete(callback)
+  }
 }
 ```
 
@@ -712,7 +727,7 @@ receive the list of open connections from the server.
 
 ```ts ./socket.ts
 socket.addEventListener("open", () => {
-  socket.send(JSON.stringify({ type: "info" }))
+  socket?.send(JSON.stringify({ type: "info" }))
 })
 ```