From 05417c349ab59b00b96e61e3b85107b2017799ce Mon Sep 17 00:00:00 2001
From: Vipin <vy879736@gmail.com>
Date: Wed, 10 Jun 2026 16:31:53 +0530
Subject: [PATCH] docs: clarify step 7 server delivery code snippets

Splits the final combined code block into distinct CommonJS and ES Modules tabs for better clarity. Highlights the newly added sync keyword for io.on and socket.on. Fixes #512.
---
 docs/tutorial/10-server-delivery.md | 48 +++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/docs/tutorial/10-server-delivery.md b/docs/tutorial/10-server-delivery.md
index 23764abd..f363d20a 100644
--- a/docs/tutorial/10-server-delivery.md
+++ b/docs/tutorial/10-server-delivery.md
@@ -272,10 +272,55 @@ The client will then keep track of the offset:
 
 And finally the server will send the missing messages upon (re)connection:
 
+<Tabs groupId="lang">
+  <TabItem value="cjs" label="CommonJS" default>
+
 ```js title="index.js"
 // [...]
 
+  // highlight-next-line
+  io.on('connection', async (socket) => {
+    // highlight-next-line
+    socket.on('chat message', async (msg) => {
+      let result;
+      try {
+        result = await db.run('INSERT INTO messages (content) VALUES (?)', msg);
+      } catch (e) {
+        // TODO handle the failure
+        return;
+      }
+      io.emit('chat message', msg, result.lastID);
+    });
+
+    // highlight-start
+    if (!socket.recovered) {
+      // if the connection state recovery was not successful
+      try {
+        await db.each('SELECT id, content FROM messages WHERE id > ?',
+          [socket.handshake.auth.serverOffset || 0],
+          (_err, row) => {
+            socket.emit('chat message', row.content, row.id);
+          }
+        )
+      } catch (e) {
+        // something went wrong
+      }
+    }
+    // highlight-end
+  });
+
+// [...]
+```
+
+  </TabItem>
+  <TabItem value="mjs" label="ES modules">
+
+```js title="index.js"
+// [...]
+
+// highlight-next-line
 io.on('connection', async (socket) => {
+  // highlight-next-line
   socket.on('chat message', async (msg) => {
     let result;
     try {
@@ -307,6 +352,9 @@ io.on('connection', async (socket) => {
 // [...]
 ```
 
+  </TabItem>
+</Tabs>
+
 Let's see it in action:
 
 <video controls width="100%"><source src="/videos/tutorial/server-delivery.mp4" /></video>