1. 1：HTML：
  1. <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>在线客服系统</title>
    </head>
  2.  
  3. <body>
    {% comment %}    热键  {% endcomment %}
    <input type="text" id="message" value="" onkeydown="inpuKeyDown(event)"/>
    <button type="button" id="send_message">发送 message</button>
    <button type="button" id="close">关闭连接</button>
    <div id="messagecontainer"></div>
  4.  
  5. </body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
  6.  
  7.         var name = '{{username}}';
  8.  
  9.         // 发送到连接上去的后台
            var socket = new WebSocket("ws://" + window.location.host + "/websocket/" + name);
  10.  
  11.         //发送数据到服务端
            socket.onopen = function () {
                alert("您已经连接上客服")
            };
  12.  
  13.         // 发送按钮点击
            $('#send_message').click(function () {
                $('#messagecontainer').prepend('<p>' + $('#message').val() + '</p>');
  14.  
  15.             if (!socket) {
                    alert("请重新连接")
                } else {
                    socket.send($('#message').val());
                }
  16.  
  17.         });
  18.  
  19.         // 打印服务端返回的数据  接收消息
            socket.onmessage = function (e) {
                $('#messagecontainer').prepend('<p>' + e.data + '</p>');
            };
  20.  
  21.         // 错误时
            socket.onerror = function (event) {
                console.log("  websocket.onerror  ");
            };
  22.  
  23.         // 断开连接时
            $("#close").click(function () {
                if (socket) {
                    socket.send("quit");
                    alert("已断开连接，客服将收不到您发送的信息")
                    socket.close()
                }
            });
  24.  
  25.         // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
            window.onbeforeunload = function () {
                socket.close();
            }
  26.  
  27.         // 发送热键设置
            function inpuKeyDown(event) {
                //  console.log(event)
                if (event.keyCode == 13) {
  28.  
  29.                 // 发送消息
                    socket.send($('#message').val());
  30.  
  31.             }
            }
  32.  
  33.          // 心跳包
            setInterval(() => {
                socket.send('Hear_t#Beat');
            }, 60000)
  34.  
  35.     </script>
    </html>
  1.  

 配置：

  1. ：url.py

  3. urlpatterns = [
  4.     url(r'^admin/', admin.site.urls),
  5.     url('websocket_client/(?P<username>\w+)', view.websocket_client),
  6.     url('websocket/(?P<username>\w+)', view.websocket),
  7. ]
  8.  
  9. 2:settings.py
  10.  
  11. INSTALLED_APPS = [
  12.     'django.contrib.admin',
  13.     'django.contrib.auth',
  14.     'django.contrib.contenttypes',
  15.     'django.contrib.sessions',
  16.     'django.contrib.messages',
  17.     'django.contrib.staticfiles',
  18.     "dwebsocket",
  19. ]
  20.  
  21. EBSOCKET_ACCEPT_ALL=True   # 可以允许每一个单独的视图实用websockets

 3：view.py:

  1.  
  1. """
    1 心跳包问题：定时发送标识到后端，返回一个标识，前端叠加变量，超过3次就断开连接
    2 一对一指定用户聊天：使用数据库记录两个ID对应的聊天记录，用户访问sockt网页后取出数据发送到聊天框
    3 聊天室  将所有用户发送的消息，储存在redis或者session里面，每个用户访问网页后将全部信息遍历发送到对方的聊天框
  2.  
  3. """
  4.  
  5. import json
    import time
    from dwebsocket.decorators import accept_websocket
    from django.shortcuts import render,HttpResponse
  6.  
  7. # Create your views here.
    def websocket_client(request, username):
        return render(request,'index.html',{'username': username})
  8.  
  9. # 存储连接websocket的用户
    clients = []
  10.  
  11. @accept_websocket
    def websocket(request, username):
        try:
            if request.is_websocket():
                print("request",request)
  12.  
  13.             print("当前用户",username)
  14.  
  15.             # 是否是第一次连接
                if username not in clients:
                    # 设置发送数据为json格式   回复对应的用户
                    request.websocket.send(json.dumps({"first":"您好，很高兴为您服务,请简单简述您需要提问的问题{}".format(time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())))}, ensure_ascii=False).encode("utf-8"))
                    # 添加用户到已经存在用户
                    clients.append(username)
                else:
                    request.websocket.send(json.dumps({"User":"欢迎回来~"}, ensure_ascii=False).encode("utf-8"))
  16.  
  17.             print("当前咨询所有用户",clients)
  18.  
  19.             # 设置发送至前端的次数
                while True:
  20.  
  21.                 # for message in request.websocket:
                    message = request.websocket.wait()
  22.  
  23.                 if not message:
                        break
                    else:
                        str_message = str(message, 'utf-8')
                        print('message',str_message)
  24.  
  25.                     # 如果收到是心跳标志 就加1
                        if str_message == "Hear_t#Beat":
                            heart = heart + 1
  26.  
  27.                     if str_message == 'quit':
                            print("quit里面")
                            clients.remove(username)
                            request.websocket.close() # 关闭服务
                            break
  28.  
  29.                 # 添加到数据库 redis
                    # 取到两个用户的数据发送给前台
  30.  
  31.                 # 设置发送前端的数据
                    messages = {
                        'time': time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())),
                        'msg': str_message,
                    }
  32.  
  33.                 # 设置发送数据为json格式   回复对应的用户
                    request.websocket.send(json.dumps(messages,ensure_ascii=False).encode("utf-8"))
        except:
            pass
  1.  

