登录
当前位置： 首页 > 编程笔记 >

详解Django-channels 实现WebSocket实例

郎诚
2023-03-14
本文向大家介绍详解Django-channels 实现WebSocket实例，包括了详解Django-channels 实现WebSocket实例的使用技巧和注意事项，需要的朋友参考一下

引入

先安装三个模块

pip install channels

pip install channels_redis

pip install pywin32

创建一个Django项目和一个app

项目名随意，app名随意。这里项目名为 django_websocket_demo ，app名 chat

把app文件夹下除了 views.py 和 __init__.py 的文件都删了，最终项目目录结构如下：

django_websocket_demo/
  manage.py
  django_websocket_demo/
    __init__.py
    settings.py
    urls.py
    wsgi.py
  chat/
    __init__.py
    views.py

在app下新建一个templates文件夹用来存放HTML页面：

chat/
  __init__.py
  templates/
    chat/
      index.html
  views.py

index.html 内容如下：

<!-- chat/templates/chat/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Chat Rooms</title>
</head>
<body>
  What chat room would you like to enter?<br/>
  <input id="room-name-input" type="text" size="100"/><br/>
  <input id="room-name-submit" type="button" value="Enter"/>

  <script>
    document.querySelector('#room-name-input').focus();
    document.querySelector('#room-name-input').onkeyup = function(e) {
      if (e.keyCode === 13) { // enter, return
        document.querySelector('#room-name-submit').click();
      }
    };

    document.querySelector('#room-name-submit').onclick = function(e) {
      var roomName = document.querySelector('#room-name-input').value;
      window.location.pathname = '/chat/' + roomName + '/';
    };
  </script>
</body>
</html>

在 chat/views.py 中添加视图函数：

from django.shortcuts import render

def index(request):
  return render(request, 'chat/index.html', {})

添加 chat/urls.py 文件并设置路由信息：

from django.urls import re_path

from . import views

urlpatterns = [
  re_path(r'^$', views.index, name='index'),
]

在项目路由 django_websocket_demo/urls.py 中配置路由信息：

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
  url(r'^chat/', include('chat.urls')),
  url(r'^admin/', admin.site.urls),
]

在 settings.py 文件同级目录下新建 routing.py 文件，内容如下：

from channels.routing import ProtocolTypeRouter

application = ProtocolTypeRouter({
  # (http->django views is added by default)
})

把 channels 注册在 settings.py 里：

INSTALLED_APPS = [
  'channels',
  'chat',
  'django.contrib.admin',
  'django.contrib.auth',
  'django.contrib.contenttypes',
  'django.contrib.sessions',
  'django.contrib.messages',
  'django.contrib.staticfiles',
]

在   settings.py 文件中，添加如下配置项：

# django_websocket_demo/settings.py
# Channels
# Channels
ASGI_APPLICATION = 'django_websocket_demo.routing.application'

创建聊天页面

创建一个 chat/templates/chat/room.html 文件，添加如下内容：

<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Chat Room</title>
</head>
<body>
  <textarea id="chat-log" cols="100" rows="20"></textarea><br/>
  <input id="chat-message-input" type="text" size="100"/><br/>
  <input id="chat-message-submit" type="button" value="Send"/>
</body>
<script>
  var roomName = {{ room_name_json }};

  var chatSocket = new WebSocket(
    'ws://' + window.location.host +
    '/ws/chat/' + roomName + '/');

  chatSocket.onmessage = function(e) {
    var data = JSON.parse(e.data);
    var message = data['message'];
    document.querySelector('#chat-log').value += (message + '\n');
  };

  chatSocket.onclose = function(e) {
    console.error('Chat socket closed unexpectedly');
  };

  document.querySelector('#chat-message-input').focus();
  document.querySelector('#chat-message-input').onkeyup = function(e) {
    if (e.keyCode === 13) { // enter, return
      document.querySelector('#chat-message-submit').click();
    }
  };

  document.querySelector('#chat-message-submit').onclick = function(e) {
    var messageInputDom = document.querySelector('#chat-message-input');
    var message = messageInputDom.value;
    chatSocket.send(JSON.stringify({
      'message': message
    }));

    messageInputDom.value = '';
  };
</script>
</html>

在 chat/views.py 中添加一个处理 room的视图函数：

from django.shortcuts import render
from django.utils.safestring import mark_safe
import 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))
  })

在 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'),
]

新建 chat/consumers.py 文件，添加如下内容：

from channels.generic.websocket import AsyncWebsocketConsumer
import 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

    # Join room group
    await self.channel_layer.group_add(
      self.room_group_name,
      self.channel_name
    )

    await self.accept()

  async def disconnect(self, close_code):
    # Leave room group
    await self.channel_layer.group_discard(
      self.room_group_name,
      self.channel_name
    )

  # Receive message from WebSocket
  async def receive(self, text_data):
    text_data_json = json.loads(text_data)
    message = text_data_json['message']

    # Send message to room group
    await self.channel_layer.group_send(
      self.room_group_name,
      {
        'type': 'chat_message',
        'message': message
      }
    )

  # Receive message from room group
  async def chat_message(self, event):
    message = event['message']

    # Send message to WebSocket
    await self.send(text_data=json.dumps({
      'message': message
    }))

