1.websocket说明:
WebSocket是一种在单个TCP连接上进行全双工通信的协议
WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
2.安装dwebsocket
pip3 install dwebsocket
3.修改django项目setting配置文件
INSTALLED_APPS = [ ... ... ... 'dwebsocket', ] WEBSOCKET_ACCEPT_ALL=True # 可以允许每一个单独的视图使用websockets
4.编写views视图代码
from django.shortcuts import render from dwebsocket.decorators import accept_websocket def index(request): return render(request,"index.html") @accept_websocket def get_user_list(request): if request.is_websocket(): message = request.websocket.wait() #接收客户端发来的信息,没有收到信息则会导致阻塞 count = 0 while True: if message: count += 1 request.websocket.send(str(count)) #发送内容必须为str time.sleep(2)
【注释】
dwebsocket有两种装饰器:require_websocket和accept_websocekt,使用require_websocket装饰器会导致视图函数无法接收导致正常的http请求,一般情况使用accept_websocket方式就可以了,
dwebsocket的一些内置方法:
request.is_websocket():判断请求是否是websocket方式,是返回true,否则返回false
request.websocket: 当请求为websocket的时候,会在request中增加一个websocket属性,
WebSocket.wait() 返回客户端发送的一条消息,没有收到消息则会导致阻塞
WebSocket.read() 和wait一样可以接受返回的消息,只是这种是非阻塞的,没有消息返回None
WebSocket.count_messages()返回消息的数量
WebSocket.has_messages()返回是否有新的消息过来
WebSocket.send(message)像客户端发送消息,message为byte类型
5.编写url代码
from django.urls import path from course import views as course_views urlpatterns = [ path('index/', course_views.index), path('get_user_list/', course_views.get_user_list), ]
6.编写前端代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>quick websocket</title> </head> <body> <div class="col-md-offset-1" style="display: inline-block;line-height: 48px;color:orange"> 当前在线人数: <span id="online_number">0</span> </div> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script> // 实时获取当前在线用户人数 var socket = new WebSocket("ws:" + window.location.host + "/get_user_list/"); socket.onopen = function () { console.log('WebSocket open');//成功连接上Websocket socket.send('adasdasda。。。。');//发送数据到服务端 }; socket.onmessage = function (e) { $('#online_number').text(e.data) }; socket.onclose=function(e){ console.log(e); socket.close(); //关闭TCP连接 }; if (socket.readyState == WebSocket.OPEN) socket.onopen(); </script> </body> </html>
7.效果显示