Browse Source

Move JS to its own file

Make the WebSockets port configurable
More detailed "onclose" logging
General linting
master
Chimo 5 years ago
parent
commit
c38203b0a7
3 changed files with 66 additions and 42 deletions
  1. +4
    -1
      config.dist.php
  2. +6
    -41
      index.php
  3. +56
    -0
      js/websockets.js

+ 4
- 1
config.dist.php View File

@ -6,6 +6,9 @@ $config = array(
"user" => "lifestream",
"password" => "",
"host" => "localhost"
),
"websockets" => array(
"port" => 8090
)
);

+ 6
- 41
index.php View File

@ -43,50 +43,15 @@ echo $html;
?>
<script>
if ("WebSocket" in window ) {
var ws = new WebSocket( window.location.origin.replace( /https?/, "ws" ) + ":8090" ),
formatDate;
( function() {
"use strict";
formatDate = function( date ) {
var d = new Date( date );
// Fallback to "now" if date is invalid
if ( isNaN( d.getTime() ) ) {
d = new Date();
}
return d.toISOString().slice( 0, -5 ).replace( "T", " " );
};
ws.onopen = function( event ) {
console.log( 'connection established' );
};
ws.onerror = function ( event ) {
console.log( 'error' );
console.log( event );
};
ws.onclose = function (event) {
console.log('closed');
console.log(event);
window.ls = {
"port": <?php $config['websockets']['port'] ?>
}
ws.onmessage = function( event ) {
console.log(JSON.parse(event.data).published);
var item = document.createElement( 'li' ),
list = document.getElementById( 'list' ),
event = JSON.parse( event.data );
item.innerHTML = "<figure>" +
"<figcaption>" + event.title + "</figcaption>" +
"<blockquote cite='" + event.source + "'>" + event.content + "</blockquote>" +
"<footer><a href='" + event.source + "'>" + formatDate( event.published ) + "</a></footer>" +
"</figure>";
list.insertBefore( item, list.firstChild );
};
}
}() );
</script>
<script src="js/websockets.js"></script>
</body>
</html>


+ 56
- 0
js/websockets.js View File

@ -0,0 +1,56 @@
( function() {
/*global console: false, JSON: false*/
"use strict";
if ( "WebSocket" in window ) {
var ws = new WebSocket( window.location.origin.replace( /https?/, "ws" ) + ":" + window.ls.port ),
formatDate;
formatDate = function( date ) {
var d = new Date( date );
// Fallback to "now" if date is invalid
if ( isNaN( d.getTime() ) ) {
d = new Date();
}
return d.toISOString().slice( 0, -5 ).replace( "T", " " );
};
ws.onopen = function( /*event*/ ) {
console.log( "connection established" );
};
ws.onerror = function( /*event*/ ) {
console.log( "An error occured" );
};
ws.onclose = function( event ) {
var closedDetails = ( event.wasClean ) ? " cleanly" : " unexpectedly",
reason = event.reason;
console.log( "WebSocket connection closed" + closedDetails );
console.log( "Code: " + event.code + " ( see: https://developer.mozilla.org/en-US/docs/Web/API/CloseEvent )" );
// Don't print reason if it's an empty string
if ( reason === "" ) {
console.log( "Reason: " + event.reason );
}
};
ws.onmessage = function( event ) {
var item = document.createElement( "li" ),
list = document.getElementById( "list" );
event = JSON.parse( event.data );
item.setAttribute( "class", event.type );
item.innerHTML = "<figure>" +
"<figcaption>" + event.title + "</figcaption>" +
"<blockquote cite='" + event.source + "'>" + event.content + "</blockquote>" +
"<footer><a href='" + event.source + "'>" + formatDate( event.published ) + "</a></footer>" +
"</figure>";
list.insertBefore( item, list.firstChild );
};
}
}() );

Loading…
Cancel
Save