实时沟通新体验！Django+Ajax+Vue打造简易聊天室

2023-10-04 04:12:54

使用 Django、Ajax 和 Vue.js 构建实时聊天室

在现代互联网世界中，实时通信已经成为人们互动不可或缺的一部分。聊天室是广泛应用于社交、游戏、在线教育等领域的常见实时通信工具。如果你想要打造一个属于自己的聊天室，那么这份指南将为你提供详细的说明，带你一步步使用 Django、Ajax 和 Vue.js 创建一个简易的聊天室。

准备工作

在着手开发之前，我们需要准备好以下工具和环境：

Python 3.x
Django 3.x
Vue.js 2.x
Node.js
npm

项目结构

我们的项目将采用以下结构：

my_chat_app/
    manage.py
    my_chat_app/
        __init__.py
        settings.py
        urls.py
        wsgi.py
    chat/
        __init__.py
        models.py
        views.py
    templates/
        chat/
            index.html
    static/
        js/
            main.js
        css/
            style.css

数据库模型

首先，我们需要定义数据库模型。在 chat/models.py 中，我们定义了一个消息模型，它包含消息的内容、发送者和发送时间。

from django.db import models
from django.contrib.auth.models import User

class Message(models.Model):
    content = models.TextField()
    sender = models.ForeignKey(User, on_delete=models.CASCADE)
    timestamp = models.DateTimeField(auto_now_add=True)

视图函数

接下来，我们需要定义视图函数来处理用户请求。在 chat/views.py 中，我们定义了一个 index 视图函数，它负责渲染聊天室页面。

from django.shortcuts import render
from django.contrib.auth.decorators import login_required

@login_required
def index(request):
    messages = Message.objects.all()
    return render(request, 'chat/index.html', {'messages': messages})

模板

在 templates/chat/index.html 中，我们定义了聊天室的模板。它包含一个消息列表和一个用于发送新消息的表单。

{% extends "base.html" %}

{% block content %}
    <h1>聊天室</h1>

    <ul id="messages">
        {% for message in messages %}
            <li>{{ message.content }} - {{ message.sender }} - {{ message.timestamp }}</li>
        {% endfor %}
    </ul>

    <form id="chat-form">
        <input type="text" name="content" placeholder="请输入消息内容">
        <input type="submit" value="发送">
    </form>

{% endblock %}

前端代码

在 static/js/main.js 中，我们定义了前端代码，包括 Vue.js 代码和一些辅助函数。

// Vue.js代码
var app = new Vue({
    el: '#app',
    data: {
        messages: [],
        content: ''
    },
    methods: {
        sendMessage: function() {
            var data = {
                content: this.content
            };
            $.ajax({
                url: '/chat/send_message/',
                type: 'POST',
                data: data,
                success: function(response) {
                    app.messages.push(response.message);
                    app.content = '';
                }
            });
        }
    }
});

// 辅助函数
function scrollToBottom() {
    var messages = document.getElementById('messages');
    messages.scrollTop = messages.scrollHeight;
}

function formatTimestamp(timestamp) {
    var date = new Date(timestamp);
    return date.toLocaleString();
}

后端代码

在 chat/views.py 中，我们定义了 send_message 视图函数，它负责处理用户发送的新消息。

from django.http import HttpResponse
from django.contrib.auth.decorators import login_required

@login_required
def send_message(request):
    if request.method == 'POST':
        content = request.POST['content']
        message = Message(content=content, sender=request.user)
        message.save()
        return HttpResponse({'message': message.to_json()})
    else:
        return HttpResponseBadRequest()