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>
  • 相关阅读:
    PHP 自制日历
    PHP Log时时查看小工具
    JavaScript作用域原理——预编译
    Robot Framework与Web界面自动化测试学习笔记:定位到新窗口
    Robot Framework与Web界面自动化测试学习笔记:简单例子
    Jquery学习笔记:利用find和children方法获取后代元素
    Jquery学习笔记:利用parent和parents方法获取父节点
    Jquery学习笔记:通过层次关系获取jquery对象
    Jquery学习笔记:获取jquery对象的基本方法
    Bootstrap技术: 模式对话框的使用
  • 原文地址:https://www.cnblogs.com/xcsg/p/10729740.html
Copyright © 2011-2022 走看看