devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

websocke在django中使用_websocket在django中使用教程

作者：Monodyee | 2024-03-27 23:15:30

赞

踩

websocket在django中使用教程

0. websocket介绍：

channels 4.0之后默认不带Daphne服务器了。

解决方案可以有两种：
1.指定channels的版本为3.x；
2.安装时使用pip3 install -U channels[“daphne”]

一. 后端

1. 安装(基于django3.x)

 pip3 install channels==3.0.3  -i https://pypi.douban.com/simple

 2. settings配置

 a. app注册

  1. INSTALLED_APPS = [
  2.     'channels',
  3. ]

b. 配置变量

  1. ASGI_APPLICATION = "qq_chart.asgi.application"
  2. ASGI_APPLICATION = '当前项目名同名的文件名.asgi.application'

3. 修改asgi文件(默认不支持websocket，只支持http)

  1. import os
  2. from django.core.asgi import get_asgi_application
  3. from channels.routing import ProtocolTypeRouter, URLRouter
  4. from . import routings
  5. os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'qq_chart.settings')
  6.  
  7. # application = get_asgi_application()
  8. application = ProtocolTypeRouter({
  9.     'http':get_asgi_application(),
  10.     'websocket':URLRouter(routings.websocket_urlpatterns)
  11. })

4. 在settings.py同级目录下创建routings.py 路由

  1. from django.urls import re_path
  2. from app01 import consumers
  3.  
  4. websocket_urlpatterns = [
  5.     re_path(r'ws/(?P<group>\w+)/$', consumers.ChatConsumer.as_asgi())
  6. ]

5. 创建websocket视图 consumers.py

  1. from channels.exceptions import StopConsumer
  2. from channels.generic.websocket import WebsocketConsumer
  3. # 异步改成同步
  4. from asgiref.sync import async_to_sync
  5.  
  6.  
  7. class ChatConsumer(WebsocketConsumer):
  8.     def websocket_connect(self, message):
  9.         '''客户端请求建立链接时 自动触发'''
  10.         self.accept()  # 建立链接  并且自动帮你维护每一个客户端
  11.  
  12.     def websocket_receive(self, message):
  13.         '''客户端发送数据过来  自动触发'''
  14.         print(message)
  15.         self.send('小心电信诈骗')
  16.  
  17.     def websocket_disconnect(self, message):
  18.         '''客户端断开链接之后  自动触发'''
  19.         print('断开链接')
  20.         raise StopConsumer()

群聊

这里放入内存中，也可以选择放入redis中

pip3 install channels_redis

# settings.py
# 群聊配置

# 无密码1 
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": [('IP', 6379)]
        },
    },
}

# 无密码2 选择使用的库
CHANNEL_LAYERS = {
    'default': {
    'BACKEND': 'channels_redis.core.RedisChannelLayer',
    'CONFIG': {"hosts": ["redis://IP:6379/1"],},
    },
} 

# 有密码
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels_redis.core.RedisChannelLayer",
        "CONFIG": {
            "hosts": ["redis://:password@IP:6379/0"],
            # SECRET_KEY settings内置的
            "symmetric_encryption_keys": [SECRET_KEY],
        },
    },
}

配置

  1. # 群聊配置
  2. CHANNEL_LAYERS = {
  3.     "default": {
  4.         "BACKEND": "channels.layers.InMemoryChannelLayer",
  5.     }
  6. }

