对话中的深度剖析：Django-channels、Vue3、WebSocket构建即时聊天室（4）

2023-03-25 01:04:07

构建即时聊天室：互动与前端优化

构建一个功能强大的即时聊天室涉及消息发送、存储和前端优化等关键方面。在本指南的第四部分中，我们将深入探讨这些主题，助力你打造一个流畅且用户友好的聊天体验。

聊天消息的发送

在即时聊天中，实时消息传递至关重要。我们将利用 WebSocket，一种全双工通信协议，实现即时响应和消息交付。以下是实现步骤：

在 Vue 组件中添加 WebSocket 连接

export default {
  name: "Chat",
  data() {
    return {
      socket: null,
    };
  },
  mounted() {
    this.socket = new WebSocket("ws://localhost:8000/chat/");
  },
};

监听 WebSocket 事件

this.socket.addEventListener("message", (event) => {
  // 处理收到的消息
});

发送聊天消息

this.socket.send(JSON.stringify({
  message: "你好，世界！"
}));

聊天信息的存储

为了持久化聊天信息，我们将使用 Django 的模型：

创建聊天信息模型

from django.db import models

class ChatMessage(models.Model):
    sender = models.ForeignKey("auth.User", on_delete=models.CASCADE)
    receiver = models.ForeignKey("auth.User", on_delete=models.CASCADE)
    message = models.TextField()
    timestamp = models.DateTimeField(auto_now_add=True)

存储聊天信息

chat_message = ChatMessage(
    sender=request.user,
    receiver=receiver,
    message=message,
)
chat_message.save()

客户端页面优化

优化客户端界面对于提供无缝的用户体验至关重要：

使用 CSS 优化布局

#chat-window {
  width: 100%;
  height: 500px;
  background-color: #ffffff;
  overflow-y: scroll;
}

使用 JavaScript 优化消息显示

const chatWindow = document.getElementById("chat-window");

socket.addEventListener("message", (event) => {
  const chatMessage = document.createElement("div");
  chatMessage.classList.add("chat-message");
  chatMessage.innerHTML = `<b>${message.sender}:</b> ${message.message}`;
  chatWindow.appendChild(chatMessage);
  chatWindow.scrollTop = chatWindow.scrollHeight;
});