怎样基于Django中的WebSockets和异步视图来实现及时通信功能 ...

商道如狼道  金牌会员 | 2024-5-18 01:59:09 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 672|帖子 672|积分 2016

本文分享自华为云社区《结合Django中的WebSockets和异步视图实现及时通信功能的完备指南》，作者： 柠檬味拥抱。
在现代Web应用程序中，及时通信已经成为了必不可少的功能之一。无论是在线聊天、及时数据更新照旧及时关照，都需要通过及时通信技能来实现。Django作为一个强大的Web框架，提供了许多工具来构建各种类型的Web应用程序，但是在及时通信方面，传统的请求-响应模式显然无法满足需求。在这篇文章中，我们将探讨怎样使用Django中的WebSockets和异步视图来实现及时通信功能。
WebSockets简介

WebSockets是一种在单个TCP连接上提供全双工通信的协议。与HTTP请求-响应模式不同，WebSockets允许服务器和客户端之间进行持续的双向通信，从而实现了及时性。在Django中，我们可以使用第三方库django-channels来实现WebSocket的支持。

异步视图

Django 3.1引入了异步视图的支持，使得我们可以编写异步处理请求的视图函数。这对于处理长时间运行的任务或需要等候外部资源响应的请求非常有用。
结合WebSockets与异步视图

下面我们将通过一个案例来演示怎样在Django中结合WebSockets和异步视图来实现及时通信功能。假设我们正在开发一个简单的及时聊天应用。
安装依靠

首先，我们需要安装django-channels库：
  1. pip install channels
复制代码
配置项目

在项目的settings.py中，添加channels应用：
  1. INSTALLED_APPS = [
  2.     ...
  3.     'channels',
  4.     ...
  5. ]
复制代码
然后，创建一个名为routing.py的新文件，在其中界说WebSocket路由：
  1. # routing.py
  3. from channels.routing import ProtocolTypeRouter, URLRouter
  4. from channels.auth import AuthMiddlewareStack
  5. from django.urls import path
  6. from myapp.consumers import ChatConsumer
  8. websocket_urlpatterns = [
  9.     path('ws/chat/', ChatConsumer.as_asgi()),
  10. ]
  12. application = ProtocolTypeRouter({
  13.     'websocket': AuthMiddlewareStack(
  14.         URLRouter(
  15.             websocket_urlpatterns
  16.         )
  17.     ),
  18. })
复制代码
创建Consumer

接下来，我们创建一个消费者（Consumer）来处理WebSocket连接：
  1. # consumers.py
  3. import json
  4. from channels.generic.websocket import AsyncWebsocketConsumer
  6. class ChatConsumer(AsyncWebsocketConsumer):
  7.     async def connect(self):
  8.         self.room_name = 'chat_room'
  9.         self.room_group_name = f'chat_{self.room_name}'
  11.         # 加入聊天室群组
  12.         await self.channel_layer.group_add(
  13.             self.room_group_name,
  14.             self.channel_name
  15.         )
  17.         await self.accept()
  19.     async def disconnect(self, close_code):
  20.         # 离开聊天室群组
  21.         await self.channel_layer.group_discard(
  22.             self.room_group_name,
  23.             self.channel_name
  24.         )
  26.     async def receive(self, text_data):
  27.         text_data_json = json.loads(text_data)
  28.         message = text_data_json['message']
  30.         # 发送消息到聊天室群组
  31.         await self.channel_layer.group_send(
  32.             self.room_group_name,
  33.             {
  34.                 'type': 'chat_message',
  35.                 'message': message
  36.             }
  37.         )
  39.     async def chat_message(self, event):
  40.         message = event['message']
  42.         # 发送消息给WebSocket连接
  43.         await self.send(text_data=json.dumps({
  44.             'message': message
  45.         }))
复制代码
编写前端代码

在前端页面中，我们需要使用JavaScript来连接WebSocket并处理消息的发送和接收：
  1. // chat.js
  3. const chatSocket = new WebSocket('ws://localhost:8000/ws/chat/');
  5. chatSocket.onmessage = function(e) {
  6.     const data = JSON.parse(e.data);
  7.     const message = data['message'];
  8.     // 处理收到的消息
  9.     console.log(message);
  10. };
  12. chatSocket.onclose = function(e) {
  13.     console.error('Chat socket closed unexpectedly');
  14. };
  16. document.querySelector('#chat-message-input').addEventListener('keypress', function(e) {
  17.     if (e.key === 'Enter') {
  18.         const messageInputDom = document.querySelector('#chat-message-input');
  19.         const message = messageInputDom.value;
  20.         chatSocket.send(JSON.stringify({
  21.             'message': message
  22.         }));
  23.         messageInputDom.value = '';
  24.     }
  25. });
复制代码

集成到模板

末了，我们在Django模板中集成JavaScript代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Chat</title>
  5. </head>
  6. <body>
  7.     <textarea id="chat-message-input"></textarea>
  8.    
  9. </body>
  10. </html>
复制代码
引入异步视图

