在Django中使用WebSocket进行实时通信

2023-04-11 00:00:00 django 实时 通信

在Django中使用WebSockets可以通过Django Channels来实现。下面是一份简单的代码实现：

安装Django Channels：

pip install channels
  1. 配置settings.py文件
INSTALLED_APPS = [
    ...
    'channels',
]

ASGI_APPLICATION = 'myapp.routing.application'
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    },
}
  1. 创建一个routing.py文件
from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import path
from myapp.consumers import MyWebSocketConsumer

application = ProtocolTypeRouter({
    "websocket": URLRouter([
        path("ws/", MyWebSocketConsumer.as_asgi()),
    ])
})

此处我们创建了一个WebSocket URL Router，并将其指向我们的consumer。

  1. 创建consumer
from channels.generic.websocket import AsyncWebsocketConsumer
import json

class MyWebSocketConsumer(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']

        # Echo the message back to the client
        await self.send(text_data=json.dumps({
            'message': message
        }))

在上面的代码中，我们处理了连接和断开连接。接着，我们重载了receive()方法，来处理数据。在这个例子中，我们将数据解析成JSON字符串，并简单的回应了一个相同的消息。

  1. 集成视图模板
from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return render(request, 'index.html')
  1. 创建一个HTML模板(index.html)
<!DOCTYPE html>
<html>
<head>
    <title>WebSockets Example</title>
</head>
<body>
    <h1>WebSocket Example</h1>
    <div id="messages"></div>
    <input type="text" id="message-box">
    <button id="send-button">Send</button>

    <script>
        const socket = new WebSocket('ws://localhost:8000/ws/');

        socket.onmessage = function(event) {
            const data = JSON.parse(event.data);
            const messagesDiv = document.querySelector('#messages');
            const messageElement = document.createElement('div');
            messageElement.innerHTML = data.message;
            messagesDiv.appendChild(messageElement);
        }

        const sendButton = document.querySelector('#send-button');
        sendButton.onclick = function() {
            const messageBox = document.querySelector('#message-box');
            const message = messageBox.value;
            socket.send(JSON.stringify({
                'message': message,
            }));
        }
    </script>

</body>
</html>

在这个模板中，我们简单地添加一个输入框和一个按钮，当用户在文本框中输入一条消息，他们可以按下按钮将消息发送到服务器。服务器将转发这个消息回到客户端，使其在HTML页面上显示。

最后，在终端中输入以下命令启动Django服务器：

python manage.py runserver

现在可以试着在浏览器中打开http://localhost:8000查看效果，输入一条消息并点击“发送”按钮，应该会在页面上看到输入的消息。

相关文章