视图改写1

  1. """
  2. websocket逻辑
  3. """
  4. from channels.generic.websocket import WebsocketConsumer
  5. from channels.exceptions import StopConsumer
  6. from asgiref.sync import async_to_sync
  7.  
  8.  
  9. class ChatConsumer(WebsocketConsumer):
  10.     # 有客户端来向后端发送websocket连接的请求，自动触发
  11.     def websocket_connect(self, message):
  12.         # 允许创建链接
  13.         self.accept()
  14.         print('有人来连接了')
  15.         # 不允许连接
  16.         # raise StopConsumer()
  17.  
  18.         # 服务端与客户端发送消息
  19.         # self.send(text_data='你好')
  20.  
  21.         # 群聊的配置
  22.         # 将客户端的连接对象加入内存/redis
  23.         # 1999群号，这个过程是异步的，要修改成同步的
  24.         # self.channel_name当前用户
  25.         group = self.scope['url_route']['kwargs'].get('group')
  26.         async_to_sync(self.channel_layer.group_add)(group, self.channel_name)
  27.  
  28.     # 浏览器基于websocket向后端发送数据，自动触发
  29.     def websocket_receive(self, message):
  30.         print('接收到消息----》', message)
  31.         text = message.get('text')
  32.         if text == 'close':
  33.             # 服务端主动断开
  34.             self.close()
  35.             # 可以让websocket_disconnect函数不执行
  36.             raise StopConsumer()
  37.         # 给一个人回复
  38.         # self.send(text_data='收到了')
  39.         # 群聊
  40.         # 通知组内的所有客户端，去执行xx_oo的方法，
  41.         group = self.scope['url_route']['kwargs'].get('group')
  42.  
  43.         async_to_sync(self.channel_layer.group_send)(group, {'type': 'xx.oo', 'message': message})
  44.  
  45.     def xx_oo(self, event):
  46.         """
  47.         群聊
  48.         :return:
  49.         """
  50.         print('--------->', event['message'])
  51.         text = event['message']['text']
  52.         # 给所有人回复
  53.         self.send(text)
  54.  
  55.     # 当客户端/服务端主动断开连接自动触发
  56.     def websocket_disconnect(self, message):
  57.         group = self.scope['url_route']['kwargs'].get('group')
  58.  
  59.         print('客户端主动断开连接了')
  60.         # 可以让websocket_disconnect函数不执行
  61.         # 群聊断开
  62.         async_to_sync(self.channel_layer.group_discard)(group, self.channel_name)  # self.channel_name当前名字
  63.         raise StopConsumer()

视图改写2

  1. """
  2. websocket逻辑
  3. """
  4. import json
  5. from channels.generic.websocket import WebsocketConsumer
  6. from channels.exceptions import StopConsumer
  7. from asgiref.sync import async_to_sync
  8. from chart import models
  9.  
  10.  
  11. class ChatConsumer(WebsocketConsumer):
  12.     # 有客户端来向后端发送websocket连接的请求，自动触发
  13.     def websocket_connect(self, message):
  14.         # 允许创建链接
  15.         self.accept()
  16.         print('有人来连接了-----群聊')
  17.         # 不允许连接
  18.         # raise StopConsumer()
  19.  
  20.         # 服务端与客户端发送消息
  21.         # self.send(text_data='你好')
  22.  
  23.         # 群聊的配置
  24.         # 将客户端的连接对象加入内存/redis
  25.         # 1999群号，这个过程是异步的，要修改成同步的
  26.         # self.channel_name当前用户
  27.         group = self.scope['url_route']['kwargs'].get('group')
  28.         username = self.scope['url_route']['kwargs'].get('username')
  29.  
  30.         query = models.Chart_Record_all.objects.filter(chart_num=group, is_delete=False, is_active=True)
  31.         for item in query:
  32.             if item.username:
  33.                 # print('发言人：', item.username)
  34.                 self.send(
  35.                     json.dumps(
  36.                         {'username': item.username.username, 'text': item.text, 'timer': str(item.create_time)[0:19]},
  37.                         ensure_ascii=False))
  38.         async_to_sync(self.channel_layer.group_add)(group, self.channel_name)
  39.         # 获取当前组的发言记录
  40.  
  41.     # 浏览器基于websocket向后端发送数据，自动触发
  42.     def websocket_receive(self, message):
  43.         print('接收到消息----》', message)
  44.         text = message.get('text')
  45.         print(text)
  46.         # 给一个人回复
  47.         # self.send(text_data='收到了')
  48.         # 群聊
  49.         # 通知组内的所有客户端，去执行xx_oo的方法，
  50.         # group = self.scope['url_route']['kwargs'].get('group')
  51.         group = self.scope['url_route']['kwargs'].get('group')
  52.         username = self.scope['url_route']['kwargs'].get('username')
  53.         obj = models.UserInfo.objects.get(username=username)
  54.         # text = event['message']['text']
  55.         chart_obj = models.Chart_Record_all.objects.create(chart_num=group, username=obj, text=text)
  56.         async_to_sync(self.channel_layer.group_send)(group,
  57.                                                      # type:触发的函数名称
  58.                                                      {'type': 'chart.room',
  59.                                                       'message': {'message': message, 'chart_obj': chart_obj}})
  60.  
  61.     def chart_room(self, event):
  62.         """
  63.         群聊
  64.         :return:
  65.         """
  66.         # print('--------->', event['message'])
  67.         # 获取组号及发言人
  68.         # group = self.scope['url_route']['kwargs'].get('group')
  69.         # username = self.scope['url_route']['kwargs'].get('username')
  70.         # obj = models.UserInfo.objects.get(username=username)
  71.         # text = event['message']['text']
  72.         # chart_obj = models.Chart_Record_all.objects.create(chart_num=group, username=obj, text=text)
  73.         chart_obj = event['message']['chart_obj']
  74.         if chart_obj.username:
  75.             # 给所有人回复
  76.             self.send(
  77.                 json.dumps(
  78.                     {'username': chart_obj.username.username, 'text': chart_obj.text,
  79.                      'timer': str(chart_obj.create_time)[0:19]},
  80.                     ensure_ascii=False))
  81.  
  82.     # 当客户端/服务端主动断开连接自动触发
  83.     def websocket_disconnect(self, message):
  84.         group = self.scope['url_route']['kwargs'].get('group')
  85.  
  86.         print('客户端主动断开连接了')
  87.         # 可以让websocket_disconnect函数不执行
  88.         # 群聊断开
  89.         async_to_sync(self.channel_layer.group_discard)(group, self.channel_name)  # self.channel_name当前名字
  90.         raise StopConsumer()

