Django通道Websocket和HTML表
我对编程和使用django有点陌生。我使用django Channel 3和websocket构建了一个web应用程序来填充一个表，该表整合了来自不同核心的事件问题。我成功地通过websockets填充html表，并将它们存储在数据库中，但在重新加载页面时无法从数据库中检索。一旦我重新加载或重新启动页面，页面将被清除 有没有办法使html表保持不变，或者在重新加载或启动后从数据库中检索表 Consumer.pyDjango通道Websocket和HTML表,websocket,django-channels,django-tables2,django-database,Websocket,Django Channels,Django Tables2,Django Database,我对编程和使用django有点陌生。我使用django Channel 3和websocket构建了一个web应用程序来填充一个表，该表整合了来自不同核心的事件问题。我成功地通过websockets填充html表，并将它们存储在数据库中，但在重新加载页面时无法从数据库中检索。一旦我重新加载或重新启动页面，页面将被清除 有没有办法使html表保持不变，或者在重新加载或启动后从数据库中检索表 Consumer.py from channels.generic.websocket import Asy
from channels.generic.websocket import AsyncWebsocketConsumer
from channels.db import database_sync_to_async
from channels.consumer import AsyncConsumer
import asyncio
import json
from .models import TableEvent
class TableData(AsyncWebsocketConsumer):
async def connect(self):
self.group_name='tableData'
self.source = await self.get_event()
await self.channel_layer.group_add(
self.group_name,
self.channel_name
)
print(self.group_name, self.channel_name, self.source) #testing to see if i can print from database
await self.accept()
async def disconnect(self,close_code):
pass
async def receive(self,text_data):
#print(text_data)
#Decode
text_data_json = json.loads(text_data)
source = text_data_json['source']
core = text_data_json['core']
time = text_data_json['time']
message = text_data_json['message']
category = text_data_json['category']
#store event messages
await self.store_event(source,core,time,message,category)
await self.channel_layer.group_send(
self.group_name,
{
'type':'event_message',
'value':text_data
}
)
async def event_message(self,event):
message = event['value']
print(message)
await self.send(event['value'])
@database_sync_to_async
def get_event(self):
return TableEvent.objects.all()[0].source, TableEvent.objects.all()[0].core, TableEvent.objects.all()[0].category, TableEvent.objects.all()[0].time, TableEvent.objects.all()[0].message
@database_sync_to_async
def store_event(self, core,source,time,message, category):
return TableEvent.objects.create(message=message, time=time, source=source, core=core, category=category)
from django.db import models
# Create your models here.
class TableEvent(models.Model):
source = models.TextField()
core = models.TextField()
category = models.TextField()
time = models.TextField()
message = models.TextField()
from django.shortcuts import render
# Create your views here.
def index(request):
data={'stock1':{'source':'','core': '','category':'','time':'','message':''},}
context={'data':data,'tableheader':['Source','Core','Category','Date & Time','Message']}
return render(request,'index.html',context)
<html>
<head>
<style>
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
</head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/reconnecting-websocket/1.0.0/reconnecting-websocket.js'></script>
<script>
let socket = new ReconnectingWebSocket('ws://x.x.x.x:8000/ws/tableData/');
socket.onopen = function(e){
};
socket.onmessage = function(e){
console.log(e['data']);
var recData = JSON.parse(e.data);
tableBodyData[recData['indexName']]['message']=recData['message'];
tableBodyData[recData['indexName']]['time']=recData['time'];
tableBodyData[recData['indexName']]['category']=recData['category'];
tableBodyData[recData['indexName']]['core']=recData['core'];
tableBodyData[recData['indexName']]['source']=recData['source'];
test = tableBodyData[recData['indexName']]['message']['time']
console.log(test);
createtableBody(tableContent,tableBodyData)
};
socket.onclose= function(e){
};
</script>
<body>
<h1>Reflect Help Calls</h1>
<table id="customers">
</table>
</body>
<script>
let tableheader = {{tableheader | safe}};
let tableBodyData= {{data | safe}};
function createHeader(table,headervalues){
let tHead = table.createTHead();
let trow = tHead.insertRow();
for (val in headervalues){
// console.log(headervalues[val]);
let th =document.createElement('th');
let text = document.createTextNode(headervalues[val]);
th.appendChild(text);
trow.appendChild(th);
}
}
function createtableBody(table,data){
for (element in data){
let row = table.insertRow(1);
for (key in data[element]){
let cell = row.insertCell();
let text = document.createTextNode(data[element][key]);
cell.appendChild(text);
}
}
}
var tableContent = document.getElementById('customers');
createHeader(tableContent,tableheader);
</script>
</html>
#顾客{
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
边界塌陷：塌陷；
宽度：100%；
}
#客户td，#客户th{
边框：1px实心#ddd；
填充：8px；
文本对齐：左对齐；
}
#客户tr:n子（偶数）{背景色：#f2f2f2；}
#客户tr:hover{背景色：#ddd；}
#顾客{
填充顶部：12px；
垫底：12px；
文本对齐：左对齐；
背景色：#4CAF50；
颜色：白色；
}
let socket=新的重新连接WebSocket（'ws://x.x.x.x:8000/ws/tableData/'）；
socket.onopen=函数（e）{
};
socket.onmessage=函数（e）{
log（e['data']）；
var recData=JSON.parse（e.data）；
tableBodyData[recData['indexName']['message']=recData['message']；
tableBodyData[recData['indexName']['time']=recData['time']；
tableBodyData[recData['indexName']['category']=recData['category']；
tableBodyData[recData['indexName']['core']=recData['core']；
tableBodyData[recData['indexName']['source']=recData['source']；
测试=tableBodyData[recData['indexName']['message']['time']
控制台日志（测试）；
createtableBody（tableContent、tableBodyData）
};
socket.onclose=函数（e）{
};
反映求助电话
设tableheader={tableheader|safe}；
设tableBodyData={data | safe}；
函数createHeader（表，headervalues）{
设tHead=table.createTHead（）；
设trow=tHead.insertRow（）；
for（表头值中的val）{
//console.log（headervalues[val]）；
设th=document.createElement（'th'）；
让text=document.createTextNode（headervalues[val]）；
附文（正文）；
附肢儿童（th）；
}
}
函数createtableBody（表，数据）{
for（数据中的元素）{
let row=table.insertRow（1）；
for（输入数据[元素]）{
let cell=row.insertCell（）；
让text=document.createTextNode（数据[element][key]）；
单元格.appendChild（文本）；
}
}
}
var tableContent=document.getElementById（'customers'）；
createHeader（tableContent，tableheader）；