diff --git a/Matchmaker/.gitignore b/Matchmaker/.gitignore new file mode 100644 index 00000000..f00ee426 --- /dev/null +++ b/Matchmaker/.gitignore @@ -0,0 +1 @@ +html/custom/ \ No newline at end of file diff --git a/Matchmaker/Docs/Customizing the Queue UI.md b/Matchmaker/Docs/Customizing the Queue UI.md new file mode 100644 index 00000000..2858de44 --- /dev/null +++ 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 `` in a template (`.html`) file. diff --git a/Matchmaker/README.md b/Matchmaker/README.md new file mode 100644 index 00000000..92f83ffe --- /dev/null +++ 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 index 9ee3c27e..5cb0a20e 100644 --- a/Matchmaker/config.json +++ b/Matchmaker/config.json @@ -2,5 +2,6 @@ "HttpPort": 90, "UseHTTPS": false, "MatchmakerPort": 9999, - "LogToFile": true + "LogToFile": true, + "EnableWebserver": true } \ No newline at end of file diff --git a/Matchmaker/html/sample/images/favicon-16x16.png b/Matchmaker/html/sample/images/favicon-16x16.png new file mode 100644 index 00000000..90dfb930 Binary files /dev/null and b/Matchmaker/html/sample/images/favicon-16x16.png differ diff --git a/Matchmaker/html/sample/images/favicon-32x32.png b/Matchmaker/html/sample/images/favicon-32x32.png new file mode 100644 index 00000000..87bd7314 Binary files /dev/null and b/Matchmaker/html/sample/images/favicon-32x32.png differ diff --git a/Matchmaker/html/sample/images/favicon-96x96.png b/Matchmaker/html/sample/images/favicon-96x96.png new file mode 100644 index 00000000..ab2064a8 Binary files /dev/null and b/Matchmaker/html/sample/images/favicon-96x96.png differ diff --git a/Matchmaker/html/sample/images/favicon.ico b/Matchmaker/html/sample/images/favicon.ico new file mode 100644 index 00000000..0b46e980 Binary files /dev/null and b/Matchmaker/html/sample/images/favicon.ico differ diff --git a/Matchmaker/html/sample/images/ue-logo.png b/Matchmaker/html/sample/images/ue-logo.png new file mode 100644 index 00000000..ab789a27 Binary files /dev/null and b/Matchmaker/html/sample/images/ue-logo.png differ diff --git a/Matchmaker/html/sample/queue/queue.html b/Matchmaker/html/sample/queue/queue.html new file mode 100644 index 00000000..1fe95dd8 --- /dev/null +++ b/Matchmaker/html/sample/queue/queue.html @@ -0,0 +1,38 @@ + + + + + + Looking for a streaming host... + + + + + + + + + + +
+
+ +

All Streaming Hosts Busy

+

Please wait,

+

checking all ${cirrusServers.size} hosts again in 3 seconds.

+
+
+ + + + \ No newline at end of file diff --git a/Matchmaker/html/sample/queue/styles.css b/Matchmaker/html/sample/queue/styles.css new file mode 100644 index 00000000..194157fc --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/Matchmaker/matchmaker.js b/Matchmaker/matchmaker.js index a1afca6a..b9ff3bdb 100644 --- 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 3 seconds. - `); + // 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 index 2e09e198..0d007ca9 100644 --- a/Matchmaker/package-lock.json +++ b/Matchmaker/package-lock.json @@ -1,11 +1,11 @@ { - "name": "cirrus-matchmaker", + "name": "@epicgames-ps/cirrus-matchmaker", "version": "0.0.1", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "cirrus-matchmaker", + "name": "@epicgames-ps/cirrus-matchmaker", "version": "0.0.1", "dependencies": { "cors": "^2.8.5",