Django使用WebSocket实现富婆聊天群
WebSocket协议与HTTP的主要区别：HTTP是无状态协议，由客户端发起请求，客户端与服务器“一问一答”，因此服务器端无法主动向客户端发送信息。而WebSocket是基于TCP长连接的协议，客户端与服务器建立连接后，服务器端随时能向客户端发送信息。
WebSocket协议的主要价值在于其与HTTP的差异（服务器端与客户端能够保持实时的双向通信），使其在某些应用情景下比HTTP更能满足技术需求。
Django Web框架实现WebSocket主要有两种方式：channels和dwebsocket。
Channels是针对Django项目的一个增强框架，使得Django不仅支持HTTP协议，还能支持WebSocket协议， 所以本文使用Channels来实现即时通讯，开发一个聊天室，使得每个人发送的消息都能实时显示在别人的屏幕上。
软件环境：
Python：3.7
Django：3.0
pip install channelspip install channels_redis二、创建一个Django项目和一个APP
项目名为django_ws_demo，APP名为chat，目录如下：
三、开发首页
在templates文件夹创建chat文件夹，用来存放聊天室页面。
templates/chat/index.html页面内容如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>聊天室</title></head><body> 你想进入哪个富婆群?<br/> <input id="room-name-input" type="text" /> <input id="room-name-submit" type="button" value="确定"/>
<script> document.querySelector('#room-name-submit').onclick = function(e) { var roomName = document.querySelector('#room-name-input').value; window.location.pathname = '/chat/' + roomName + '/'; };</script></body></html>3.2 添加视图函数
在chat/views.py中添加视图函数：
from django.shortcuts import render
def index(request): return render(request, 'chat/index.html', {})3.3 注册路由
在项目路由中django_ws_demo/urls.py包含chat url：
from django.contrib import adminfrom django.urls import path, include, re_path
urlpatterns = [ path('admin/', admin.site.urls), re_path('^chat/', include('chat.urls')),]创建chat/urls.py文件并设置路由信息：
from django.urls import re_path
from . import views
urlpatterns = [ re_path(r'^$', views.index, name='index'),]启动Django，打开浏览器正常会看到以下页面：
四、开发聊天室
4.1 创建聊天窗口页面
templates/chat/room.html页面内容如下：
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>聊天室</title></head><body> <h2>北京富婆群</h2> <textarea id="chat-log" cols="100" rows="20" style="font-size: 18px;color: red;font-weight: bold"></textarea><br/> <input id="chat-message-input" type="text" size="50"/> <input id="chat-message-submit" type="button" value="发送"/></body><script> var num = parseInt(100*Math.random()); var roomName = {{ room_name_json }};
// 浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求 var ws = new WebSocket( 'ws://' + window.location.host + '/ws/chat/' + roomName + '/');
// 监听按钮 document.querySelector('#chat-message-submit').onclick = function(e) { // 获取输入框数据 var messageInputDom = document.querySelector('#chat-message-input'); var message = messageInputDom.value;
console.log(num); // 使用send()方法发送数据 ws.send(JSON.stringify({ 'user': num, 'message': message }));
// 输入框值设置为空 messageInputDom.value = ''; // 通过 onmessage 事件来接收服务器返回的数据。 ws.onmessage = function(e) { var data = JSON.parse(e.data); var user = data['user']; console.log(e.data); var message = data['message'];
document.querySelector('#chat-log').value += ('匿名富婆' + user + ': ' + message + '\n'); }; // 关闭 websocket ws.onclose = function(e) { console.error('聊天套接字意外关闭!'); }; };</script></html>4.2 添加视图函数
在chat/views.py中添加一个处理 room 的视图函数：
from django.shortcuts import renderfrom django.utils.safestring import mark_safeimport json
def index(request): return render(request, 'chat/index.html', {})
def room(request, room_name): return render(request, 'chat/room.html', { 'room_name_json': mark_safe(json.dumps(room_name)) })4.3 注册路由
在chat/urls.py中注册路由：
from django.urls import re_path
from . import views
urlpatterns = [ re_path(r'^$', views.index, name='index'), re_path(r'^(?P<room_name>[^/]+)/$', views.room, name='room'),]五、配置Django Channels
5.1 配置Channels
在 settings.py文件中注册channels：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'channels', 'chat']并在下面直接添加一行：
ASGI_APPLICATION = 'django_ws_demo.routing.application'5.2 配置路由
在settings.py文件同级目录下新建routing.py路由文件，内容如下：
from channels.auth import AuthMiddlewareStackfrom channels.routing import ProtocolTypeRouter, URLRouterfrom django.urls import re_pathfrom .import consumers
application = ProtocolTypeRouter({ 'websocket': AuthMiddlewareStack( URLRouter([ re_path(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer), ]) ),})正则匹配所有以ws/chat开头的websocket连接，都交由名为consumers的ChatConsumer处理。
5.3 WebSocket服务端消费
ChatConsumer代码文件路径为django_ws_demo/consumers.py，内容如下：
from channels.generic.websocket import AsyncWebsocketConsumerimport json
class ChatConsumer(AsyncWebsocketConsumer): async def connect(self): self.room_name = self.scope['url_route']['kwargs']['room_name'] self.room_group_name = 'chat_%s' % self.room_name
# 加入聊天室 await self.channel_layer.group_add( self.room_group_name, self.channel_name )
await self.accept()
# 离开聊天室 async def disconnect(self, close_code):
await self.channel_layer.group_discard( self.room_group_name, self.channel_name )
# 接收来自WebSocket的消息 async def receive(self, text_data): text_data_json = json.loads(text_data) user = text_data_json['user'] message = text_data_json['message']
# 发送消息到聊天室 await self.channel_layer.group_send(
self.room_group_name, { 'type': 'chat_message', 'user': user, 'message': message } )
# 接受来自聊天室的消息 async def chat_message(self, event): message = event['message'] user = event['user'] # 发送消息到WebSocket await self.send(text_data=json.dumps({ 'user': user, 'message': message }))5.4 配置Redis
在settings.py配置文件添加redis配置，内容如下：
CHANNEL_LAYERS = { 'default': { 'BACKEND': 'channels_redis.core.RedisChannelLayer', 'CONFIG': { "hosts": [('192.168.31.61', 6379)], }, },}settings.py总添加配置如下：
整体目录结构：
- END -
从 kubectl top 看 Kubernetes 监控原理
年轻时偷的懒，迟早是要还的。点亮