Django WebSocket 聊天室超级详细教程

下面我将从创建项目开始，教你实现一个基于WebSocket的聊天室。我们将使用Django Channels来实现WebSocket功能。

我们先来看一下效果，三个窗口一个聊天房间，消息完全实时同步，这就是websocket的强大之处！！！

请添加图片描述

1.安装必要模块

首先，创建一个新的Django项目：

# 直接使用PyCharm创建一个普通项目即可，新版本PyCharm可以直接创建Django项目就不需要再安装Django
pip install django

# 安装Channels和daphne
# 为什么我要同时安装这两个部分因为为了避免不兼容问题，同时可以用daphne来执行asgi异步命令，这一点很重要！！！

pip install channels['daphne']

2. 创建Django项目和应用

# 然后直接创建Django项目
django-admin startproject chatproject

# 切换到项目目录下
cd chatproject

# 创建chat应用
python manage.py startapp chat

3. 配置项目

编辑 chatproject/settings.py：

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'chat',  # 添加聊天应用
    'channels',  # 添加Channels
]

# 在文件末尾添加
ASGI_APPLICATION = 'chatproject.asgi.application'

# 使用内存通道层（生产环境应该使用Redis等）
CHANNEL_LAYERS = {
    "default": {
        "BACKEND": "channels.layers.InMemoryChannelLayer"
    }
}

4. 创建ASGI应用

创建 chatproject/asgi.py：

这里其实，如果在chatproject下有asgi.py就可以直接添加代码。

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

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

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

5. 创建WebSocket路由

在 chat 应用中创建 routing.py：

from django.urls import re_path
from . import consumers

websocket_urlpatterns = [
    re_path(r'ws/chat/(?P<room_name>\w+)/$', consumers.ChatConsumer.as_asgi()),
]

6. 创建WebSocket消费者

在 chat 应用中创建 consumers.py：

import json
from channels.generic.websocket import AsyncWebsocketConsumer

class ChatConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        self.room_name = self.scope['url_route']['kwargs']['room_name']
        self.room_group_name = f'chat_{self.room_name}'

        # 加入房间组
        await self.channel_layer.group_add(
            self.room_group_name,
            self.channel_name
        )

        await self.accept()

    async def disconnect(self, close_code):
        # 离开房间组
        await self.channel_layer.group_discard(
            self.room_group_name,
            self.channel_name
        )

    # 接收来自WebSocket的消息
    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']
        username = text_data_json['username']

        # 发送消息到房间组
        await self.channel_layer.group_send(
            self.room_group_name,
            {
                'type': 'chat_message',
                'message': message,
                'username': username
            }
        )

    # 从房间组接收消息
    async def chat_message(self, event):
        message = event['message']
        username = event['username']

        # 发送消息到WebSocket
        await self.send(text_data=json.dumps({
            'message': message,
            'username': username
        }))

7. 创建视图和模板

在 chat/views.py 中：

from django.shortcuts import render

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

创建 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">
    
    <script>
        const roomName = '{{ room_name }}';
        const username = '{{ request.user.username|default:"Anonymous" }}';
        
        const chatSocket = new WebSocket(
            'ws://' + window.location.host +
            '/ws/chat/' + roomName + '/');
        
        chatSocket.onmessage = function(e) {
            const data = JSON.parse(e.data);
            const message = username === data.username 
                ? 'You: ' + data.message 
                : data.username + ': ' + data.message;
            document.querySelector('#chat-log').value += (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键
                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,
                'username': username
            }));
            messageInputDom.value = '';
        };
    </script>
</body>
</html>

8. 配置URL

在 chatproject/urls.py 中：

from django.contrib import admin
from django.urls import path
from chat import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('chat/<str:room_name>/', views.room, name='room'),
]

9. 运行项目

# 这里我们先实现迁移文件，其实这里我们只是简单实现，并没有存到数据库里，我们先掌握websocket运行逻辑，当然这 # 里消息存储在内存里，刷新页面消息就消失了
python manage.py migrate

# 注意这里是重点，为什么不用下边这条指令，因为会默认执行wsgi也就是同步执行，我们的websocket需要异步asgi
# 我们下载channels和daphne就是为了此刻
！！！不要执行python manage.py runserver

# 后边你可以指定端口号
！！！执行这个	daphne chatproject.asgi:application --port 8080

10. 测试聊天室

  1. 打开浏览器访问 http://127.0.0.1:8000/chat/lobby/
  2. 在另一个窗口或浏览器中打开相同的URL
  3. 现在你可以在这两个窗口之间发送消息了

总结：最容易出现问题的就是从wsgi到asgi的执行方式转变，要注意我在文中的重要提示！！！

# django # websocket # sqlite # python # 后端
Logo
火山引擎 ADG 社区

火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。

更多推荐

Chess用户界面设计：Tailwind CSS样式系统和组件库

GitHub推荐项目精选中的ch/chess是一个类似chess.com的多人在线象棋平台，它采用现代化的前端技术栈构建，尤其在用户界面设计上通过Tailwind CSS样式系统和组件库实现了优雅且功能丰富的交互体验。本文将深入探讨该项目如何利用Tailwind CSS打造一致的设计语言和高效的组件系统，为象棋爱好者提供沉浸式的游戏界面。## 🎨 Tailwind CSS样式系统：构建统一视

avatar 火山引擎 ADG 社区

终极指南：GPT-Engineer如何通过AI自动发现代码问题并提升质量

GPT-Engineer是一款强大的AI驱动代码工具，它能帮助开发者自动检测潜在代码问题、优化代码质量，让编程效率提升3倍以上。无论是新手还是资深开发者，都能通过这款工具轻松发现代码中的隐藏缺陷，减少调试时间，释放更多精力在创造性工作上。## 一键发现代码问题：GPT-Engineer的AI审查魔力GPT-Engineer的核心能力在于其内置的智能代码分析系统。通过集成Python代码格式

avatar 火山引擎 ADG 社区

SatDump中的纠错编码技术：从RS码到Turbo码的完整实现指南

在卫星数据传输过程中，信号往往会受到各种干扰，导致数据错误。SatDump作为一款通用卫星数据处理软件，集成了多种先进的纠错编码技术，确保从卫星接收到的数据能够准确解码。本文将深入解析SatDump中从Reed-Solomon（RS）码到Turbo码的实现细节，帮助读者理解这些技术如何保障卫星通信的可靠性。## 为什么纠错编码对卫星数据至关重要？卫星与地面站之间的通信链路面临着空间辐射、大

avatar 火山引擎 ADG 社区