reiseburo/kafkakitty
reiseburo
/
kafkakitty
1
0
Fork 0
Code Issues Pull Requests Releases 1 Activity

Restructure the frontend a wee bit to allow for a reconnecting websocket 

The Vue Hello World is still in place, slowly replacing..
This commit is contained in:
R Tyler Croy 2019-11-28 12:53:10 -08:00
parent 115bf2f25e
commit 65bdd2b6ea
No known key found for this signature in database
GPG Key ID: E5C92681BEF6CEA2
3 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/main.js
View File

@ -5,6 +5,34 @@ import App from './App'
Vue.config.productionTip = false
console.log('Kafkakitty bootstrapping..')
function wsConnect () {
const socket = new WebSocket('ws://localhost:8001')
socket.onopen = (event) => {
console.log('Kafkakitty connected! 😺')
}
socket.onerror = (err) => {
console.error('😿 Kafkakitty encountered an error:', err)
socket.close()
wsConnect()
}
socket.onclose = (event) => {
console.log('Kafkakitty connection lost, retrying..')
wsConnect()
}
socket.onmessage = (event) => {
console.log(`Received: ${event.data}`)
const container = document.getElementById('app')
const d = document.createElement('div')
d.className = 'row'
d.innerHTML = `<pre><code>${event.data}</code></pre>`
container.insertBefore(d, container.firstChild)
}
}
wsConnect()
/* eslint-disable no-new */
new Vue({
el: '#app',

4
index.html
View File

@ -2,9 +2,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Kafkakitty 😻</title>
</head>
<body>
<noscript>
@ -12,8 +10,6 @@
Kafkakitty needs JavaScript to work! 😿
</h1>
</noscript>
<div id="app"></div>
<script type="text/javascript" src="/assets/static/sock.js"></script>
</body>
</html>

18
static/sock.js
View File

@ -1,18 +0,0 @@
/*
* Main module for the Kafkakitty client side code
*/
console.log('😺 Kafkakitty bootstrapping..');
const socket = new WebSocket('ws://127.0.0.1:8001');
socket.onmessage = (event) => {
console.log(`Received: ${event.data}`);
const container = document.getElementById('app');
const d = document.createElement('div');
d.className = 'row'
d.innerHTML = `<pre><code>${event.data}</code></pre>`;
container.insertBefore(d, container.firstChild);
};