docs: properly resolve relative file in the tutorial

Related:

- #420
- socketio/chat-example#82

References:

- https://nodejs.org/api/url.html#url_url_fileurltopath_url
- https://nodejs.org/api/esm.html#importmetaurl

docs/tutorial/03-serving-html.md

@@ -43,13 +43,19 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+// highlight-start
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+// highlight-end
 
 const app = express();
 const server = createServer(app);
 
 // highlight-start
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 // highlight-end
 

docs/tutorial/04-integrating-socket-io.md

@@ -60,6 +60,8 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 // highlight-start
 import { Server } from 'socket.io';
 // highlight-end
@@ -70,8 +72,10 @@ const server = createServer(app);
 const io = new Server(server);
 // highlight-end
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 
 // highlight-start

docs/tutorial/10-server-delivery.md

@@ -124,6 +124,8 @@ main();
 ```js title="index.js"
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import { Server } from 'socket.io';
 // highlight-start
 import sqlite3 from 'sqlite3';
@@ -151,8 +153,10 @@ const io = new Server(server, {
   connectionStateRecovery: {}
 });
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 
 io.on('connection', (socket) => {

docs/tutorial/13-ending-notes.md

@@ -107,6 +107,8 @@ main();
 ```js title="index.js"
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import { Server } from 'socket.io';
 import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
