Llloooggg/WebSocketTry
1
0
Fork 0
mirror of https://github.com/Llloooggg/WebSocketTry.git synced 2026-03-06 04:26:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

Добавлена обновляемая таблица

Browse Source
This commit is contained in:
Denis Podshivalov
2022-09-02 12:25:49 +03:00
parent 905363dbea
commit f21a4dce7c
3 changed files with 48 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/main/routes.py
View File

@@ -1,3 +1,5 @@
import json
from flask import render_template from flask import render_template
from . import main from . import main
@@ -5,4 +7,6 @@ from . import main
@main.route("/") @main.route("/")
def index(): def index():
return render_template("index.html") with open("data/data.json") as json_file:
data = json.load(json_file)["data"]
return render_template("index.html", data=data)

30
app/templates/index.html
View File

@@ -1,11 +1,37 @@
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>id</th>
<th>value</th>
</tr>
</thead>
<tbody id="tbody">
{% for object in data %}
<tr>
<td>{{object.id}}</td>
<td>{{object.value}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</body>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
var socket = io(); var socket = io();
socket.on('connect', function() { socket.on('connect', function() {
console.log('Connected to server'); console.log('Connected to server');
}); });
socket.on('file_updated', function(data) { socket.on('file_updated', function(data) {
console.log('The file has been updated:', data); var newTbody = "";
$(data.data).each(function(index, value) {
newTbody += "<tr><td>" + (value.id) + "</td><td>" + value.value+"</td></tr>";
})
$("#tbody").html(newTbody);
}); });
</script> </script>

15
data/data.json
View File

@@ -1,3 +1,16 @@
{ {
"data": "test" "data": [
{
"id": 1,
"value": "test"
},
{
"id": 2,
"value": "test2"
},
{
"id": 3,
"value": "test3"
}
]
} }