Add Example for Socket.IO Admin UI

.github/workflows/socketio_e2e.yml

@@ -7,10 +7,6 @@ on:
     branches: [ "main" ]
     paths:
      - 'sdk/**'
-  pull_request_target:
-    branches: [ "main" ]
-    paths:
-     - 'sdk/**'
 env:
   NODE_VERSION: '18.x'                # set this to the node version to use
 jobs:
@@ -49,4 +45,4 @@ jobs:
         SocketIoPort: 3000
       run: |
         pushd sdk/webpubsub-socketio-extension
-        yarn run test
+        yarn run test

sdk/webpubsub-socketio-extension/examples/admin-ui/chat/README.md

@@ -0,0 +1,22 @@
+
+# Azure Socket.IO Admin UI Sample
+
+This sample is modified from the sample "chat" to show how to use Azure Socket.IO Admin UI.
+
+## How to use 
+1. Open Azure Socket.IO Admin UI (its URL is not determined so far) in your browser.
+2. Click the "Update" button in the right top corner and fill in the service endpoint of your resource.
+3. Install the dependencies and start the server
+    ```bash
+    $ npm install
+    $ npm run start -- "<connection-string>"
+    ```
+4. Open a new tab to `http://localhost:3000` in your browser. Try the chat room.
+5. Go back to the Admin UI and check related information.
+
+## Note
+- The two lines below are necessary to make the Admin UI work
+    ```javascript
+    const { Namespace } = require("socket.io");
+    Namespace.prototype["fetchSockets"] = async function() { return this.local.fetchSockets(); };
+    ```

sdk/webpubsub-socketio-extension/examples/admin-ui/chat/index.js

@@ -0,0 +1,76 @@
+const { instrument } = require("@socket.io/admin-ui");
+const azure = require("@azure/web-pubsub-socket.io");
+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 }
+};
+const port = process.env.port || 3000;
+
+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, () => {}));
+
+    // Add Support for Azure Socket.IO Admin UI
+    instrument(io, { auth: false, mode: "development" });
+    Namespace.prototype["fetchSockets"] = async function() { return this.local.fetchSockets(); };
+
+    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(port, () => {
+        console.log('Visit http://localhost:%d', port);
+    });
+}
+
+main();

sdk/webpubsub-socketio-extension/examples/admin-ui/chat/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"
+  }
+}

sdk/webpubsub-socketio-extension/examples/admin-ui/chat/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>