在Django 3.1之前，视图函数都是同步执行的，这意味着一个视图函数中的代码会一直执行直到返回一个HTTP响应给客户端。然而，有些任务大概是耗时的，好比调用外部API或者执行复杂的计算。在这种情况下，同步视图会阻塞整个应用程序，导致性能下降。
为了办理这个问题，Django引入了异步视图，它们使用Python的async和await语法来支持异步编程模式。异步视图允许在处理请求时挂起执行，等候IO操纵完成而不会阻塞整个应用程序。
结合WebSockets与异步视图的优势

结合WebSockets与异步视图可以使得及时通信应用具备更高的性能和可扩展性。当有大量连接同时进行通信时，异步视图可以有用地管理这些连接，而不会因为一个连接的阻塞而影响其他连接的处理。这种方式下，应用程序能够更好地应对高并发情况，保持稳定性和高效性。

完善及时聊天应用

除了上述示例中的基本聊天功能之外，我们还可以对及时聊天应用进行一些扩展，好比：

  • 用户认证：在连接WebSocket时进行用户认证，确保只有已登录的用户可以进入聊天室。
  • 聊天室管理：创建多个聊天室，并允许用户选择参加不同的聊天室。
  • 消息存储：将聊天记录生存到数据库中，以便用户在断线重连后可以查看历史消息。
  • 消息关照：实现消息关照功能，当用户收到新消息时，通过欣赏器关照或邮件提示用户。
  • 及时在线用户列表：表现当前在线用户列表，并在用户进入或离开聊天室时及时更新。
及时地理位置共享

假设我们正在开发一个及时地理位置共享应用，用户可以在地图上及时看到其他用户的位置。以下是一个简单的示例代码：
后端代码
  1. # consumers.py
  3. import json
  4. from channels.generic.websocket import AsyncWebsocketConsumer
  6. class LocationConsumer(AsyncWebsocketConsumer):
  7.     async def connect(self):
  8.         self.room_name = 'location_room'
  9.         self.room_group_name = f'location_{self.room_name}'
  11.         # 加入地理位置共享房间
  12.         await self.channel_layer.group_add(
  13.             self.room_group_name,
  14.             self.channel_name
  15.         )
  17.         await self.accept()
  19.     async def disconnect(self, close_code):
  20.         # 离开地理位置共享房间
  21.         await self.channel_layer.group_discard(
  22.             self.room_group_name,
  23.             self.channel_name
  24.         )
  26.     async def receive(self, text_data):
  27.         text_data_json = json.loads(text_data)
  28.         latitude = text_data_json['latitude']
  29.         longitude = text_data_json['longitude']
  31.         # 发送位置信息到地理位置共享房间
  32.         await self.channel_layer.group_send(
  33.             self.room_group_name,
  34.             {
  35.                 'type': 'location_message',
  36.                 'latitude': latitude,
  37.                 'longitude': longitude
  38.             }
  39.         )
  41.     async def location_message(self, event):
  42.         latitude = event['latitude']
  43.         longitude = event['longitude']
  45.         # 发送位置信息给WebSocket连接
  46.         await self.send(text_data=json.dumps({
  47.             'latitude': latitude,
  48.             'longitude': longitude
  49.         }))
复制代码
前端代码
  1. // location.js
  3. const locationSocket = new WebSocket('ws://localhost:8000/ws/location/');
  5. locationSocket.onmessage = function(e) {
  6.     const data = JSON.parse(e.data);
  7.     const latitude = data['latitude'];
  8.     const longitude = data['longitude'];
  9.     // 在地图上显示用户位置
  10.     updateMap(latitude, longitude);
  11. };
  13. locationSocket.onclose = function(e) {
  14.     console.error('Location socket closed unexpectedly');
  15. };
  17. function sendLocation(latitude, longitude) {
  18.     locationSocket.send(JSON.stringify({
  19.         'latitude': latitude,
  20.         'longitude': longitude
  21.     }));
  22. }
复制代码
在这个示例中，用户通过前端界面在地图上选择或移动位置，然后通过WebSocket发送位置信息到服务器。服务器接收到位置信息后，将其广播给所有连接的用户，前端界面接收到位置信息后，在地图上及时更新其他用户的位置。
这样的及时地理位置共享功能可以应用在交际应用、及时导航应用等场景中，为用户提供更好的交互体验。
及时数据可视化

