快捷導(dǎo)航

Python如何使用WebSocket實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用

更新時(shí)間：2024年08月01日 11:20:54 作者：杰哥在此

這篇文章主要介紹了Python使用WebSocket實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用,Django?Channels?提供了強(qiáng)大的功能,使得在?Django?中實(shí)現(xiàn)實(shí)時(shí)功能變得更加容易,你可以在此基礎(chǔ)上擴(kuò)展,添加更多功能和復(fù)雜的邏輯,需要的朋友可以參考下

使用 WebSocket 實(shí)現(xiàn)實(shí)時(shí) Web 應(yīng)用可以使你的應(yīng)用程序具備實(shí)時(shí)雙向通信的能力。以下是一個(gè)完整的指南，展示如何使用 Django Channels 和 WebSocket 實(shí)現(xiàn)一個(gè)簡(jiǎn)單的實(shí)時(shí) Web 應(yīng)用。

環(huán)境準(zhǔn)備

安裝 Django Channels:

pip install channels

創(chuàng)建 Django 項(xiàng)目:

django-admin startproject myproject
cd myproject

創(chuàng)建應(yīng)用:

python manage.py startapp myapp

配置 Django 項(xiàng)目

添加應(yīng)用到 INSTALLED_APPS:
在 myproject/settings.py 中，添加 channels 和你的應(yīng)用 myapp：

INSTALLED_APPS = [
    ...
    'channels',
    'myapp',
]

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

ASGI_APPLICATION = 'myproject.asgi.application'
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer",
    },
}

創(chuàng)建 asgi.py 文件:
在 myproject 目錄下創(chuàng)建一個(gè) 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
        )
    ),
})

創(chuàng)建 WebSocket 路由

定義 WebSocket 路由:
在 myapp 目錄下創(chuàng)建一個(gè) routing.py 文件：

from django.urls import path
from . import consumers
websocket_urlpatterns = [
    path('ws/chat/', consumers.ChatConsumer.as_view()),
]

創(chuàng)建消費(fèi)者

定義 WebSocket 消費(fèi)者:
在 myapp 目錄下創(chuàng)建一個(gè) 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
        }))

創(chuàng)建前端頁(yè)面

創(chuàng)建 HTML 頁(yè)面:
在 myapp/templates/myapp 目錄下創(chuàng)建一個(gè) 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>

創(chuàng)建視圖:
在 myapp/views.py 中創(chuàng)建一個(gè)視圖來(lái)渲染模板：

from django.shortcuts import render
def chat(request):
    return render(request, 'myapp/chat.html')

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

from django.urls import path
from . import views
urlpatterns = [
    path('chat/', views.chat, name='chat'),
]

運(yùn)行服務(wù)器

啟動(dòng)開(kāi)發(fā)服務(wù)器:

python manage.py runserver

測(cè)試 WebSocket:
訪問(wèn) http://127.0.0.1:8000/chat/，在輸入框中輸入消息并點(diǎn)擊 “Send” 按鈕，你應(yīng)該會(huì)看到消息實(shí)時(shí)顯示在頁(yè)面上。

總結(jié)

通過(guò)上述步驟，你可以使用 Django Channels 和 WebSocket 創(chuàng)建一個(gè)簡(jiǎn)單的實(shí)時(shí) Web 應(yīng)用。Django Channels 提供了強(qiáng)大的功能，使得在 Django 中實(shí)現(xiàn)實(shí)時(shí)功能變得更加容易。你可以在此基礎(chǔ)上擴(kuò)展，添加更多功能和復(fù)雜的邏輯。

到此這篇關(guān)于Python使用WebSocket實(shí)現(xiàn)實(shí)時(shí)Web應(yīng)用的文章就介紹到這了,更多相關(guān)Python使用WebSocket內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: