前言
曾经写过一篇关于普通websocket的实现方法,封装层级比较低,不支持django使用。
一、介绍
django实现websocket,有两种方式
- 早期django使用dwebsocket实现websocket,后来高版本django就不再兼容维护dwebsocket了
- 目前较为流行的是使用channels实现websocket
二、dwebsocket实现websocket
版本号:
- django:不同版本采用不同方法
- dwebsocket:0.5.12
2.1、路由
在某APP的urls里面填写路由配置
from django.urls import path
path('websocketLink/<label>/', websocketLink)
2.2、后端
在某APP的views里面填写后端代码
import json
from dwebsocket.decorators import accept_websocket, require_websocket
# 存储连接websocket的用户
clients = {}
# 记录连接人数 其实没什么卵用 = =
count = 0
# 连接websocket ws://localhost:8000/websocketLink/22/
# 因为 websocket 是协议 所以不能用 http或https
# @accept_websocket
@require_websocket
def websocketLink(request, label):
'连接websocket'
global count
# 获取连接
if request.is_websocket:
try:
s = {} # 多个页面请求同一websocket地址,连接信息是不同的,通过s进行收集并按照标签label存入clients中
s[str(request.websocket)] = request.websocket
if clients.get(label) == None:
# 第一次请求地址时, 人数加一
count = count + 1
clients[label] = s
else:
clients[label].update(s)
print("当前地址连接用户人数:{},标签为{}".format(str(count), label))
print("增加当前客户端后,已存在的客户端数量:{}".format(len(clients[label])))
"""当django版本很旧的时候(我用的是2.0.8至2.1.3任一版本),可以用最简单的方法"""
for msg in request.websocket:
if msg == None:
print("客户端关闭,接收到的msg为None。将clients中该客户端清除")
clients.get(label).pop(str(request.websocket))
else:
msg = json.loads(msg)
print("Received data from {},数据为 {}".format(label, msg))
send(label, msg)
"""当django版本升级后,我使用的下面的方法监听,但效果并不好,因为使用时每一个websocket都占用一个线程,当数量特别多是,那么将会导致服务器资源无端占用,降低服务器响应速度。"""
"""
# 开启线程来监听socket信息
n = Thread(target=test, args=(label, request.websocket))
n.start()
# 有可能是django版本升级后长连接功能被破坏了,所以自写了一个while语法保持长连接。还是推荐使用低配django版本(因为它自带长连接)
while 1:
import time
time.sleep(10)
pass
"""
except Exception as e:
print(e)
# 发送消息
def websocketMsg(client_socket_dict, data):
# 因为一个账号会有多个页面打开 所以连接信息需要遍历
data = json.dumps(data).encode('utf-8')
for cli in client_socket_dict:
client_socket_dict[cli].send(data)
# 服务端发送消息
def send(label, data):
websocketMsg(clients[label], data)
def test(label, client_socket):
# 持续等待接收从客户端发来的消息并将消息广播到所有的socket客户端
while 1:
data = client_socket.wait()
if data == None:
# 客户端连接断开时,msg结果为None。需要两步:1、websocket收集列表client清除当前websocket连接2、退出当前客户端开启的websocket监听多线程
print("客户端关闭,执行后端逻辑")
clients.get(label).pop(str(client_socket))
break
else:
# 正常接收到消息处理逻辑
data = json.loads(data)
print("Received data from {},数据为 {}".format(label, data))
send(label, data)
2.3、前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text">
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
var websocket = new WebSocket("ws://127.0.0.1:8000/websocketLink/test/");
// 引入websocket
websocket.onopen = function () {
console.log('websocket open');
let obj = JSON.stringify({ type: "set_channel", content: "222",channel:"sasaas12"})
setTimeout(()=>{websocket.send(obj)},5000)
document.getElementById("recv").innerHTML = "Connected";
}
// 结束websocket
websocket.onclose = function () {
console.log('websocket close');
}
websocket.onerror = function () {
console.log('websocket error')
}
// 接受到信息
websocket.onmessage = function (e) {
console.log(e.data);
document.getElementById("recv").innerHTML = e.data;
}
// 点击发送webscoket
document.getElementById("sendBtn").onclick = function () {
var txt = document.getElementById("sendTxt").value;
websocket.send(JSON.stringify({ type: "chagne", content: txt,channel:"sasaasa" }));
}
</script>
<!-- <script>
import { message } from 'antd';
class WebSocketClass {
constructor() {
this.instance = null;
this.connect();
}
static getInstance() {
if (!this.instance) {
this.instance = new WebSocketClass();
}
return this.instance;
}
connect() {
this.ws = new WebSocket('ws://xxxx');
this.ws.onopen = e => {
this.status = 'open';
message.info('连接成功');
console.log(`连接成功`, e);
this.heartCheck();
this.getMessage();
};
}
heartCheck() {
// 心跳机制的时间可以自己与后端约定
this.pingPong = 'ping'; // ws的心跳机制状态值
this.pingInterval = setInterval(() => {
if (this.ws.readyState === 1) {
// 检查ws为链接状态 才可发送
this.ws.send('ping'); // 客户端发送ping
}
}, 10000);
this.pongInterval = setInterval(() => {
if (this.pingPong === 'ping') {
this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
}
// 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong),将重启
console.log('返回pong');
this.pingPong = 'ping';
}, 20000);
}
closeHandle(e = 'err') {
// 因为webSocket并不稳定,规定只能手动关闭(调closeMyself方法),否则就重连
if (this.status !== 'close') {
console.log(`断开,重连websocket`, e);
if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
// 清除定时器
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
}
this.connect(); // 重连
} else {
console.log(`websocket手动关闭,或者正在连接`);
}
}
getMessage() {
this.ws.onmessage = e => {
if (e.data === 'pong') {
this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
} else {
message.info(e.data);
}
console.log(e.data);
return e.data;
};
}
close() {
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
this.status = 'close';
this.ws.send('close');
this.ws.close();
message.info('已断开连接');
console.log('close');
}
}
export default new WebSocketClass();
</script> -->
</body>
</html>
三、channels实现websocket
版本号:
- channels:2.2.0(只能实现单用户通信)
- channels-redis:2.4.2(通道作用,配合channels包实现多用户通信)
- django:
channels运行于ASGI协议上,ASGI的全名是Asynchronous Server Gateway Interface。它是区别于Django使用的WSGI协议 的一种异步服务网关接口协议,正是因为它才实现了websocket
3.1、setting配置
# APPS中添加channels
INSTALLED_APPS = [
'django.contrib.staticfiles',
'channels',
]
# 指定ASGI的路由地址,格式<<app.routing.application>>
ASGI_APPLICATION = 'tests.routing.application'
3.2、在tests(app的名字)下的routing.py文件(创建)中写入以下内容
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from tests.urls import websocket_urlpatterns
application = ProtocolTypeRouter({
"websocket": AuthMiddlewareStack(
URLRouter(
websocket_urlpatterns
)
)
})
至此Django已经基本集成了Channels框架,可以启动python manage.py runserver 0.0.0.0:8000
试一下哦。这个时候呢项目启动已经由django使用的WSGI协议转换为了Channels使用的ASGI协议了
3.3、加入websocket通信之url配置
from django.urls import path
from tests.views import ChatConsumer
websocket_urlpatterns = [
path('socket/', ChatConsumer, name='websocket-url')
]
3.4、加入websocket通信之前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Echo Test</h1>
<input id="sendTxt" type="text">
<button id="sendBtn">发送</button>
<div id="recv"></div>
<script type="text/javascript">
var websocket = new WebSocket("ws://127.0.0.1:8000/socket/");
// 引入websocket
websocket.onopen = function () {
console.log('websocket open');
let obj = JSON.stringify({ type: "set_channel", content: "222",channel:"sasaas12"})
setTimeout(()=>{websocket.send(obj)},5000)
document.getElementById("recv").innerHTML = "Connected";
}
// 结束websocket
websocket.onclose = function () {
console.log('websocket close');
}
websocket.onerror = function () {
console.log('websocket error')
}
// 接受到信息
websocket.onmessage = function (e) {
console.log(e.data);
document.getElementById("recv").innerHTML = e.data;
}
// 点击发送webscoket
document.getElementById("sendBtn").onclick = function () {
var txt = document.getElementById("sendTxt").value;
websocket.send(JSON.stringify({ type: "chagne", content: txt,channel:"sasaasa" }));
}
</script>
<!-- <script>
import { message } from 'antd';
class WebSocketClass {
constructor() {
this.instance = null;
this.connect();
}
static getInstance() {
if (!this.instance) {
this.instance = new WebSocketClass();
}
return this.instance;
}
connect() {
this.ws = new WebSocket('ws://xxxx');
this.ws.onopen = e => {
this.status = 'open';
message.info('连接成功');
console.log(`连接成功`, e);
this.heartCheck();
this.getMessage();
};
}
heartCheck() {
// 心跳机制的时间可以自己与后端约定
this.pingPong = 'ping'; // ws的心跳机制状态值
this.pingInterval = setInterval(() => {
if (this.ws.readyState === 1) {
// 检查ws为链接状态 才可发送
this.ws.send('ping'); // 客户端发送ping
}
}, 10000);
this.pongInterval = setInterval(() => {
if (this.pingPong === 'ping') {
this.closeHandle('pingPong没有改变为pong'); // 没有返回pong 重启webSocket
}
// 重置为ping 若下一次 ping 发送失败 或者pong返回失败(pingPong不会改成pong),将重启
console.log('返回pong');
this.pingPong = 'ping';
}, 20000);
}
closeHandle(e = 'err') {
// 因为webSocket并不稳定,规定只能手动关闭(调closeMyself方法),否则就重连
if (this.status !== 'close') {
console.log(`断开,重连websocket`, e);
if (this.pingInterval !== undefined && this.pongInterval !== undefined) {
// 清除定时器
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
}
this.connect(); // 重连
} else {
console.log(`websocket手动关闭,或者正在连接`);
}
}
getMessage() {
this.ws.onmessage = e => {
if (e.data === 'pong') {
this.pingPong = 'pong'; // 服务器端返回pong,修改pingPong的状态
} else {
message.info(e.data);
}
console.log(e.data);
return e.data;
};
}
close() {
clearInterval(this.pingInterval);
clearInterval(this.pongInterval);
this.status = 'close';
this.ws.send('close');
this.ws.close();
message.info('已断开连接');
console.log('close');
}
}
export default new WebSocketClass();
</script> -->
</body>
</html>
3.5、加入websocket通信之views后端<<单用户通信>>逻辑代码:同步
import json
from channels.generic.websocket import WebsocketConsumer
class ChatConsumer(WebsocketConsumer):
def connect(self):
# TODO 连接建立时触发
print("连接成功")
self.accept()
def disconnect(self, close_code):
# TODO 关闭连接时触发
print("已断开连接")
def receive(self, text_data=None, bytes_data=None):
# TODO 收到消息后触发
text_data_json = json.loads(text_data)
text_data_json.update({'TEST_MSG': '123456789'})
self.send(text_data=json.dumps({
'message': text_data_json
}))
至此,启动python manage.py runserver 0.0.0.0:8000
即可实现数据自发自接,但只是单用户通信。但这肯定是不满足聊天室多用户通信的,那么就需要引入Channel Layer来实现,它是以redis作为通道来用户分组并进行数据的分发
3.6、加入websocket通信之views后端<<多用户通信>>逻辑代码:同步
①setting中添加对Channel Layer的支持(需要保证redis已安装以及redis端口为6379)
CHANNEL_LAYERS = {
'default': {
'BACKEND': 'channels_redis.core.RedisChannelLayer',
'CONFIG': {
"hosts": [('127.0.0.1', 6379)],
},
},
}
②验证redis通道层是否正常
③将原views中的ChatConsumer类代码更新迭代
import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
class ChatConsumer(WebsocketConsumer):
def connect(self):
# TODO 连接建立时触发
print("连接成功")
# 创建组名称
self.room_group_name = 'test'
# 将新websocket连接加入组中
async_to_sync(self.channel_layer.group_add)(self.room_group_name, self.channel_name)
self.accept()
def disconnect(self, close_code):
# 关闭连接时触发
print("已断开连接")
# 将断开时将websocket从组中退出
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name,
self.channel_name
)
def receive(self, text_data=None, bytes_data=None):
# TODO 收到消息后触发
text_data_json = json.loads(text_data)
# 向同一个组内的所有websocket客户端发送消息,type为调用函数处理消息
async_to_sync(self.channel_layer.group_send)(
self.room_group_name,
{
'type': 'chat_message',
'message': text_data_json
}
)
def chat_message(self, text_data_json):
text_data_json.update({'TEST_MSG': '123456789'})
self.send(text_data=json.dumps({
'message': text_data_json
}))
3.7、加入websocket通信之views后端<<多用户通信>>逻辑代码:异步
异步主要使用协程async与同步差别不大
- ChatConsumer由WebsocketConsumer修改为了AsyncWebsocketConsumer
- 所有的方法都修改为了异步defasync def
- 用await来实现异步I/O的调用
- channel layer也不再需要使用async_to_sync了
import json
from channels.generic.websocket import AsyncWebsocketConsumer
class ChatConsumer(AsyncWebsocketConsumer):
async def connect(self):
# TODO 连接建立时触发
print("连接成功")
# 创建组名称
self.room_group_name = 'test'
# 将新websocket连接加入组中
await self.channel_layer.group_add(self.room_group_name, self.channel_name)
await self.accept()
async def disconnect(self, close_code):
# 关闭连接时触发
print("已断开连接")
# 将断开时将websocket从组中退出
await self.channel_layer.group_discard(
self.room_group_name,
self.channel_name
)
async def receive(self, text_data=None, bytes_data=None):
# TODO 收到消息后触发
text_data_json = json.loads(text_data)
# 向同一个组内的所有websocket客户端发送消息,type为调用函数处理消息
await self.channel_layer.group_send(
self.room_group_name,
{
'type': 'chat_message',
'message': text_data_json
}
)
async def chat_message(self, text_data_json):
text_data_json.update({'TEST_MSG': '123456789'})
await self.send(text_data=json.dumps({
'message': text_data_json
}))
3.8、参考地址
3.9、总结
一个完全异步且功能完整的聊天室已经构建完成了,快去试试吧!!!