【Django组件】WebSocket的简单实现的更多相关文章

  1. python 全栈开发，Day78(Django组件-forms组件)

    一.Django组件-forms组件 forms组件 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显 ...

  2. python 全栈开发，Day76(Django组件-cookie,session)

    昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() ...

  3. web 框架的本质及自定义web框架 模板渲染jinja2 mvc 和 mtv框架 Django框架的下载安装 基于Django实现的一个简单示例

    Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...

  4. Django组件补充(缓存，信号，序列化)

    Django组件补充(缓存,信号,序列化) Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑 ...

  5. Django - 文件上传、Django组件 - 分页器（paginator）

    一.文件上传准备知识 - Content-Type 1.请求头 - Content-Type Content-Type指的是请求体的编码类型,常见的类型共有3种: 1)application/x-ww ...

  6. Django组件-cookie,session

    昨日内容回顾: json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() 反 ...

  7. django 实现websocket

    一.简述:django实现websocket,之前django-websocket退出到3.0之后,被废弃.官方推荐大家使用channels. channels通过升级http协议 升级到websoc ...

  8. Django组件总结

    Django组件介绍 分页器的使用 分页器在页面中非常常见,当数据库条数数据过多时,页面一次性显示不好看时,我们可以使用分页器,将数据分几次显示. 1.1 数据库内插入大量数据 Booklist=[] ...

  9. Django学习 之 Django安装与一个简单的实例认识

    一．Django简介 1.MVC与MTV模型 (1)MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的. ...

  10. Django 组件之 ----- content-type

    Django 组件之 content-type的使用 一个表和多个表进行关联,但具体随着业务的加深,表不断的增加,关联的数量不断的增加,怎么通过一开始通过表的设计后,不在后期在修改表,彻底的解决这个问 ...

随机推荐

  1. mpvue实战-手势滑动导航栏

    写点东西记录一下美好时光,上周学习了一下通过mpuve开发微信小程序,看完文档,就准备撸起袖子加油干的时候,一开始就被支持手势滑动的导航栏给搞懵逼了.求助一波百度和谷歌未果后,只能自己动脑动手!为了给 ...

  2. 华为云—环境安装(jdk安装，tomcat安装)

    前言 在前面咱们讲到华为云的购买以及一些配置,通过上一文即可获得一个可以直接访问使用的云服务器.但是对于不同的人群服务器的使用用途可能不同,对于咱们大部分的java程序员来说,jdk.tomcat.m ...

  3. 03.springboot 整合RabbitMQ

    1.引入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  4. 从零创建发布属于自己的composer包

    原文地址:https://www.wjcms.net/archives/从零创建发布属于自己的composer包 今天给大家讲解一下如何从零创建发布属于自己的composer包. composer包用 ...

  5. 日期推算：datetime

    >>> import datetime >>> datetime.datetime.now() datetime.datetime(2020, 5, 20, 23, ...

  6. ELKF-分布式日志收集分析平台搭建 最小化 配置过程 - 查看收集日志（windows10下搭建）

    前言 Elasticsearch是与名为Logstash的数据收集和日志解析引擎以及名为Kibana的分析和可视化平台一起开发的.这三个产品被设计成一个集成解决方案,称为“Elastic Stack” ...

  7. [BSidesCF 2020]Had a bad day

    [BSidesCF 2020]Had a bad day 测试 一些猫狗的图片加上url有传参,测试到文件包含时报错了. 使用php伪协议: php伪协议 php://fliter/read=conv ...

  8. electron设置window系统托盘

    electron设置托盘 // 设置系统托盘 const setAppTray = () => { // 托盘对象 var appTray = null // 系统托盘右键菜单 var tray ...

  9. flask 源码专题（七）：threading.local和高级

    1.python之threading.local 当每个线程在执行 val.num=1 ,在内部会为此线程开辟一个空间,来存储 num=1 val.num,找到此线程自己的内存地址去取自己存储 num ...

  10. redis（九)：Redis 哈希(Hash)（python）

    # -*- coding: utf-8 -*- import redis #这个redis不能用,请根据自己的需要修改 r =redis.Redis(host="123.56.74.190& ...