新建一个 chat/routing.py 文件，添加以下内容：

from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
  re_path(r'^ws/chat/(?P<room_name>[^/]+)/$', consumers.ChatConsumer),
]

将 django_websocket_demo/routing.py 文件中修改为以下内容：

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
import chat.routing

application = ProtocolTypeRouter({
  # (http->django views is added by default)
  'websocket': AuthMiddlewareStack(
    URLRouter(
      chat.routing.websocket_urlpatterns
    )
  ),
})

配置redis

在本地6379端口启动redis : redis-server

在 settings.py 中添加如下配置：

CHANNEL_LAYERS = {
  'default': {
    'BACKEND': 'channels_redis.core.RedisChannelLayer',
    'CONFIG': {
      "hosts": [('127.0.0.1', 6379)],
    },
  },
}

最后启动Django项目

使用多个浏览器打开http://127.0.0.1:8000/chat/lobby/ ，开始实时聊天吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • 详解spring boot实现websocket

    本文向大家介绍详解spring boot实现websocket，包括了详解spring boot实现websocket的使用技巧和注意事项，需要的朋友参考一下 前言 QQ这类即时通讯工具多数是以桌面应用的方式存在。在没有websocket出现之前，如果开发一个网页版的即时通讯应用，则需要定时刷新页面或定时调用ajax请求，这无疑会加大服务器的负载和增加了客户端的流量。而websocket的出现，则

  • 详解java WebSocket的实现以及Spring WebSocket

    本文向大家介绍详解java WebSocket的实现以及Spring WebSocket，包括了详解java WebSocket的实现以及Spring WebSocket的使用技巧和注意事项，需要的朋友参考一下 开始学习WebSocket，准备用它来实现一个在页面实时输出log4j的日志以及控制台的日志。 首先知道一些基础信息： 1.java7 开始支持WebSocket，并且只是做了定义，并未实

  • 详解Django rest_framework实现RESTful API

    本文向大家介绍详解Django rest_framework实现RESTful API，包括了详解Django rest_framework实现RESTful API的使用技巧和注意事项，需要的朋友参考一下 一、什么是REST 面向资源是REST最明显的特征，资源是一种看待服务器的方式，将服务器看作是由很多离散的资源组成。每个资源是服务器上一个可命名的抽象概念。因为资源是一个抽象的概念，所以它不仅

  • Django Channels

    Django Channels 是一个为 Django 提供异步扩展的库，通常主要用来提供 WebSocket 支持和后台任务。 原理 它的原理是将 Django 分为 2 种进程类型： 一个用于处理 HTTP 和 WebSocket 的协议服务 一个用于运行视图、WebSocket handler 以及后台任务的 worker 服务 两者通过 ASGI 协议通信，类似与 WSGI 但是运行在网络

  • Django models.py应用实现过程详解

    本文向大家介绍Django models.py应用实现过程详解，包括了Django models.py应用实现过程详解的使用技巧和注意事项，需要的朋友参考一下 编写 models.py 文件 字段类型 一般数据库中字段类型大概5种(字符串/数字/浮点型/时间类型/布尔类型)，但Django为了在后台admin中可以操作数据库，同时为了限制在admin中对数据库的无效操作，Model中设置了很多种数

  • Django nginx配置实现过程详解

    本文向大家介绍Django nginx配置实现过程详解，包括了Django nginx配置实现过程详解的使用技巧和注意事项，需要的朋友参考一下 django 在引入第三方模块的时候保证服务的高可用，要设立一个备份接口，当主接口宕机时可以设置一个超市参数来使用备份的接口。 nginx 反向代理器，网站服务器，负载均衡 基本命令 sudo nginx启动 sudo nginx -s stop sudo

相关阅读

Django nginx配置实现过程详解go的websocket实现原理与用法详解Django权限机制实现代码详解Django+Vue实现WebSocket连接的示例代码django 单表操作实例详解

相关文章

实战-Swing实现计算器实战-Swing实现记事本TensorFlow XOR实现目录实现目录实现

相关问答

mysql - R-tree原理详解：空间索引的高效实现?无法在Django rest框架ModelViewSet中实现PUT解决特征实现冲突使用gensim理解LDA实现Hadoop实时实现

相关工具

《Redis 设计与实现》websocket++WebSocket《Apache Spark 设计与实现》WebSocket-Node

相关文档

Django 入门与实践深入理解 OpenStack 网络实现 NeutronGRUB2 配置文件 grub.cfg 详解 / GRUB2 实战手册Redis 设计与实现如何实现自己的 jQuery
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.