Skip to content

Instantly share code, notes, and snippets.

@jwerle
Last active January 1, 2016 03:19
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jwerle/8084734 to your computer and use it in GitHub Desktop.
Save jwerle/8084734 to your computer and use it in GitHub Desktop.
Push messages to a browser with `umq(1)` and `wscat(1)` via web sockets
#!/bin/sh
PORT=5000
## accept data from stdin
while read -r chunk; do
echo "$chunk" | umq push localhost $PORT
done
#!/bin/sh
TCP_PORT=5000
WS_PORT=3000
umq recv $TCP_PORT -v | wscat -l $WS_PORT
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TCP Push Receiver</title>
<style type="text/css" media="all">
#messages {
font-family: Consolas, 'Liberation Mono', Courier, monospace;
color: #333;
background: rgb(250, 250, 250);
font-size: 64px;
padding: 50px 100px;
text-align: center;
}
</style>
</head>
<body>
<div id="messages"> <i>nothing received</i> </div>
<script type="text/javascript" charset="utf-8">
var style = getComputedStyle;
var int = parseInt;
var body = document.body;
var sock = new WebSocket('ws://localhost:3000');
var el = document.getElementById('messages');
sock.onmessage = function (chunk) {
el.innerHTML = chunk.data;
adjust(el, body);
};
adjust(el, body);
function adjust (el, body) {
var bh = int(style(body).height, 10);
var mh = int(style(el).height, 10);
var mid = bh / 2;
var off = mid + (mid - mh);
el.style['margin-top'] = off + 'px';
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment