Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
if (isset($_GET['seek'])) {
$seek = $_GET['seek'];
$lines = [];
$handle = fopen('error_log', 'rb');
if ($seek > 0) {
fseek($handle, $seek);
}
while (($line = fgets($handle, 4096)) !== false) {
$lines[] = $line;
}
$seek = ftell($handle);
header("Content-Type: application/json");
echo json_encode(['seek' => $seek, 'lines' => $lines]);
exit();
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Logs</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#app {
font-family: monospace;
font-size: 12px;
white-space: pre-wrap;
color: #333;
}
</style>
</head>
<body>
<div id="app">
<div v-for="line in lines">{{ line }}</div>
</div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
lines: [],
seek: 0
},
mounted () {
this.load();
setInterval(this.load, 3000);
},
methods: {
load () {
axios.get(`logs.php?seek=${this.seek}`)
.then(response => {
this.lines = [...response.data.lines.reverse(), ...this.lines];
this.seek = response.data.seek;
});
}
}
});
</script>
</body>
</html>
@divinity76

This comment has been minimized.

Copy link

@divinity76 divinity76 commented May 2, 2017

don't hardcode the name logs.php , make the code name-independent, replace line 60 with axios.get(`?seek=${this.seek}`), and the browser will fill in the blanks, wether it be logs.php or php-tail-log.php (as is the name of this paste), or anythingelse.php.

furthermore, don't use setInterval for this - if you're on a slow connection, and use setInterval, it will start downloading several copies of the same logs simultaneously! (if its slow enough, will keep doing this until you reach the browser's max socket limit!) - call it once to start it, and have it make a setTimeout() for itself.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment