API.PY

import queue
from django.contrib.auth.hashers import check_password
from rest_framework.views import APIView
from Databases import models
from django.http import JsonResponse
import traceback
from utils import common_md5
from django.contrib.auth.hashers import make_password from utils.computer_time import now QUEUE_DICT={} class Login(APIView):
permission_classes = []
authentication_classes = [] def post(self, request): username = str(request.data.get("username"))
password = str(request.data.get("password")) message = {}
try:
# auth password
md5_password = models.UserInfo.objects.filter(username=username).values('password')[0]['password']
res = check_password(password, md5_password) if not res:
message['code'] = 444
message['message'] = "账号或者密码错误"
return JsonResponse(message) # made token
t = common_md5.md5(username)
# get user_id object
user_obj = models.UserInfo.objects.filter(username=username).first()
# if exist update || if not add data
models.Token.objects.update_or_create(user=user_obj, defaults={'token': t})
# madke token "31e02e07d0b010769d847e40e1a1bb19:123:7:True"
token = t + ":" + username + ":" + str(user_obj.pk) + ":" + str(user_obj.is_staff) # 将登录的用户设置一个消息队列
QUEUE_DICT[username] =
queue.Queue() message['code'] = 200
message['token'] = token
return JsonResponse(message)
except:
print(traceback.print_exc())
message['code'] = 444
message['message'] = "登录失败"
return JsonResponse(message) class Register(APIView):
permission_classes = []
authentication_classes = [] def post(self,request): username = str(request.data.get("register_username"))
password = str(request.data.get("register_password")) message = {}
# create user
try:
# made user md5 password
models.UserInfo.objects.create(username=username, password=make_password(password))
message['code'] = 200
message['message'] = "注册成功"
return JsonResponse(message)
except Exception as e: message['code'] = 444
message['message'] = "注册失败"
return JsonResponse(message) class MeesageSend(APIView):
"""
每次发送都给每个人的队列放一个消息
"""
def post(self,request): msg = request.data.get('msg')
message = {}
try:
# 给每个用户队列添加消息
for i in QUEUE_DICT.values():
i.put(now() + "---" + request.user + "---" +
msg)

message['code'] = 200
return JsonResponse(message)
except Exception as e:
message['code'] = 444
return JsonResponse(message) class MeesageGet(APIView): def get(self,request):
message = {}
try:
# 每个用户获取自己的队列消息
q = QUEUE_DICT[request.user]
data = q.get(timeout=600
)
message['code'] = 200
message['data'] = data
except queue.Empty as e:
message['code'] = 444
return JsonResponse(message)

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Talking</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
#taking {
width: 100%;
height: 700px;
background: #42fbff;
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="card-header">在线聊天室</div>
<div id="taking">
<ul v-for="item in talking">
<li>{%verbatim %} {{ item }}{% endverbatim %}</li>
</ul>
</div>
<div style="width: 100%;height: 80px">
<textarea type="text" v-model="msg" placeholder="请输入内容" style="width: 100%;height: 100%"></textarea>
</div>
<button class="btn btn-primary" style="width: 100px" @click="send">发送</button>
</div>

</body>
</html>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script>
var vm = new Vue({
el: '#app',
data: {
username: "",
msg: "",
talking:[]
},
created() {
axios.defaults.headers.common['authenticate'] = sessionStorage.getItem('token')
// 判断是否已经登录
this.username = sessionStorage.getItem("username");
if (this.username == null) {
window.location.href = "/login"
} this.fun() }, methods: {
send() {
axios.defaults.headers.common['authenticate'] = sessionStorage.getItem('token')
axios.post('/send/message/', {
msg: this.msg,
})
.then(response => {
if (response.data['code'] == 200) {
alert("发送成功")
} else if (response.data['code'] == 444) {
alert("发送失败")
}
}).catch(error => {
console.log(error)
alert("请求异常")
})
}, fun() {
console.log(
"111111")
axios.get('/get/message/', {})
.then(response => {
if (response.data['code'] == 200) {
this.talking.push(response.data.data)
} else if (response.data['code'] == 444) { }
this.fun()
}).catch(error => {
console.log(error)
alert("断开连接"
)
})
}
},
})
</script>

