【即时通讯】轮询方式实现

技术栈

• LayUI、jQuery实现前端效果。
• django4.2、django-ninja实现后端接口。
  代码仓 - 后端
  代码仓 - 前端

实现功能

• 首次访问页面并发送消息时需要设置昵称
• 发送内容为空时要提示用户不能发送空消息
• 前端定时获取消息，然后展示在页面上。

效果展示

• 首次发送需要设置昵称
  
• 发送消息与消息展示
  
• 提示用户不能发送空消息
  

后端接口

• 发送消息

DB = []
@router.post("/poll/send/message")
def send_message_api(request: WSGIRequest, message: MessageSchema) -> JsonResponse:
    """
    轮询通讯接收消息接口
    :param request: WSGIRequest
    :param message: MessageSchema
    :return: JsonResponse
    """
    message_info = message.dict()
    DB.append(message_info)
    return JsonResponse({"ok": True})

• 获取消息

@router.get("/poll/get/messages")
def get_messages_api(request: WSGIRequest, startIndex: int) -> JsonResponse:
    """
    轮询通讯获取消息接口
    :param request: WSGIRequest
    :param startIndex: int 上次获取聊天记录的最后位置
    """
    context = {
        "data": DB[startIndex:],
        "maxIndex": len(DB)
    }
    return JsonResponse(context)