假设我们有一个数据监控系统，需要及时展示各种传感器的数据。以下是一个简单的示例代码：
后端代码
  1. # consumers.py
  3. import json
  4. from channels.generic.websocket import AsyncWebsocketConsumer
  6. class SensorDataConsumer(AsyncWebsocketConsumer):
  7.     async def connect(self):
  8.         self.room_name = 'sensor_data_room'
  9.         self.room_group_name = f'sensor_data_{self.room_name}'
  11.         # 加入传感器数据共享房间
  12.         await self.channel_layer.group_add(
  13.             self.room_group_name,
  14.             self.channel_name
  15.         )
  17.         await self.accept()
  19.     async def disconnect(self, close_code):
  20.         # 离开传感器数据共享房间
  21.         await self.channel_layer.group_discard(
  22.             self.room_group_name,
  23.             self.channel_name
  24.         )
  26.     async def receive(self, text_data):
  27.         text_data_json = json.loads(text_data)
  28.         sensor_id = text_data_json['sensor_id']
  29.         sensor_value = text_data_json['sensor_value']
  31.         # 发送传感器数据到传感器数据共享房间
  32.         await self.channel_layer.group_send(
  33.             self.room_group_name,
  34.             {
  35.                 'type': 'sensor_data_message',
  36.                 'sensor_id': sensor_id,
  37.                 'sensor_value': sensor_value
  38.             }
  39.         )
  41.     async def sensor_data_message(self, event):
  42.         sensor_id = event['sensor_id']
  43.         sensor_value = event['sensor_value']
  45.         # 发送传感器数据给WebSocket连接
  46.         await self.send(text_data=json.dumps({
  47.             'sensor_id': sensor_id,
  48.             'sensor_value': sensor_value
  49.         }))
复制代码
前端代码
  1. // sensor_data.js
  3. const sensorDataSocket = new WebSocket('ws://localhost:8000/ws/sensor_data/');
  5. sensorDataSocket.onmessage = function(e) {
  6.     const data = JSON.parse(e.data);
  7.     const sensorId = data['sensor_id'];
  8.     const sensorValue = data['sensor_value'];
  9.     // 更新传感器数据图表
  10.     updateChart(sensorId, sensorValue);
  11. };
  13. sensorDataSocket.onclose = function(e) {
  14.     console.error('Sensor data socket closed unexpectedly');
  15. };
  17. function sendSensorData(sensorId, sensorValue) {
  18.     sensorDataSocket.send(JSON.stringify({
  19.         'sensor_id': sensorId,
  20.         'sensor_value': sensorValue
  21.     }));
  22. }
复制代码
在这个示例中，传感器设备通过WebSocket将及时数据发送到服务器，服务器接收到数据后将其广播给所有连接的用户，前端界面接收到数据后，使用JavaScript图表库将及时数据及时展示在图表中。
这样的及时数据可视化功能可以应用在数据监控、及时分析等场景中，为用户提供及时的数据展示和监控功能。

高级功能和进阶应用

除了基本的及时聊天功能之外，结合WebSockets和异步视图还可以实现一系列高级功能和进阶应用。以下是一些示例：
1. 及时地理位置共享

使用WebSocket和异步视图，可以实现用户之间及时的地理位置共享。当用户移动时，前端应用可以将用户的位置信息发送到服务器，服务器再将这些信息广播给其他用户。这种功能在交际应用、地图导航应用等场景中非常有用。
2. 及时数据可视化

在数据分析和监控领域，及时数据可视化是一项重要的任务。通过WebSocket和异步视图，可以及时将数据传输到前端，并使用JavaScript图表库（如Highcharts、Chart.js等）及时展示数据变革趋势、及时监控系统状态等。
3. 在线协作编辑

使用WebSocket和异步视图，可以实现多人在线协作编辑功能，类似于Google Docs。当一个用户编辑文档时，别的用户可以及时看到编辑内容的变革，从而实现多人及时协作编辑。
4. 及时游戏

及时游戏对于及时通信的需求非常高。结合WebSocket和异步视图，可以实现及时的多人在线游戏，好比棋牌游戏、及时战略游戏等，提供流畅的游戏体验。
5. 及时搜索和过滤

在网站和应用中，用户大概需要及时搜索和过滤数据。通过WebSocket和异步视图，可以及时向服务器发送搜索关键词或过滤条件，并及时获取服务器返回的搜索结果或过滤后的数据，从而提高用户体验。
6. 及时投票和问卷观察

在线投票和问卷观察通常需要及时获取投票结果或问卷填写情况。结合WebSocket和异步视图，可以及时更新投票结果图表或问卷统计数据，让用户及时了解当前的投票情况或问卷填写进度。
总结

本文介绍了怎样使用Django中的WebSockets和异步视图来实现及时通信功能。我们首先了解了WebSockets的基本概念和工作原理，以及Django中使用django-channels库来支持WebSockets的方法。接着，我们深入探讨了异步视图的概念和用法，以及怎样结合WebSockets和异步视图来实现及时通信功能。
通过一个简单的及时聊天应用的示例，我们演示了怎样创建WebSocket消费者（Consumer）来处理WebSocket连接，并使用异步视图来处理WebSocket连接中的事件。我们还介绍了怎样在前端页面中使用JavaScript来连接WebSocket，并及时处理接收到的消息。
随后，我们进一步探讨告终合WebSockets和异步视图的优势，并提供了一系列高级功能和进阶应用的示例，包括及时地理位置共享、及时数据可视化等。这些功能和应用可以为开发者提供更多的创新和大概性，从而满足不同场景下的及时通信需求
 
点击关注，第一时间了解华为云新鲜技能~
 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

商道如狼道

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表