1：HTML：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线客服系统</title>
</head>

<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>

</body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

        var name = '{{username}}';

        // 发送到连接上去的后台
        var socket = new WebSocket("ws://" + window.location.host + "/websocket/" + name);

        //发送数据到服务端
        socket.onopen = function () {
            alert("您已经连接上客服")
        };

        // 发送按钮点击
        $('#send_message').click(function () {
            $('#messagecontainer').prepend('<p>' + $('#message').val() + '</p>');

            if (!socket) {
                alert("请重新连接")
            } else {
                socket.send($('#message').val());
            }

        });

        // 打印服务端返回的数据  接收消息
        socket.onmessage = function (e) {
            $('#messagecontainer').prepend('<p>' + e.data + '</p>');
        };

        // 错误时
        socket.onerror = function (event) {
            console.log("  websocket.onerror  ");
        };

        // 断开连接时
        $("#close").click(function () {
            if (socket) {
                socket.send("quit");
                alert("已断开连接，客服将收不到您发送的信息")
                socket.close()
            }
        });

        // 监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            socket.close();
        }

        // 发送热键设置
        function inpuKeyDown(event) {
            //  console.log(event)
            if (event.keyCode == 13) {

                // 发送消息
                socket.send($('#message').val());

            }
        }

         // 心跳包
        setInterval(() => {
            socket.send('Hear_t#Beat');
        }, 60000)

    </script>
</html>




 配置：




：url.py



urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url('websocket_client/(?P<username>\w+)', view.websocket_client),

    url('websocket/(?P<username>\w+)', view.websocket),

]

2:settings.py

INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    "dwebsocket",

]

EBSOCKET_ACCEPT_ALL=True   # 可以允许每一个单独的视图实用websockets





 3：view.py:






"""
1 心跳包问题：定时发送标识到后端，返回一个标识，前端叠加变量，超过3次就断开连接
2 一对一指定用户聊天：使用数据库记录两个ID对应的聊天记录，用户访问sockt网页后取出数据发送到聊天框
3 聊天室  将所有用户发送的消息，储存在redis或者session里面，每个用户访问网页后将全部信息遍历发送到对方的聊天框

"""

import json
import time
from dwebsocket.decorators import accept_websocket
from django.shortcuts import render,HttpResponse

# Create your views here.
def websocket_client(request, username):
    return render(request,'index.html',{'username': username})

# 存储连接websocket的用户
clients = []

@accept_websocket
def websocket(request, username):
    try:
        if request.is_websocket():
            print("request",request)

            print("当前用户",username)

            # 是否是第一次连接
            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"))

            print("当前咨询所有用户",clients)

            # 设置发送至前端的次数
            while True:

                # for message in request.websocket:
                message = request.websocket.wait()

                if not message:
                    break
                else:
                    str_message = str(message, 'utf-8')
                    print('message',str_message)

                    # 如果收到是心跳标志 就加1
                    if str_message == "Hear_t#Beat":
                        heart = heart + 1

                    if str_message == 'quit':
                        print("quit里面")
                        clients.remove(username)
                        request.websocket.close() # 关闭服务
                        break

                # 添加到数据库 redis
                # 取到两个用户的数据发送给前台

                # 设置发送前端的数据
                messages = {
                    'time': time.strftime('%Y.%m.%d %H:%M:%S', time.localtime(time.time())),
                    'msg': str_message,
                }

                # 设置发送数据为json格式   回复对应的用户
                request.websocket.send(json.dumps(messages,ensure_ascii=False).encode("utf-8"))
    except:
        pass


 


												


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

    
						
  1. python 全栈开发，Day78(Django组件-forms组件)
		
    一.Django组件-forms组件 forms组件 django中的Form组件有以下几个功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显 ...
    
		
    2. 
						
  2. python 全栈开发，Day76(Django组件-cookie,session)
		
    昨日内容回顾 1 json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy()  ...
    
		
    3. 
						
  3. web 框架的本质及自定义web框架     模板渲染jinja2   mvc 和 mtv框架   Django框架的下载安装   基于Django实现的一个简单示例
		
    Django基础一之web框架的本质 本节目录 一 web框架的本质及自定义web框架 二 模板渲染JinJa2 三 MVC和MTV框架 四 Django的下载安装 五 基于Django实现的一个简单 ...
    
		
    4. 
						
  4. Django组件补充(缓存，信号，序列化)
		
    Django组件补充(缓存,信号,序列化) Django的缓存机制 1.1 缓存介绍 1.缓存的简介 在动态网站中,用户所有的请求,服务器都会去数据库中进行相应的增,删,查,改,渲染模板,执行业务逻辑 ...
    
		
    5. 
						
  5. Django - 文件上传、Django组件 - 分页器（paginator）
		
    一.文件上传准备知识 - Content-Type 1.请求头 - Content-Type Content-Type指的是请求体的编码类型,常见的类型共有3种: 1)application/x-ww ...
    
		
    6. 
						
  6. Django组件-cookie,session
		
    昨日内容回顾: json 轻量级的数据交换格式 在python 序列化方法:json.dumps() 反序列化方法:json.loads() 在JS中: 序列化方法:JSON.stringfy() 反 ...
    
		
    7. 
						
  7. django 实现websocket
		
    一.简述:django实现websocket,之前django-websocket退出到3.0之后,被废弃.官方推荐大家使用channels. channels通过升级http协议 升级到websoc ...
    
		
    8. 
						
  8. Django组件总结
		
    Django组件介绍 分页器的使用 分页器在页面中非常常见,当数据库条数数据过多时,页面一次性显示不好看时,我们可以使用分页器,将数据分几次显示. 1.1 数据库内插入大量数据 Booklist=[] ...
    
		
    9. 
						
  9. Django学习 之 Django安装与一个简单的实例认识
		
    一．Django简介 1.MVC与MTV模型 (1)MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的. ...
    
		
    10. 
						
  10. Django 组件之 ----- content-type
		
    Django 组件之 content-type的使用 一个表和多个表进行关联,但具体随着业务的加深,表不断的增加,关联的数量不断的增加,怎么通过一开始通过表的设计后,不在后期在修改表,彻底的解决这个问 ...
    
		
    11. 
		

	


