Update reference JavaScript examples

miguelgrinberg · Mar 28, 2023 · 6df96fb · 6df96fb
1 parent 598dd7e
commit 6df96fb
Show file tree

Hide file tree

Showing 8 changed files with 780 additions and 937 deletions.
diff --git a/examples/client/javascript/package-lock.json b/examples/client/javascript/package-lock.json
diff --git a/examples/client/javascript/package.json b/examples/client/javascript/package.json
@@ -4,7 +4,7 @@
   "dependencies": {
     "express": "^4.18.2",
     "smoothie": "1.19.0",
-    "socket.io": "^4.5.3",
-    "socket.io-client": "^3.0.3"
+    "socket.io": "^4.6.1",
+    "socket.io-client": "^4.6.1"
   }
 }
diff --git a/examples/server/javascript/fiddle.js b/examples/server/javascript/fiddle.js
@@ -1,7 +1,13 @@
 const express = require('express');
+const { createServer } = require("http");
+const { Server } = require("socket.io");
+const { instrument } = require("@socket.io/admin-ui");
+
 const app = express();
-const server = require('http').createServer(app);
-const io = require('socket.io')(server);
+const httpServer = createServer(app);
+const io = new Server(httpServer, {
+  cors: { origin: 'https://admin.socket.io', credentials: true },
+});
 const port = process.env.PORT || 5000;
 
 app.use(express.static(__dirname + '/fiddle_public'));
@@ -18,4 +24,5 @@ io.on('connection', socket => {
   });
 });
 
-server.listen(port, () => console.log(`server listening on port ${port}`));
+instrument(io, {auth: false, mode: 'development'});
+httpServer.listen(port, () => console.log(`server listening on port ${port}`));
diff --git a/examples/server/javascript/fiddle_public/index.html b/examples/server/javascript/fiddle_public/index.html
@@ -5,7 +5,7 @@
     <title>Socket.IO Fiddle</title>
   </head>
   <body>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
     <script src="/main.js"></script>
   </body>
 </html>
diff --git a/examples/server/javascript/latency.js b/examples/server/javascript/latency.js
@@ -1,7 +1,11 @@
 const express = require('express');
+const { createServer } = require("http");
+const { Server } = require("socket.io");
+
 const app = express();
-const server = require('http').createServer(app);
-const io = require('socket.io')(server);
+const httpServer = createServer(app);
+const io = new Server(httpServer);
+
 const port = process.env.PORT || 5000;
 
 app.use(express.static(__dirname + '/latency_public'));
@@ -18,4 +22,4 @@ io.on('connection', socket => {
   });
 });
 
-server.listen(port, () => console.log(`server listening on port ${port}`));
+httpServer.listen(port, () => console.log(`server listening on port ${port}`));
diff --git a/examples/server/javascript/latency_public/index.html b/examples/server/javascript/latency_public/index.html
@@ -9,8 +9,8 @@ <h1>Socket.IO Latency <span id="latency"></span></h1>
     <h2 id="transport">(connecting)</h2>
     <canvas id="chart" height="200"></canvas>
 
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.2.0/smoothie.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/3.0.3/socket.io.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothie/1.19.0/smoothie.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.6.1/socket.io.js"></script>
     <script src="/index.js"></script>
   </body>
 </html>