【django】长轮询的更多相关文章

  1. http长轮询&短轮询

    http 协议介绍: http 协议是请求/响应范式的, 每一个 http 响应都是由一个对应的 http 请求产生的; http 协议是无状态的, 多个 http 请求之间是没有关系的. http ...

  2. 三周,用长轮询实现Chat并迁移到Azure测试

    公司的OA从零开始进行开发,继简单的单点登陆.角色与权限.消息中间件之后,轮到在线即时通信的模块需要我独立去完成.这三周除了逛网店见爱*看动漫接兼职,基本上都花在这上面了.简单地说就是用MVC4基于长 ...

  3. 用.NET MVC实现长轮询,与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  4. 分享一个基于长连接+长轮询+原生的JS及AJAX实现的多人在线即时交流聊天室

    实现网页版的在线聊天室的方法有很多,在没有来到HTML5之前,常见的有:定时轮询.长连接+长轮询.基于第三方插件(如FLASH的Socket),而如果是HTML5,则比较简单,可以直接使用WebSoc ...

  5. 网页实时聊天之js和jQuery实现ajax长轮询

    众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...

  6. 误人子弟的网络,谈谈HTTP协议中的短轮询、长轮询、长连接和短连接

    引言 最近刚到公司不到一个月,正处于熟悉项目和源码的阶段,因此最近经常会看一些源码.在研究一个项目的时候,源码里面用到了HTTP的长轮询.由于之前没太接触过,因此LZ便趁着这个机会,好好了解了一下HT ...

  7. Comet 反Ajax: jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...

  8. Web 通信 之 长连接、长轮询(转)

    Web 通信 之 长连接.长轮询(long polling) 基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强 ...

  9. Web 通信 之 长连接、长轮询(long polling)

    基于HTTP的长连接,是一种通过长轮询方式实现"服务器推"的技术,它弥补了HTTP简单的请求应答模式的不足,极大地增强了程序的实时性和交互性. 一.什么是长连接.长轮询? 用通俗易 ...

  10. Gevent的长轮询实现方法详解

    长轮询 1.浏览网页时,浏览器会传HTTP 请求到服务器,服务器会根据请求将网页的内容传给浏览器,但是在很多的情况下,使用者会需要看到最新的即时性资讯,例如观看股票市场行情,而在以前只能靠着重新载入网 ...

随机推荐

  1. mycat 单库分表实践

    参考 https://blog.csdn.net/sq2006hjp/article/details/78732227 Mycat采用的水平拆分,不管是分库还是分表,都是水平拆分的.分库是指,把一个大 ...

  2. 多测师讲解html _表格标签007_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>表 ...

  3. 第一个月多测师讲解__项目讲解以及注意事项(肖sir)

    一.目的讲解流程:(讲述业务时长10-15分钟为宜)1.自我介绍礼貌用语,姓名,籍贯,学校,个人技能,经验,表现,兴趣爱好等 ,1分钟 ,谢谢2.介绍项目的名字 ,项目的背景,(涉及什么架构)3.对项 ...

  4. 【C++设计模式二】工厂模式

    (1)定义3 简单工厂模式中,每新增一个具体产品,就需要修改工厂类内部的判断逻辑.为了不修改工厂类,遵循开闭原则,工厂方法模式中不再使用工厂类统一创建所有的具体产品,而是针对不同的产品设计了不同的工厂 ...

  5. MeteoInfoLab脚本示例:闪电位置图

    这个脚本示例读取文本格式的闪电数据,读出每条闪电记录的经纬度和强度,在地图上绘制出每个闪电的位置,并用符号和颜色区分强度正负.数据格式如下:0 2009-06-06 00:01:16.6195722 ...

  6. Asp常见函数

    ASP语言的特点: 1.允许使用VBscript或java script简易Script语言,并可在文件中结合Html: 2.无需编译,由WEBserver执行产生: 3.与任何ActiveX Scr ...

  7. Kibana详细入门教程

    Kibana详细入门教程   目录 一.Kibana是什么 二.如何安装 三.如何加载自定义索引 四.如何搜索数据 五.如何切换中文 六.如何使用控制台 七.如何使用可视化 八.如何使用仪表盘 一.K ...

  8. spring boot: 从配置文件中读取数据的常用方法(spring boot 2.3.4)

    一,从配置文件中读取数据有哪些方法? 通常有3种用法: 1,直接使用value注解引用得到配置项的值 2,  封装到Component类中再调用 3,  用Environment类从代码中直接访问 生 ...

  9. spring boot:使用caffeine+redis做二级缓存(spring boot 2.3.1)

    一,为什么要使用二级缓存? 我们通常会使用caffeine做本地缓存(或者叫做进程内缓存), 它的优点是速度快,操作方便,缺点是不方便管理,不方便扩展 而通常会使用redis作为分布式缓存, 它的优点 ...

  10. Vue踩坑日记-Element this.$message 找不到模块

    在使用Vue.js的 Element框架时,无法使用Message组件 浏览器提示:找不到组件 原始写法: this.$message({ message: '恭喜你,这是一条成功消息', type: ...