update

Azure · May 7, 2024 · 2d9f114 · 2d9f114
1 parent 487877a
commit 2d9f114
Show file tree

Hide file tree

Showing 6 changed files with 551 additions and 0 deletions.
diff --git a/sdk/webpubsub-socketio-extension/examples/admin-ui/README.md b/sdk/webpubsub-socketio-extension/examples/admin-ui/README.md
@@ -0,0 +1,14 @@
+
+# Azure Socket.IO Admin UI Sample
+
+This sample is modified from the sample "chat" to show how to use Socket.IO Admin UI.
+Besides, it contains server-side logic for a simple echo performance benchmark. Use it with the part of benchmark in Azure Socket.IO Admin UI website.
+
+## How to use
+
+```
+$ npm install
+$ npm run start -- "<connection-string>"
+```
+
+And point your browser to `http://localhost:3000`.
diff --git a/sdk/webpubsub-socketio-extension/examples/admin-ui/index.js b/sdk/webpubsub-socketio-extension/examples/admin-ui/index.js
@@ -0,0 +1,85 @@
+const { instrument } = require("@socket.io/admin-ui");
+const azure = require("@azure/web-pubsub-socket.io");
+// Setup basic express server
+const express = require('express');
+const app = express();
+const path = require('path');
+const { Namespace, Server } = require("socket.io");
+const server = require('http').createServer(app);
+
+// Add an Web PubSub Option
+const wpsOptions = {
+    hub: "eio_hub",
+    connectionString: process.argv[2] || process.env.WebPubSubConnectionString,
+    webPubSubServiceClientOptions: { allowInsecureConnection: true }
+};
+
+async function main() {
+    const io = await new Server(server).useAzureSocketIO(wpsOptions);
+    app.use(express.static(path.join(__dirname, 'public')));
+    app.get("/negotiate", azure.negotiate(io, () => {}));
+
+    instrument(io, { auth: false, mode: "development", username: "username", password: "assword"});
+    Namespace.prototype["fetchSockets"] = async function() { return this.local.fetchSockets(); };
+
+    // Logic for Echo Benchmark
+    const echoBenchmark = io.of("/echoBenchmark");
+
+    echoBenchmark.on('connection', (socket) => {
+        socket.on('client to server event', (data) => {
+            socket.emit("server to client event", (data));
+        });
+    });
+
+    // Logic for Chat Room
+    let numUsers = 0;
+
+    io.on('connection', socket => {
+        let addedUser = false;
+
+        // when the client emits 'new message', this listens and executes
+        socket.on('new message', (data) => {
+            // we tell the client to execute 'new message'
+            socket.broadcast.emit('new message', {
+                username: socket.username,
+                message: data
+            });
+        });
+
+        // when the client emits 'add user', this listens and executes
+        socket.on('add user', (username) => {
+            if (addedUser) return;
+
+            // we store the username in the socket session for this client
+            socket.username = username;
+            ++numUsers;
+            addedUser = true;
+            socket.emit('login', {
+                numUsers: numUsers
+            });
+            // echo globally (all clients) that a person has connected
+            socket.broadcast.emit('user joined', {
+                username: socket.username,
+                numUsers: numUsers
+            });
+        });
+
+        // when the user disconnects.. perform this
+        socket.on('disconnect', () => {
+            if (addedUser) {
+                --numUsers;
+
+                // echo globally that this client has left
+                socket.broadcast.emit('user left', {
+                    username: socket.username,
+                    numUsers: numUsers
+                });
+            }
+        });
+    });
+    io.httpServer.listen(3000, () => {
+        console.log('Visit http://localhost:%d', 3000);
+    });
+}
+
+main();
diff --git a/sdk/webpubsub-socketio-extension/examples/admin-ui/package.json b/sdk/webpubsub-socketio-extension/examples/admin-ui/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "socket.io-chat",
+  "version": "0.0.0",
+  "description": "A simple chat client using socket.io",
+  "main": "index.js",
+  "private": true,
+  "license": "BSD",
+  "dependencies": {
+    "@azure/web-pubsub-socket.io": "^1.1.0",
+    "@socket.io/admin-ui": "^0.5.1",
+    "express": "~4.17.1",
+    "socket.io": "^4.6.1"
+  },
+  "scripts": {
+    "start": "node index.js"
+  }
+}
diff --git a/sdk/webpubsub-socketio-extension/examples/admin-ui/public/index.html b/sdk/webpubsub-socketio-extension/examples/admin-ui/public/index.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Socket.IO Chat Example</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <ul class="pages">
+    <li class="chat page">
+      <div class="chatArea">
+        <ul class="messages"></ul>
+      </div>
+      <input class="inputMessage" placeholder="Type here..."/>
+    </li>
+    <li class="login page">
+      <div class="form">
+        <h3 class="title">What's your nickname?</h3>
+        <input class="usernameInput" type="text" maxlength="14" />
+      </div>
+    </li>
+  </ul>
+
+  <script>
+    var names = ["Bob", "Alice","John","Alex","Cooper","James", "Jack", "Rose", "Justin", "Julia", "White", "Black", "Green"];
+    var idx = Math.floor(Math.random()*100) % names.length;
+    document.querySelector('.usernameInput').value = names[idx];
+  </script>
+  <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
+  <script src="https://cdn.socket.io/4.6.0/socket.io.min.js" integrity="sha384-c79GN5VsunZvi+Q/WObgk2in0CbZsHnjEqvFxC5DxHn9lTfNce2WW6h2pH6u/kF+" crossorigin="anonymous"></script>
+  <script src="./main.js"></script>
+</body>
+</html>