http: Move resource details to /mopidy/ page

This commit is contained in:
Stein Magnus Jodal 2012-11-28 19:19:06 +01:00
parent c1e60ba378
commit 67c92ceab9
2 changed files with 67 additions and 47 deletions

View File

@ -3,65 +3,27 @@
<head>
<meta charset="UTF-8">
<title>Mopidy HTTP frontend</title>
<link rel="stylesheet" type="text/css" href="/mopidy.css">
<link rel="stylesheet" type="text/css" href="/mopidy/mopidy.css">
</head>
<body>
<div class="box focus">
<h1>Mopidy HTTP&nbsp;frontend</h1>
<p>This web server is a part of the music server Mopidy. To learn more
about Mopidy, please visit <a
href="http://www.mopidy.com/">www.mopidy.com</a>.</p>
about Mopidy, please visit
<a href="http://www.mopidy.com/">www.mopidy.com</a>.</p>
</div>
<div class="box">
<h2>Static content serving</h2>
<p>To see your own content here, change the setting
<tt>HTTP_SERVER_STATIC_DIR</tt> to point to the directory containing your
content. This can be used to host a web based Mopidy client here.</p>
<p>To see your own content instead of this placeholder page, change the
setting <tt>HTTP_SERVER_STATIC_DIR</tt> to point to the directory
containing your static files. This can be used to host e.g. a pure
HTML/CSS/JavaScript Mopidy client.</p>
<p>Even if you host your own content on the root of the web server,
you'll always have the following services available.</p>
<p>If you replace this page with your own content, the Mopidy resources
at <a href="/mopidy/">/mopidy/</a> will still be available.</p>
</div>
<div class="box">
<h2>WebSocket endpoint</h2>
<p>Mopidy has a WebSocket endpoint at <code>/mopidy/ws/</code>. You can
use WebSockets to get notified about events happening in Mopidy. The
alternative would be to regularly poll the conventional web service for
updates.</p>
<p>To connect to the endpoint from a browser with WebSocket support,
simply enter the following JavaScript code in the browser's console:</p>
<pre>var ws = new WebSocket("ws://myhost:myport/mopidy/ws/');
ws.onmessage = function (event) {
console.log("Incoming message: ", event.data);
};
ws.send("Message to the server, ahoy!");</pre>
<p>Here you can see events arriving from Mopidy in real time:</p>
<pre id="ws-console"></pre>
</div>
<div class="box focus">
<h2>Documentation</h2>
<p>For more information, please refer to the Mopidy documentation at
<a href="http://docs.mopidy.com/">docs.mopidy.com</a>.</p>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
var ws = new WebSocket("ws://" + document.location.host + "/mopidy/ws/");
ws.onmessage = function (message) {
$("#ws-console").prepend(
(new Date()).toLocaleTimeString() + ": " + message.data + "\n");
};
});
</script>
</body>
</html>

View File

@ -0,0 +1,58 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mopidy HTTP frontend</title>
<link rel="stylesheet" type="text/css" href="/mopidy/mopidy.css">
<style type="text/css">
#ws-console {
height: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div class="box focus">
<h1>Mopidy HTTP&nbsp;frontend</h1>
<p>This web server is a part of the music server Mopidy. To learn more
about Mopidy, please visit <a
href="http://www.mopidy.com/">www.mopidy.com</a>.</p>
</div>
<div class="box">
<h2>WebSocket endpoint</h2>
<p>Mopidy has a WebSocket endpoint at <tt>/mopidy/ws/</tt>. You can use
this end point to access Mopidy's full API, and to get notified about
events happening in Mopidy.</p>
</div>
<div class="box">
<h2>Example</h2>
<p>Here you can see events arriving from Mopidy in real time:</p>
<pre id="ws-console"></pre>
<p>Nothing to see? Try playing a track using your MPD client.</p>
</div>
<div class="box focus">
<h2>Documentation</h2>
<p>For more information, please refer to the Mopidy documentation at
<a href="http://docs.mopidy.com/">docs.mopidy.com</a>.</p>
</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function () {
var ws = new WebSocket("ws://" + document.location.host + "/mopidy/ws/");
ws.onmessage = function (message) {
$("#ws-console").prepend(
(new Date()).toLocaleTimeString() + ": " + message.data + "\n");
};
});
</script>
</body>
</html>