本文僅為學技術而簡單舉例，后端框架是Django，具體業務邏輯是否合理可以不用管，下方是工作中需要實現的需求
自動化程序腳本運行的三種任務狀態：
1、未執行 2、執行成功 3、執行失敗
任務狀態在網頁前端實時展示，需要每隔一段時間請求數據庫中的狀態數據字段為webtask_stu，並返回前端展示
兩種思路：
1、前端輪詢，每請求一次，建立一次連接，后端返回前端數據一次
具體實現：設置定時器，每隔5s請求后端數據，后端返回數據后渲染前端
2、前端請求只建立一次連接，后端能持續主動向前端推送數據
具體實現：前端通過socket方式向后端建立連接，后端定時查詢數據庫數據，主動向前端推送，這種優點很明顯，可以減少網絡請求次數
方式一：Ajax定時請求：
1、前端設置定時器setInterval,定時器里面傳ajax請求函數和時間
function get_stu_list(){
param = {}; $.post("/web/webtask_stu/",param,function(data){ var webtask_tu_list = data.webtask_stu; console.log(webtask_tu_list); var tr = $("tbody tr"); $.each(tr,function (i,ele) { $(ele).find("td:eq(4)").text(webtask_tu_list[i]) }); });};setInterval(get_stu_list,5000);
后端也很簡單，查詢數據以JSonResponse返回即可
def webtask_stu(request): webtasks = Webtask.objects.all() webtask_stu_list = [] for webtask in webtasks: webtask_stu_list.append(webtask.webtask_stu) dit = {'webtask_stu': webtask_stu_list} print(webtask_stu_list) return JsonResponse(dit)
方式二、websocket
效果圖如下，后端持續向前端推送數據，前端控制台輸出演示
1、前端部分構造socket連接對象，協議就是websocket協議了，不是http協議，所以前面用ws開頭
2、windows.loaction.host可以獲取域名(包括端口)
3、主要用到的方法如下，具體也可以看注釋
socket.onopen ： 成功連接
socket.onmessage ： 成功獲取后端返回的數據，通過jquery渲染后端返回的狀態數據實現刷新效果
socket.onclose：連接失效
4、后端返回來是字符串，需要用到JSON.parse轉成前端對象
var socket = new WebSocket("ws:" + window.location.host + "/web/webtask_stu/");
socket.onopen = function () { console.log('WebSocket open');//成功連接上Websocket socket.send('adasdasda。。。。');//發送數據到服務端 }; socket.onmessage = function (e) { // console.log('message: ' + e.data);//打印服務端返回的數據 // console.log(typeof (e.data)); console.log(JSON.parse(e.data)); // console.log(typeof (JSON.parse(e.data))); var webtask_stu_list = JSON.parse(e.data); var tr = $("tbody tr"); $.each(tr,function (i,ele) { $(ele).find("td:eq(4)").text(webtask_stu_list["webtask_stu"][i]) }); }; socket.onclose=function(e){ console.log(e); socket.close(); //關閉TCP連接 };
后端Django部分：
1、django項目的話安裝dwebsocket，pip install dwebsocket ，並在代碼中導入
from dwebsocket.decorators import accept_websocket
2、加裝飾器@accept_websocket，接收socket請求
3、if request.is_websocket，判斷是否是websocket請求是的話執行我們后端的從數據庫查詢數據的功能
4、通過time.sleep和while循環實現每隔5秒向前端發送數據
4、request.websocket.send(json數據)返回數據到前端，因為這里是json數據格式，所以前端上面要用JSON.parse轉對象，
def webtask_stu(request): if request.is_websocket(): while 1: webtasks = Webtask.objects.all() webtask_stu_list = [] for webtask in webtasks: webtask_stu_list.append(webtask.webtask_stu) dit = {'webtask_stu': webtask_stu_list} time.sleep(5) request.websocket.send(json.dumps(dit))
兩種思路大致如上，實現socket還有其他更高級的api，有興趣可以網上看看學習。