java后端如何主动发数据到前端_使用websocket实现后台主动推送数据至前端,可实现时时公告...

后台代码:

@accept_websocket # websocket实时传递变更申请至前端

def get_list(request):

while True:

time.sleep(15)

queryset = ChangeApplicationInfoModel.objects.filter(is_remain=0).order_by("-fd_time")

data_list = []

m = 0

if queryset:

for obj in queryset:

try:

m += 1

str1 = datetime.datetime.strftime(obj.fd_time, "%Y/%m/%d %H:%M:%S")

change_str = obj.fd_name + " " + str1 + " 申请单" + obj.fd_oa_number + "变更"

data_list.append(change_str)

except Exception as e:

print('')

print(data_list)

print(datetime.datetime.now())

request.websocket.send(json.dumps({"list1": data_list}))

image1.png

只需要在视图函数的函数名上加上装饰器即可实现 ,实现了一次前端发送的连接,后台可以一直向前端推送数据

前端代码:

WebSocketTest(){

if ("WebSocket" in window)

{

let vm = this;

// this.lists = [1, 2, 3]

vm.lists = [];

vm.ws = new WebSocket("ws://172.30.244.17:8000/receive/get_list/");

vm.ws.onopen = function () {

console.log('WebSocket open');//成功连接上Websocket

};

vm.ws.onmessage = function (e) {

var res= $.parseJSON(e.data);

vm.lists = res.list1;

console.log(vm.lists); // 此处有值[1,2,3], 但是未能赋值给变量,原因是this指向错误!!

};

}else{

// 浏览器不支持 WebSocket

alert("您的浏览器不支持 WebSocket!");

}

},

image.png