@@ -144,8 +146,10 @@ if (cluster.isPrimary) {
     adapter: createAdapter()
   });
 
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   app.get('/', (req, res) => {
-    res.sendFile(new URL('./index.html', import.meta.url).pathname);
+    res.sendFile(join(__dirname, 'index.html'));
   });
 
   io.on('connection', async (socket) => {

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/03-serving-html.md

@@ -43,13 +43,19 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+// highlight-start
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+// highlight-end
 
 const app = express();
 const server = createServer(app);
 
 // highlight-start
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 // highlight-end
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/04-integrating-socket-io.md

@@ -60,6 +60,8 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 // highlight-start
 import { Server } from 'socket.io';
 // highlight-end
@@ -70,8 +72,10 @@ const server = createServer(app);
 const io = new Server(server);
 // highlight-end
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 
 // highlight-start

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/05-emitting-events.md

@@ -70,7 +70,7 @@ io.on('connection', (socket) => {
 
 The result should be like the following video:
 
-<video width="100%"><source src="https://i.cloudup.com/transcoded/zboNrGSsai.mp4" /></video>
+<video controls width="100%"><source src="https://i.cloudup.com/transcoded/zboNrGSsai.mp4" /></video>
 
 :::info
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/06-broadcasting.md

@@ -109,7 +109,7 @@ And on the client side when we capture a `chat message` event we’ll include it
 
 Let's see it in action:
 
-<video autoplay="" loop="" width="100%"><source src="https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4" /></video>
+<video controls autoplay="" loop="" width="100%"><source src="https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4" /></video>
 
 :::info
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/07-api-overview.md

@@ -283,6 +283,15 @@ socket.onAny((eventName, ...args) => {
 });
 ```
 
+Similarly, for outgoing packets:
+
+```js
+socket.onAnyOutgoing((eventName, ...args) => {
+  console.log(eventName); // 'hello'
+  console.log(args); // [ 1, '2', { 3: '4', 5: ArrayBuffer (1) [ 6 ] } ]
+});
+```
+
 ## Server API {#server-api}
 
 ### Broadcasting {#broadcasting}

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/09-connection-state-recovery.md

@@ -28,9 +28,80 @@ const io = new Server(server, {
 
 Let's see it in action:
 
-<video width="100%"><source src="/videos/tutorial/connection-state-recovery.mp4" /></video>
+<video controls width="100%"><source src="/videos/tutorial/connection-state-recovery.mp4" /></video>
 
-In the video above, the "realtime" message is delivered when the connection is reestablished (the "Disconnect" button was added for demonstration purposes).
+As you can see in the video above, the "realtime" message is eventually delivered when the connection is reestablished.
+
+:::note
+
+The "Disconnect" button was added for demonstration purposes.
+
+<details className="changelog">
+    <summary>Code</summary>
+
+<Tabs groupId="syntax">
+  <TabItem value="es6" label="ES6" default>
+
+```html
+<form id="form" action="">
+  <input id="input" autocomplete="off" /><button>Send</button>
+  // highlight-start
+  <button id="toggle-btn">Disconnect</button>
+  // highlight-end
+</form>
+
+<script>
+  // highlight-start
+  const toggleButton = document.getElementById('toggle-btn');
+
+  toggleButton.addEventListener('click', (e) => {
+    e.preventDefault();
+    if (socket.connected) {
+      toggleButton.innerText = 'Connect';
+      socket.disconnect();
+    } else {
+      toggleButton.innerText = 'Disconnect';
+      socket.connect();
+    }
+  });
+  // highlight-end
+</script>
+```
+
+  </TabItem>
+  <TabItem value="es5" label="ES5">
+
+```html
+<form id="form" action="">
+  <input id="input" autocomplete="off" /><button>Send</button>
+  // highlight-start
+  <button id="toggle-btn">Disconnect</button>
+  // highlight-end
+</form>
+
+<script>
+  // highlight-start
+  var toggleButton = document.getElementById('toggle-btn');
+
+  toggleButton.addEventListener('click', function(e) {
+    e.preventDefault();
+    if (socket.connected) {
+      toggleButton.innerText = 'Connect';
+      socket.disconnect();
+    } else {
+      toggleButton.innerText = 'Disconnect';
+      socket.connect();
+    }
+  });
+  // highlight-end
+</script>
+```
+
+  </TabItem>
+</Tabs>
+</details>
+
+:::
 
 Great! Now, you may ask:
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/10-server-delivery.md

@@ -124,6 +124,8 @@ main();
 ```js title="index.js"
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import { Server } from 'socket.io';
 // highlight-start
 import sqlite3 from 'sqlite3';
@@ -151,8 +153,10 @@ const io = new Server(server, {
   connectionStateRecovery: {}
 });
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 
 io.on('connection', (socket) => {
@@ -298,7 +302,7 @@ io.on('connection', async (socket) => {
 
 Let's see it in action:
 
-<video width="100%"><source src="/videos/tutorial/server-delivery.mp4" /></video>
+<video controls width="100%"><source src="/videos/tutorial/server-delivery.mp4" /></video>
 
 As you can see in the video above, it works both after a temporary disconnection and a full page refresh.
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/11-client-delivery.md

@@ -21,7 +21,7 @@ By default, Socket.IO provides an "at most once" guarantee of delivery (also kno
 
 When a client gets disconnected, any call to `socket.emit()` is buffered until reconnection:
 
-<video width="100%"><source src="/videos/tutorial/buffered-events.mp4" /></video>
+<video controls width="100%"><source src="/videos/tutorial/buffered-events.mp4" /></video>
 
 In the video above, the "realtime" message is buffered until the connection is reestablished.
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/12-scaling-horizontally.md

@@ -174,7 +174,7 @@ if (cluster.isPrimary) {
 
 That's it! This will spawn one worker thread per CPU available on your machine. Let's see it in action:
 
-<video width="100%"><source src="/videos/tutorial/scaling-up.mp4" /></video>
+<video controls width="100%"><source src="/videos/tutorial/scaling-up.mp4" /></video>
 
 As you can see in the address bar, each browser tab is connected to a different Socket.IO server, and the adapter is simply forwarding the `chat message` events between them.
 

i18n/fr/docusaurus-plugin-content-docs/current/tutorial/13-ending-notes.md

@@ -107,6 +107,8 @@ main();
 ```js title="index.js"
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 import { Server } from 'socket.io';
 import sqlite3 from 'sqlite3';
 import { open } from 'sqlite';
@@ -144,8 +146,10 @@ if (cluster.isPrimary) {
     adapter: createAdapter()
   });
 
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+
   app.get('/', (req, res) => {
-    res.sendFile(new URL('./index.html', import.meta.url).pathname);
+    res.sendFile(join(__dirname, 'index.html'));
   });
 
   io.on('connection', async (socket) => {

i18n/pt-br/docusaurus-plugin-content-docs/current/tutorial/03-serving-html.md

@@ -43,13 +43,19 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+// highlight-start
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+// highlight-end
 
 const app = express();
 const server = createServer(app);
 
 // highlight-start
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 // highlight-end
 

i18n/pt-br/docusaurus-plugin-content-docs/current/tutorial/04-integrating-socket-io.md

@@ -60,6 +60,8 @@ server.listen(3000, () => {
 ```js
 import express from 'express';
 import { createServer } from 'node:http';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
 // highlight-start
 import { Server } from 'socket.io';
 // highlight-end
@@ -70,8 +72,10 @@ const server = createServer(app);
 const io = new Server(server);
 // highlight-end
 
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
 app.get('/', (req, res) => {
-  res.sendFile(new URL('./index.html', import.meta.url).pathname);
+  res.sendFile(join(__dirname, 'index.html'));
 });
 
 // highlight-start

i18n/pt-br/docusaurus-plugin-content-docs/current/tutorial/05-emitting-events.md

@@ -70,7 +70,7 @@ io.on('connection', (socket) => {
 
 The result should be like the following video:
 
-<video width="100%"><source src="https://i.cloudup.com/transcoded/zboNrGSsai.mp4" /></video>
+<video controls width="100%"><source src="https://i.cloudup.com/transcoded/zboNrGSsai.mp4" /></video>
 
 :::info
 

i18n/pt-br/docusaurus-plugin-content-docs/current/tutorial/06-broadcasting.md

@@ -109,7 +109,7 @@ And on the client side when we capture a `chat message` event we’ll include it
 
 Let's see it in action:
 
-<video autoplay="" loop="" width="100%"><source src="https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4" /></video>
+<video controls autoplay="" loop="" width="100%"><source src="https://i.cloudup.com/transcoded/J4xwRU9DRn.mp4" /></video>
 
 :::info
 

i18n/pt-br/docusaurus-plugin-content-docs/current/tutorial/07-api-overview.md

@@ -283,6 +283,15 @@ socket.onAny((eventName, ...args) => {
 });
 ```
 
+Similarly, for outgoing packets:
+
+```js
+socket.onAnyOutgoing((eventName, ...args) => {
+  console.log(eventName); // 'hello'
+  console.log(args); // [ 1, '2', { 3: '4', 5: ArrayBuffer (1) [ 6 ] } ]
+});
+```
+
 ## Server API {#server-api}
 
 ### Broadcasting {#broadcasting}