Use django websocket chat room and allows easy
django default only supports the http protocol
If you want django which is to support the http protocol and protocol support websocket, you need to do the following configuration
Pre-configuration
Premise need to install channels:
channles installation:
"""
注意事项
1.不要安装最新版本的channles，建议安装2.3版本即可
2.python解释器建议使用3.6
"""
pip3 install channels==2.31. The application configuration file registration channels
INSTALLED_APPS = [
# 1 注册channles应用
'channels'
]2.settings.py profile configuration parameters
# 2 配置启动需要的参数
ASGI_APPLICATION = 'myapi.routing.application'
# ASGI_APPLICATION = '项目名同名的文件夹名.内部的py文件名(默认就叫routing).routing文件内的变量名(默认就叫application)'3. Fixed Configuration
# 在项目名同名的文件夹下创建routing.py文件并在该文件内提前写好以下代码
from channels.routing import ProtocolTypeRouter,URLRouter
from django.conf.urls import url
from app01 import consumers
application =ProtocolTypeRouter({
'websocket':URLRouter([
# websocket请求路由与视图函数的对应关系
url(r'^chat/$',consumers.ChatConsumer)
])
})Summary: After configuration from the original default django wsgiref replaced asgi start (internal asgi is based on Daphne)
After the configuration, django will support both http protocol and protocol websocket
"""
原先基于http协议的路由与视图函数对应关系还是跟之前一样urls.py、views.py
针对websocket协议的路由与视图函数对应关系则需要在routing.py和consumers.py(在对应的应用下创建即可)
"""Business logic code
# consumers.py
from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
class ChatConsumer(WebsocketConsumer):
def websocket_connect(self, message):
"""
客户端请求链接之后自动触发
:param message: 消息数据
"""
pass
def websocket_receive(self, message):
"""
客户端浏览器发送消息来的时候自动触发
:param message: 消息数据
"""
pass
def websocket_disconnect(self, message):
"""
客户端断开链接之后自动触发
:param message:
"""
passChannels based on the completion of the chat room
"""
http协议
index >>> index函数
访问：浏览器发送请求即可
websocket协议
chat >>> ChatConsumer类(3个方法)
访问:借助于new WebSocket对象
"""from channels.generic.websocket import WebsocketConsumer
from channels.exceptions import StopConsumer
consumer_object_list = []
class ChatConsumer(WebsocketConsumer):
def websocket_connect(self, message):
"""
客户端请求链接之后自动触发
:param message: 消息数据
"""
# print('请求链接')
self.accept() # 建立链接
# 链接成功之后就将当前链接对象往列表中存一份
consumer_object_list.append(self)
def websocket_receive(self, message):
"""
客户端浏览器发送消息来的时候自动触发
:param message: 消息数据 {'type': 'websocket.receive', 'text': '你好啊 美女'}
"""
# print(message)
text = message.get('text')
# 给客户端回复消息
# self.send(text_data=text)
# 我们要给所有的链接对象回复消息
# 实现群发的简易版本
for obj in consumer_object_list:
obj.send(text_data=text)
def websocket_disconnect(self, message):
"""
客户端断开链接之后自动触发
:param message:
"""
# 客户端断开链接之后 应该将当前客户端对象从列表中移除
consumer_object_list.remove(self)
raise StopConsumer() # 主动报异常 无需做处理 内部自动捕获<h1>聊天室</h1>
<div>
<input type="text" id="text" placeholder="请输入">
<input type="button" value="发送" onclick="sendMsg()">
<input type="button" value="断开链接" onclick="close()">
</div>
<h1>聊天纪录</h1>
<div id="content">
</div>
<script>
var ws = new WebSocket('ws://127.0.0.1:8000/chat/');
// 1 发送消息 ws.send()
// 2 握手成功之后 自动触发 ws.onopen
// 3 服务端发送消息过来 自动触发 ws.onmessage
// 4 断开链接 ws.close()
// 0 握手成功之后自动触发
ws.onopen = function () {
alert('建立成功')
};
// 1 给服务端发送消息
function sendMsg() {
ws.send($('#text').val());
}
// 2 接受服务端发送过来的消息
ws.onmessage = function (event) { // event是对象
var dataValue = event.data; // 获取服务端的数据
// 用DOM操作将数据动态渲染到页面上
var pEle = $('<p>');
pEle.text(dataValue);
$('#content').append(pEle)
};
// 3 断开链接
function close() {
ws.close()
}
</script>to sum up
"""
后端三个方法
websocket_connect
websocket_receive
websocket_disconnect
前端四个方法
// 1 发送消息 ws.send()
// 2 握手成功之后 自动触发 ws.onopen
// 3 服务端发送消息过来 自动触发 ws.onmessage
// 4 断开链接 ws.close()
"""We note that the above code to achieve the group chat feature is not really a reasonable, if you want to truly follow-up group chat feature, provides a method for official channel-layers module,