如何在项目中正确使用WebSocket

服务端给客户端推送消息的效果#

• 轮询(伪)
• 长轮询(伪)
• websocket(真)

轮询(效率低、基本不用)#

Copy

""" 让客户端浏览器每隔一段时间(每隔5s)主动朝服务端偷偷的发送请求 缺点: 消息延迟(5S+网络延迟) 请求次数多(24小时消耗资源都很高) """

长轮询(使用广泛、兼容性好)#

Copy

""" 服务端给每一个客户端浏览器创建一个队列，浏览器通过ajax偷偷的朝服务器索要队列中的数据，如果没有数据则会原地阻塞30s但是不会一直阻塞而是利用timeout参数加异常处理的方式，如果超出时间限，客户端在此发送请求数据的请求(递归调用) 优点: 消息基本没有延迟 请求次数降低了，节省资源 """ # 目前大公司都喜欢使用长轮询，比如网页版的qq和微信

基于长轮询原理实现简易版本的群聊功能

ps:当你使用pycharm创建django项目的时候会自动帮你创建模版文件夹，但是你在终端或者服务器上创建项目的时候是没有该文件夹的

当全局没有模版文件夹的时候，那么在查找模版的时候顺序是按照配置文件中注册了的app的顺序，从上往下一次查找(实操演示)

Copy

INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'app01.apps.App01Config', ]

Copy

# 后端 from django.shortcuts import render,HttpResponse import queue from django.http import JsonResponse # Create your views here. q_dict = {} # {'jason'："jason的队列对象",...} def home(request): # 获取自定义的客户端唯一标示 name = request.GET.get('name') # 给字典添加键值对 键是唯一表示 值是队列对象 q_dict[name] = queue.Queue() # 返回给前端一个聊天室页面 return render(request,'home.html',locals()) def send_msg(request): # 获取用户发送的消息 content = request.POST.get('content') # 给多有的队列放一份当前数据 for q in q_dict.values(): q.put(content) return HttpResponse('OK') def get_msg(request): # 获取客户端唯一标示 name = request.GET.get('name') # 获取唯一标示对应的队列对象 q = q_dict.get(name) back_dic = {'status':True,'msg':''} try: data = q.get(timeout=10) back_dic['msg'] = data except queue.Empty as e: back_dic['status'] = False return JsonResponse(back_dic)

Copy

<h1>聊天室:{ { name }}</h1> <div> <input type="text" id="txt"> <button onclick="sendMsg()">发送消息</button> </div> <h1>聊天记录</h1> <div class="record"> </div> <script> function sendMsg() { $.ajax({ url:'/send_msg/', type:'post', data:{'content':$('#txt').val()}, success:function (args) { } }) } function getMsg() { $.ajax({ url:'/get_msg/', type:'get', data:{'name':'{ { name }}'}, success:function (args) { if (args.status){ // 将消息通过DOM操作渲染到前端页面 // 1 创建标签 p标签 var pELe = $('<p>'); // 2 给p标签添加文本内容 pELe.text(args.msg) // 3 将该p标签渲染到div内部 $('.record').append(pELe) } // 再次朝后端发请求 getMsg() } }) } // 等待页面加载完毕之后 立刻执行 $(function