webSocket是一种在单个TCP连接上进行全双工通信的协议。

webSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输

SRE实战 互联网时代守护先锋,助力企业售后服务体系运筹帷幄!一键直达领取阿里云限量特价优惠。

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

基于dwebsocket库来将socket嵌入到django服务中,使其服务兼具http协议和socket协议,能够达到实时前后端通信,后端主动推送等功能。

1,按装依赖库dwebsocket库

pip install dwebsocket

2,定义视图逻辑

from dwebsocket.decorators import accept_websocket


#接收前端信息
@accept_websocket
def test_socket(request):
    if request.is_websocket():
        for message in request.websocket:
            c=str(message,encoding='utf-8')
            print(c)
            request.websocket.send(message)

#主动推送消息
@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))

3,配置路由

path('test_socket',test_socket),
path('test_websocket',test_websocket)

4,前端发送消息页面

<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:127.0.0.1:8000/md_admin/test_socket");
   //#主动推送消息
   var socket = new WebSocket("ws:127.0.0.1:8000/md_admin/test_websocket");
   socket.onopen = function () {
       console.log('WebSocket open');//成功连接上Websocket
   };
   socket.onmessage = function (e) {
    console.log(e.data)
       alert($.parseJSON(e.data).contnet);//打印服务端返回的数据
   };
   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>

 

扫码关注我们
微信号:SRE实战
拒绝背锅 运筹帷幄