随机推荐
	

    
									
  1. node+ajax实战案例（6)
			
    8.删除客户 8.1.发送id到后台 删除用户信息比较简单,只需要把对应行的id发送到后台就可以了 oTable.onclick = function (ev) { var ev = ev || ev ...
    
			
    2. 
						
  2. python之浅谈数据类型
			
    什么是数据类型 ​ 数据类型指的就是变量值的不同类型,姓名可能是一种数据类型.年龄可能是一种数据类型.爱好可能又是另一种数据类型,至于是什么数据类型我们将在下一章详细说明. 如何对数据分类 变量的是用 ...
    
			
    3. 
						
  3. 问题记录--jekyll serve 启动的时候如何指定80端口
			
    jekyll serve --host 0.0.0.0 --port 80 启动失败
    
			
    4. 
						
  4. Markdown小白教学15分钟速成
			
    第一部分 基础篇 演示第二阶标题 1.1 目录与标题 代码过程 一级标题: 最高阶标题  基础篇 ===== 二级标题: 演示第二阶标题   一 ----- 注意: 这里"="和& ...
    
			
    5. 
						
  5. css定义变量_css原生变量的使用和兼容 附带还有更高性能，文件更高压缩率的好处
			
    在开发中,css样式有一些属性往往需要重复使用,为了避免代码冗余,降低维护成本.我们需要使用CSS预编译工具[Sass/Less/Stylus],随着这些工具的流行,CSS变量也开始规范制定,目前很多 ...
    
			
    6. 
						
  6. Java嵌套类,内部类和外部类
			
    1.嵌套类,内部类 嵌套类是指被定义在一个类内部的类: JAVA的嵌套类有很多种类:1.静态成员类:2.非静态成员类:3.匿名类:4.局部类:其中,除了静态成员类之外,其他的都是内部类,因为静态成员类 ...
    
			
    7. 
						
  7. PE文件格式详解（八）
			
    0x00 前言 前面了解了PE文件的输入和输出,今天来看看另一个重要的结构——资源.资源结构是很典型的树形结构,层层查找,最终找到资源位置. 0x01 资源结构介绍 Windows程序的各种界面成为资 ...
    
			
    8. 
						
  8. 开源导入导出库Magicodes.IE 多sheet导入教程
			
    原文作者:tanyongzheng 多Sheet导入教程 说明 本教程主要说明如何使用Magicodes.IE.Excel完成多个Sheet数据的Excel导入. 要点 多个相同格式的Sheet数据导 ...
    
			
    9. 
						
  9. Linux系统中到底应该怎么理解系统的平均负载
			
    02 | 基础篇:到底应该怎么理解“平均负载”? 每次发现系统变慢时,我们通常做的第一件事,就是执行 top 或者 uptime 命令,来了解系统的负载情况.比如像下面这样,我在命令行里输入了 upt ...
    
			
    10. 
						
  10. Scala 基础（七）：Scala 运算符
			
    1 算术运算符 算术运算符(arithmetic)是对数值类型的变量进行运算的,在Scala程序中使用的非常多. 细节说明: 1)对于除号“/”,它的整数除和小数除是有区别的:整数之间做除法时,只保留 ...
    
			
    11.