Django+channels实现WebSocket

2024-03-17 13:11:40

[refers0](https://channels.readthedocs.io/en/latest/tutorial/index.html)

[refers1](https://blog.csdn.net/weixin_43486863/article/details/83344368)

1.第一部分：基础设置

Channels3.0支持Python3.6和Django2.2+

1.1项目结构

mysite/
    manage.py
    mysite/
        __init__.py
        asgi.py
        settings.py
        urls.py
        wsgi.py

1.2自建项目主要文件夹

chat/
    __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

1.3移除不必须文件，保留必须文件，像这样

chat/
    __init__.py
    views.py

1.4在INSTALLED_APPS加入项目名

# mysite/settings.py
INSTALLED_APPS = [
    'chat',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

1.5创建聊天首页view

1.5.1在templates文件夹创建一个html文件

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

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>

1.6在view创建接受前端请求，返回html

# chat/views.py
from django.shortcuts import render

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

1.7在路由端chat/urls.py添加路径

# chat/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]

1.8在路由端mysite/urls.py添加路径

# mysite/urls.py
from django.conf.urls import include
from django.urls import path
from django.contrib import admin

urlpatterns = [
    path('chat/', include('chat.urls')),
    path('admin/', admin.site.urls),
]

1.9可以运行了

python3 manage.py runserver

这里有两个连接

http://127.0.0.1:8000/chat/

http://127.0.0.1:8000/chat/lobby/这个连接可能会404，因为还没有整合channels

1.10修改mysite/Saginaw.py

# mysite/asgi.py
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(),
    # Just HTTP for now. (We can add other protocols later.)
})

1.11在mysite/settings.py的INSTALLED_APP 添加channels

# mysite/settings.py
INSTALLED_APPS = [
    'channels',
    'chat',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

1.12在mysite/settings.py添加指向Channels

# mysite/settings.py
# Channels
ASGI_APPLICATION = 'mysite.asgi.application'

1.13再次运行

python3 manage.py runserver

2.聊天室服务器接口

2.1添加一个聊天页面视图view

新建一个空html页面文件chat/templates/chat/room.html

因此项目结构如下：

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

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">
    {{ room_name|json_script:"room-name" }}
    <script>
        const roomName = JSON.parse(document.getElementById('room-name').textContent);

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

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            document.querySelector('#chat-log').value += (data.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) {
            const messageInputDom = document.querySelector('#chat-message-input');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        };
    </script>
</body>
</html>

2.2在chat/views.py添加romm函数

# chat/views.py
from django.shortcuts import render

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

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

2.3修改chat/urls.py

# chat/urls.py
from django.urls import path

from . import views

urlpatterns = [
    path('', views.index, name='index'),
    path('<str:room_name>/', views.room, name='room'),
]

2.4运行

python3 manage.py runserver

Go to http://127.0.0.1:8000/chat/我们可以看到首页

http://127.0.0.1:8000/chat/lobby/可以看到展示一个空聊天记录信息

码农公寓

Django+channels实现WebSocket

1.第一部分：基础设置

1.1项目结构

1.2自建项目主要文件夹

1.3移除不必须文件，保留必须文件，像这样

1.4在INSTALLED_APPS加入项目名

1.5创建聊天首页view

1.5.1在templates文件夹创建一个html文件

1.6在view创建接受前端请求，返回html

1.7在路由端chat/urls.py添加路径

1.8在路由端mysite/urls.py添加路径

1.9可以运行了

1.10修改mysite/Saginaw.py

1.11在mysite/settings.py的INSTALLED_APP 添加channels

1.12在mysite/settings.py添加指向Channels

1.13再次运行

2.聊天室服务器接口

2.1添加一个聊天页面视图view

2.2在chat/views.py添加romm函数

2.3修改chat/urls.py

2.4运行

2.5聊天室输入hello回

码农公寓

1.第一部分：基础设置

1.1项目结构

1.2自建项目主要文件夹

1.3移除不必须文件，保留必须文件，像这样

1.4在INSTALLED_APPS加入项目名

1.5创建聊天首页view

1.5.1在templates文件夹创建一个html文件

1.6在view创建接受前端请求，返回html

1.7在路由端chat/urls.py添加路径

1.8在路由端mysite/urls.py添加路径

1.9可以运行了

1.10修改mysite/Saginaw.py

1.11在mysite/settings.py的INSTALLED_APP 添加channels

1.12在mysite/settings.py添加指向Channels

1.13再次运行

2.聊天室服务器接口

2.1添加一个聊天页面视图view

2.2在chat/views.py添加romm函数

2.3修改chat/urls.py

2.4运行

2.5聊天室输入hello回

相关文章