21、Django3实现Websocket最简单demo

django3实现Websocket最简单demo

根据本文步骤可配出来最简单的一个demo。

1. 新建django项目

2.安装依赖

pip install channels

安装channels之后，

在 setttings.py 的 INSTALLED_APPS 里添加 channels。

注意每个app后面加上逗号。

3.修改为Asgi

将asgi.py文件的内容更改为：(这是一个仅支持http的写法，方便后面测试，支持websocket的路由后面会给出）

import os

from channels.routing import ProtocolTypeRouter
from django.core.asgi import get_asgi_application

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'mysite.settings')

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
})

在settings.py中添加(myproject替换为你的project名称)

ASGI_APPLICATION = "myproject.asgi.application"

这个时候运行项目应该可以看到出现了：

Starting ASGI/Channels version 3.0.4 development server at http://127.0.0.1:8000/

4.新建消费者（类似于views，负责接受连接、接收消息等操作）

新建APP，假设为'backend'。

在backend目录新建consumers.py，填写代码为：（类名自定义，和下面的代码对应就行）

import json
from channels.generic.websocket import WebsocketConsumer

class ChatConsumer(WebsocketConsumer):
    def connect(self):
        self.accept()

    def disconnect(self, close_code):
        pass

    def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        self.send(text_data=json.dumps({
            'message': message
        }))

注意这种写法要求前端发送的消息为json，且消息内容放在'message'key下。即前端发送的消息为

{"message":"消息内容"}

如果不是这样的格式修改 receive 函数即可。

该文件负责定义websocket的连接、接收消息等操作。

5.修改路由

# 新建routing.py，填写内容为：
from django.urls import re_path

from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/$', consumers.ChatConsumer.as_asgi()),
]

然后修改我们的asgi为：

import os

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django.core.asgi import get_asgi_application
import backend.routing

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "mysite.settings")

application = ProtocolTypeRouter({
  "http": get_asgi_application(),
  "websocket": AuthMiddlewareStack(
        URLRouter(
            backend.routing.websocket_urlpatterns
        )
    ),
})

OK，大功告成，此时后端的WebSocket就写好了，在配合一个前端就可以使用了。