Django websocket 长链接使用

时间 2020-05-21

原文原文链接

下载 pip install dwebsockethtml

WebSocket是一种在单个TCP链接上进行全双工通讯的协议前端

WebSocket使得客户端和服务器之间的数据交换变得更加简单，容许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只须要完成一次握手，二者之间就直接能够建立持久性的链接，并进行双向数据传输web

如今，不少网站为了实现推送技术，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，而后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器须要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费不少的带宽等资源。json

而比较新的技术去作轮询的效果是Comet。这种技术虽然能够双向通讯，但依然须要反复发出请求。并且在Comet中，广泛采用的长连接，也会消耗服务器资源。后端

在这种状况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，而且可以更实时地进行通信浏览器

1. http协议是用在应用层的协议，他是基于tcp协议的，http协议创建连接也必需要有三次握手才能发送信息。服务器

　　http连接分为短连接，长连接，短连接是每次请求都要三次握手才能发送本身的信息。即每个request对应一个response。长连接是在必定的期限内保持连接。保持TCP链接不断开。客户端与服务器通讯，必需要有客户端发起而后服务器返回结果。客户端是主动的，服务器是被动的。websocket

2. WebSocket socket

　　WebSocket他是为了解决客户端发起多个http请求到服务器资源浏览器必需要通过长时间的轮训问题而生的，他实现了多路复用，他是全双工通讯。在webSocket协议下客服端和浏览器能够同时发送信息。tcp

创建了WenSocket以后服务器没必要在浏览器发送request请求以后才能发送信息到浏览器。这时的服务器已有主动权想何时发就能够发送信息到服务器。并且信息当中没必要在带有head的部分信息了与http的长连接通讯来讲，这种方式，不只能下降服务器的压力。并且信息当中也减小了部分多余的信息。

视图文件向前端发送数据

from dwebsocket.decorators import accept_websocket @accept_websocket def test_websocket(request): if request.is_websocket(): while 1: time.sleep(1) ## 向前端发送时间
            dit = { 'time':time.strftime('%Y.%m.%d %H:%M:%S',time.localtime(time.time())) } request.websocket.send(json.dumps(dit))

视图文件接收前端发送过来的数据

#接受前端信息
@accept_websocket def test_socket(request): if request.is_websocket(): for message in request.websocket: print(message) request.websocket.send(message)

路由文件

from .views import test_socket,test_websocket urlpatterns = [ path('test_socket',test_socket), path('test_websocket',test_websocket), ]

前端链接接收后端给予数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
</body>
<script>
   
   //生成socket对象
   var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_websocket"); socket.onopen = function () { console.log('WebSocket open');//成功链接上Websocket
 }; socket.onmessage = function (e) { console.log('message: ' + e.data);//打印服务端返回的数据
 }; socket.onclose=function(e){ console.log(e); socket.close(); //关闭TCP链接
 }; if (socket.readyState == WebSocket.OPEN){ socket.onopen(); } </script>
</html>

前端链接向后端发送数据

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Chat Room</title>
</head>
<body>
    <input id="chat-message-input" type="text" size="100"/><br/>
    <input id="chat-message-submit" type="button" value="Send" onclick='sendmessage()'/>
</body>
<script>
   
   //生成socket对象 var socket = new WebSocket("ws:" + window.location.host + "/md_admin/test_socket"); socket.onopen = function () { console.log('WebSocket open');//成功链接上Websocket }; socket.onmessage = function (e) { console.log('message: ' + e.data);//打印服务端返回的数据 }; socket.onclose=function(e){ console.log(e); socket.close(); //关闭TCP链接 }; if (socket.readyState == WebSocket.OPEN){ socket.onopen(); } window.s = socket; function sendmessage(){ window.s.send(document.getElementById("chat-message-input").value); } </script>
</html>