前端

  1.     <script>
  2.  
  3.         socket = new WebSocket("ws://127.0.0.1:8000/all_chart/{{ room_id }}/{{ username }}/")
  4.         // 1.发送数据
  5.         $("#send").click(function () {
  6.             let mess = $('#txt').val()
  7.             socket.send(mess)
  8.             $('#txt').val('')
  9.         })
  10.  
  11.  
  12.         // 2.接收服务端返回的数据
  13.         socket.onmessage = function (event) {
  14.             {#console.log(event.data)#}
  15.             var data = JSON.parse(event.data)
  16.             // event.data 返回的数据
  17.             // 创建标签
  18.             var cn_div = $("<div>").attr('class', 'conversation-name')
  19.  
  20.             var mb_p = $("<p>").attr('class', 'mb-0').text(data.text)
  21.             var ctec_div = $("<div>").attr('class', 'ctext-wrap-content').append(mb_p)
  22.             var cte_div = $("<div>").attr('class', 'ctext-wrap').append(ctec_div)
  23.             var user_div = $("<div>").attr('class', 'user-chat-content').append(cte_div).append(data.username + ' ' + '发言时间：' + data.timer)
  24.  
  25.             var con_div = $("<div>").attr('class', 'conversation-list').append(user_div)
  26.  
  27.  
  28.             var li = $("<li>").append(con_div)
  29.             // 获取ul
  30.             $("#old_ul").append(li)
  31.  
  32.             //添加文本数据到标签里面
  33.  
  34.         }
  35.         //3 客户端连接服务端成功之后自动触发  self.accept()成功之后
  36.         socket.onopen = function (event) {
  37.             {#// 创建标签#}
  38.             {#var link = $("<div>")#}
  39.             {#// 获取message#}
  40.             {#let message = $("#message")#}
  41.             {#link.html("连接成功")#}
  42.             {##}
  43.             {#//添加文本数据到标签里面#}
  44.             {#message.append(link)#}
  45.         }
  46.     </script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/327503
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号