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. 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. JavaScript基础使用parseInt()转换整数(005)

    parseInt()可以把一个字符串格式的整数解析一个整数数值,如"32 days"将被解析为32.这个函数还接受第二个参数,指定整数的进制(当然,一般来说应该是十进制).一个好的 ...

  2. [CEOI1999]Parity Game 题解

    P5937 [CEOI1999]Parity Game 洛谷P5937 P5937 [CEOI1999]Parity Game 前言: 个人感觉这道题初看想不到并查集啊!(说实话我题都没读懂,第二遍才 ...

  3. Yolo训练自定义目标检测

    Yolo训练自定义目标检测 参考darknet:https://pjreddie.com/darknet/yolo/ 1. 下载darknet 在 https://github.com/pjreddi ...

  4. (私人收藏)python学习(游戏、爬虫、排序、练习题、错误总结)

    python学习(游戏.爬虫.排序.练习题.错误总结) https://pan.baidu.com/s/1dPzSoZdULHElKvb57kuKSgl7bz python100经典练习题python ...

  5. HTML5全局属性汇总

    局部属性和全局属性 局部属性:有些元素能规定自己的属性,这种属性称为局部属性.比如link元素,它具有的局部属性有href. rel. hreflang. media. type. sizes这六个. ...

  6. POJ 3057 Evacuation 题解

    题目 Fires can be disastrous, especially when a fire breaks out in a room that is completely filled wi ...

  7. ATM + 购物车项目

    ''' 存放配置文件 ''' import os #获取项目根目录 BASE_PATH=os.path.dirname(os.path.dirname(__file__)) #获取用户目录 USER_ ...

  8. day47 作业

    表准备 create table emp( id int not null unique auto_increment, name varchar(20) not null, sex enum('ma ...

  9. Linux上运行安卓应用:安装使用Anbox

    文章目录 #0x0 简介 #0x1 安装教程 #0x11 第一步,安装需要的内核模块 #0x12 安装Anbox #0x2 使用Anbox #0x21 一些简单的设置 #0x22 安装APK #0x3 ...

  10. 数据可视化基础专题(六):Pandas基础(五) 索引和数据选择器(查找)

    1.序言 如何切片,切块,以及通常获取和设置pandas对象的子集 2.索引的不同选择 对象选择已经有许多用户请求的添加,以支持更明确的基于位置的索引.Pandas现在支持三种类型的多轴索引. .lo ...