当前位置: article > 正文

Python面试题：如何使用WebSocket实现实时Web应用

作者：秋刀鱼在做梦 | 2024-07-31 11:47:40

踩

使用 WebSocket 实现实时 Web 应用可以使你的应用程序具备实时双向通信的能力。以下是一个完整的指南，展示如何使用 Django Channels 和 WebSocket 实现一个简单的实时 Web 应用。

环境准备

安装 Django Channels:
```
pip install channels
1
```

创建 Django 项目:

django-admin startproject myproject
cd myproject
1
2

创建应用:
```
python manage.py startapp myapp
1
```

配置 Django 项目

添加应用到 INSTALLED_APPS:
在 myproject/settings.py 中，添加 channels 和你的应用 myapp：
```
INSTALLED_APPS = [
    ...
    'channels',
    'myapp',
]
1
2
3
4
5
```

配置 Channels:
在 settings.py 中，添加 Channels 配置：

ASGI_APPLICATION = 'myproject.asgi.application'

CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    },
}
1
2
3
4
5
6
7

创建 asgi.py 文件:
在 myproject 目录下创建一个 asgi.py 文件：

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

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

application = ProtocolTypeRouter({
    "http": get_asgi_application(),
    "websocket": AuthMiddlewareStack(
        URLRouter(
            myapp.routing.websocket_urlpatterns
        )
    ),
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

创建 WebSocket 路由

定义 WebSocket 路由:
在 myapp 目录下创建一个 routing.py 文件：

from django.urls import path
from . import consumers

websocket_urlpatterns = [
    path('ws/chat/', consumers.ChatConsumer.as_view()),
]
1
2
3
4
5
6

创建消费者

定义 WebSocket 消费者:
在 myapp 目录下创建一个 consumers.py 文件：

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        pass

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

        await self.send(text_data=json.dumps({
            'message': message
        }))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建前端页面

创建 HTML 页面:
在 myapp/templates/myapp 目录下创建一个 chat.html 文件：

<!DOCTYPE html>
<html>
<head>
    <title>Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input id="messageInput" type="text" size="100">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages">
    </ul>
    <script>
        const chatSocket = new WebSocket(
            'ws://' + window.location.host + '/ws/chat/'
        );

        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            document.querySelector('#messages').innerHTML += '<li>' + data.message + '</li>';
        };

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

        function sendMessage() {
            const messageInputDom = document.querySelector('#messageInput');
            const message = messageInputDom.value;
            chatSocket.send(JSON.stringify({
                'message': message
            }));
            messageInputDom.value = '';
        }
    </script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

创建视图:
在 myapp/views.py 中创建一个视图来渲染模板：

from django.shortcuts import render

def chat(request):
    return render(request, 'myapp/chat.html')
1
2
3
4

配置 URL:
在 myapp/urls.py 中添加 URL 路由：

from django.urls import path
from . import views

urlpatterns = [
    path('chat/', views.chat, name='chat'),
]
1
2
3
4
5
6

运行服务器

启动开发服务器:
```
python manage.py runserver
1
```
测试 WebSocket:
访问 http://127.0.0.1:8000/chat/，在输入框中输入消息并点击 “Send” 按钮，你应该会看到消息实时显示在页面上。

总结

通过上述步骤，你可以使用 Django Channels 和 WebSocket 创建一个简单的实时 Web 应用。Django Channels 提供了强大的功能，使得在 Django 中实现实时功能变得更加容易。你可以在此基础上扩展，添加更多功能和复杂的逻辑。

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