Merge pull request #211 from kasp1/master

New matchmaker queue screen with easy customization
EpicGames · Aug 31, 2023 · 6b742d3 · 6b742d3
2 parents 19438d8 + 22489b6
commit 6b742d3
Show file tree

Hide file tree

Showing 13 changed files with 119 additions and 16 deletions.
diff --git a/Matchmaker/.gitignore b/Matchmaker/.gitignore
@@ -0,0 +1 @@
+html/custom/
diff --git a/Matchmaker/Docs/Customizing the Queue UI.md b/Matchmaker/Docs/Customizing the Queue UI.md
@@ -0,0 +1,10 @@
+## Customizing the Queue UI
+
+The Matchmaker server allows for custom HTML UI to be displayed. In order to create a custom queue UI template:
+
+1. Duplicate the `Matchmaker/html/sample` directory as `Matchmaker/html/custom`.
+2. Edit `Matchmaker/html/custom/queue/queue.html` as needed.
+
+It is required to keep the same directory struture and file names for the template (`.html`) files. The Matchmaker server will prefer the `custom` directory over `sample`. The `custom` directory always needs to contain all templates from the `sample` directory.
+
+The `custom` directory can contain additional files, which may be referenced in the template files with a path relative to `Matchmaker/html/custom`. For example, an image located as `Matchmaker/html/custom/images/1.png` could be referenced as `<img src="/images/1.png" alt="">` in a template (`.html`) file.
diff --git a/Matchmaker/README.md b/Matchmaker/README.md
@@ -0,0 +1,12 @@
+# Pixel Streaming Matchmaker
+
+Instead of having all users connect to the same stream, you may want each person to end up in their own interactive experiences. To do this, you can run a separate stack of Pixel Streaming components for each user, and direct each user to a separate Signaling and Web Server to start a connection.
+
+You can set up each stack of Pixel Streaming components on a separate host, or you can put more than one stack on the same host as long as you configure the port settings for the components within each stack so that they all communicate over different ports. See the Pixel Streaming Reference for details on these port settings.
+
+To help set up this kind of configuration, the Pixel Streaming system can use a **matchmaker** server that tracks which Signaling and Web Servers are available, and whether they are being used by a client connection.
+
+
+## Docs
+- [Hosting and Networking Guide](https://docs.unrealengine.com/5.1/en-US/hosting-and-networking-guide-for-pixel-streaming-in-unreal-engine/)
+- [Customizing the Queue UI](Docs/Customizing%20the%20Queue%20UI.md)
diff --git a/Matchmaker/config.json b/Matchmaker/config.json
@@ -2,5 +2,6 @@
 	"HttpPort": 90,
 	"UseHTTPS": false,
 	"MatchmakerPort": 9999,
-	"LogToFile": true
+	"LogToFile": true,
+	"EnableWebserver": true
 }
diff --git a/Matchmaker/html/sample/images/favicon-16x16.png b/Matchmaker/html/sample/images/favicon-16x16.png
diff --git a/Matchmaker/html/sample/images/favicon-32x32.png b/Matchmaker/html/sample/images/favicon-32x32.png
diff --git a/Matchmaker/html/sample/images/favicon-96x96.png b/Matchmaker/html/sample/images/favicon-96x96.png
diff --git a/Matchmaker/html/sample/images/favicon.ico b/Matchmaker/html/sample/images/favicon.ico
diff --git a/Matchmaker/html/sample/images/ue-logo.png b/Matchmaker/html/sample/images/ue-logo.png
diff --git a/Matchmaker/html/sample/queue/queue.html b/Matchmaker/html/sample/queue/queue.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>Looking for a streaming host...</title>
+		<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
+		<link rel="icon" type="image/png" sizes="96x96" href="/images/favicon-96x96.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png">
+		<link rel="preconnect" href="https://fonts.googleapis.com">
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+		<link href="https://fonts.googleapis.com/css2?family=Michroma&family=Montserrat:wght@600&display=swap" rel="stylesheet">
+		<link type="text/css" rel="stylesheet" href="queue/styles.css">
+	</head>
+	<body>
+		<main>
+			<section>
+				<img id="logo" src="images/ue-logo.png" alt="Unreal Engine">
+				<h1>All Streaming Hosts Busy</h1>
+				<p>Please wait,</p>
+				<p>checking all ${cirrusServers.size} hosts again in <span id="countdown">3</span> seconds.</p>
+			</section>
+		</main>
+
+		<script type="text/javascript">
+			var countdown = document.getElementById("countdown").textContent;
+			setInterval(function() {
+				countdown--;
+				if (countdown == 0) {
+					window.location.reload(1);
+				} else {
+					document.getElementById("countdown").textContent = countdown;
+				}
+			}, 1000);
+		</script>
+	</body>
+</html>
diff --git a/Matchmaker/html/sample/queue/styles.css b/Matchmaker/html/sample/queue/styles.css
@@ -0,0 +1,33 @@
+* { box-sizing: border-box; }
+
+body {
+    background-color: black;
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    margin: 0;
+}
+
+main {
+    display: flex;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+}
+
+section {
+    text-align: center;
+}
+
+h1 {
+    font-size: 1.8em;
+    text-transform: uppercase;
+}
+
+p {
+    text-align: center;
+}
+
+#logo {
+    display: inline-block;
+    height: 20vh;
+}
diff --git a/Matchmaker/matchmaker.js b/Matchmaker/matchmaker.js
@@ -10,7 +10,9 @@ const defaultConfig = {
 	MatchmakerPort: 9999,
 
 	// Log to file
-	LogToFile: true
+	LogToFile: true,
+
+	EnableWebserver: true,
 };
 
 // Similar to the Signaling Server (SS) code, load in a config.json file for the MM parameters
@@ -86,21 +88,27 @@ if (config.UseHTTPS) {
 	});
 }
 
+let htmlDirectory = 'html/sample'
+if(config.EnableWebserver) {
+	// Setup folders
+
+	if (fs.existsSync('html/custom')) {
+		app.use(express.static(path.join(__dirname, '/html/custom')))
+		htmlDirectory = 'html/custom'
+	} else {
+		app.use(express.static(path.join(__dirname, '/html/sample')))
+	}
+}
+
 // No servers are available so send some simple JavaScript to the client to make
 // it retry after a short period of time.
 function sendRetryResponse(res) {
-	res.send(`All ${cirrusServers.size} Cirrus servers are in use. Retrying in <span id="countdown">3</span> seconds.
-	<script>
-		var countdown = document.getElementById("countdown").textContent;
-		setInterval(function() {
-			countdown--;
-			if (countdown == 0) {
-				window.location.reload(1);
-			} else {
-				document.getElementById("countdown").textContent = countdown;
-			}
-		}, 1000);
-	</script>`);
+	// find check if a custom template should be used or the sample one
+	let html = fs.readFileSync(`${htmlDirectory}/queue/queue.html`, { encoding: 'utf8' })
+	html = html.replace(/\$\{cirrusServers\.size\}/gm, cirrusServers.size)
+
+	res.setHeader('content-type', 'text/html')
+	res.send(html)
 }
 
 // Get a Cirrus server if there is one available which has no clients connected.

diff --git a/Matchmaker/package-lock.json b/Matchmaker/package-lock.json