Django SocketIO 网络聊天示例

本示例使用 Django 和 Socket.IO 构建一个简单的网络聊天应用程序。因此，您需要先掌握 Django 和 Socket.IO 的基本知识。

功能

此示例程序的功能如下：

• 用户可以登录或注册新账户。
• 用户可以创建一个聊天室，并邀请其他用户加入。
• 聊天室成员可以发送消息。
• 实时更新聊天记录。

技术栈

此应用程序使用以下技术栈：

• Django：一个基于 Python 的 Web 应用程序框架。
• Django Channels：使 Django 具备实时 Web 功能的框架。
• Socket.IO：一个实时应用程序框架，可用于在浏览器和服务器之间建立双向通信通道。

安装

要运行此示例程序，您需要按照以下步骤进行安装：

1. 克隆代码：git clone https://github.com/<your_username>/django-socketio-chat.git
2. 进入项目目录：cd django-socketio-chat
3. 安装依赖：pip install -r requirements.txt
4. 进行数据库迁移：python manage.py migrate
5. 运行 Django 服务器：python manage.py runserver

使用

运行应用程序后，在浏览器中输入 http://localhost:8000，即可访问应用程序。您将被重定向到登录页面。如果您没有帐户，请单击“注册”，然后创建一个新的帐户。登录后，您将看到一个名为“主聊天室”的聊天室列表。单击列表中的一个聊天室名称即可打开该聊天室。您可以邀请其他用户加入，也可以与聊天室成员发送消息。

代码片段

Django 视图函数

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from django.contrib.auth import authenticate, login
from django.contrib import messages

def login_view(request):
    if request.user.is_authenticated:
        return redirect('chat:chat_rooms')
    if request.method == 'POST':
        username = request.POST['username']
        password = request.POST['password']
        user = authenticate(request, username=username, password=password)
        if user is not None:
            login(request, user)
            return redirect('chat:chat_rooms')
        else:
            messages.error(request, 'Invalid username or password.')
    return render(request, 'chat/login.html')

@login_required
def chat_rooms(request):
    chat_rooms = ChatRoom.objects.filter(members=request.user)
    context = {'chat_rooms': chat_rooms}
    return render(request, 'chat/chat_rooms.html', context)

@login_required
def chat_room(request, chat_room_id):
    chat_room = ChatRoom.objects.get(id=chat_room_id)
    if request.user not in chat_room.members.all():
        return redirect('chat:chat_rooms')
    messages = Message.objects.filter(chat_room=chat_room).order_by('-created_at')[:50][::-1]
    context = {'chat_room': chat_room, 'messages': messages}
    return render(request, 'chat/chat_room.html', context)

Socket.IO

var chatSocket = io('/chat');

chatSocket.on('connect', function() {
    chatSocket.emit('join', {'chat_room_id': chat_room_id});
});

chatSocket.on('new_message', function(data) {
    if (data.user_id == my_user_id) {
        $("#message-input").val("");
    }
    var messageHtml = $("#messages").html() + `
        <div class="message-info">
            <div class="message-author">${data.username}</div>
            <div class="message-time">${data.time}</div>
        </div>
        <div class="message-text">${data.message}</div>
    `;
    $("#messages").html(messageHtml);
});

$("#message-input").keypress(function(event) {
    if (event.which == 13 && event.target.value) {
        event.preventDefault();
        chatSocket.emit('send_message', {'chat_room_id': chat_room_id, 'message': event.target.value});
    }
});

总结

本示例程序演示了如何使用 Django 和 Socket.IO 构建一个简单的网络聊天应用程序。本文档介绍了此应用程序的功能、技术栈、安装和使用方法，并提供了部分代码片段。如需了解更多信息，请参阅示例程序的 Github 仓库。