websocket 利用json 传递多个参数

54 阅读 0 评论 36 点赞

我是靠谱客的博主体贴小虾米，最近开发中收集的这篇文章主要介绍websocket 利用json 传递多个参数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

目前情况是页面加载完后要从后台获取多个信息,而信息是动态的,这要求我们前端也要动态的显示,查了很多资料,利用websocket终于解决了.其实主要注意一点,websocket的参数是以二进制来传递的,在编写代码时注意编码与解码,就行了.

JS代码:

$(document).ready(function () {

if (window.s) {

window.s.close()

}

var socket = new WebSocket("ws://" + window.location.host + "/echo_once");

socket.onopen = function () {

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

};

socket.onmessage = function (e) {

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

console.log('message: ' + callback.wait_chec);//打印出服务端返回过来的数据

$('#messagecontainer').text(callback.wait_chec);

$('#messagecontain').text(callback.all_data);

$('#messageconta').text(callback.bad_data);

$('#messagecon').text(callback.wait_bad_data);

};

// Call onopen directly if socket is already open

if (socket.readyState == WebSocket.OPEN) socket.onopen();

window.s = socket;
});

后端代码:

@accept_websocket
def echo_once(request):

if not request.is_websocket():
# 判断是不是websocket连接

try:
# 如果是普通的http方法

message = request.GET['message']
return HttpResponse(message)
except:

return render(request, 'index.html')
else:

while True:

all_data = 0
wait_chec = 0
bad_data = 0
wait_check_num = 0 
res = {'wait_chec': str(wait_chec), 'all_data': str(all_data), 'bad_data': str(bad_data), 'wait_bad_data': str(wait_check_num)}
result = json.dumps(res).encode()
request.websocket.send(result)