zoukankan      html  css  js  c++  java
  • Django2.0.4 + websocket 实现实时通信,主动推送,聊天室及客服系统

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

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

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

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

    1,按装依赖库dwebsocket库

    pip install dwebsocket

    2,定义视图逻辑

    from dwebsocket.decorators import accept_websocket
    
    ## 定时和立即推送任务 @accept_websocket def test_websocket(request): global message_tui_conunt global message_tui_id if request.is_websocket(): while 1: print("————————") if message_tui_conunt: time.sleep(1) dit = {'contnet':message_tui_conunt} request.websocket.send(json.dumps(dit)) message_tui_conunt = '' if message_tui_id: time.sleep(1) res = Messages.objects.get(id=int(message_tui_id)) time_tui = str(res.times) print(time_tui) if time.strftime('%Y-%m-%d %H:%M:%S') == time_tui: dit = {'contnet':res.content} request.websocket.send(json.dumps(dit)) message_tui_id = ''

    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>
  • 相关阅读:
    401. Binary Watch
    46. Permutations
    61. Rotate List
    142. Linked List Cycle II
    86. Partition List
    234. Palindrome Linked List
    19. Remove Nth Node From End of List
    141. Linked List Cycle
    524. Longest Word in Dictionary through Deleting
    android ListView详解
  • 原文地址:https://www.cnblogs.com/xcsg/p/10729740.html
Copyright © 2011-2022 走看看