1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Title</title> 6 ????<script src="static/jquery-3.3.1.js"></script> 7 ????<link href="static/chatbar.css" rel="stylesheet" type="text/css"> 8 </head> 9 <body>10 <div class="chat">11 ????<div class="chat-title">12 ????????<div class="chat-title-font">聊天室</div>13 ????</div>14 ????<div class="chat-left">15 ????????<div class="chat-content">16 17 ????????</div>18 ????????<div class="chat-input">19 ????????????<div>聊天栏</div>20 ????????????<div><input id="input_contnet" type="text" style="width: 500px;height: 50px"></div>21 ????????????<div><input id="username" type="text"></div>22 ????????????<div><input id="input_btn" type="button" value="发送信息" style="margin-left: 490px"></div>23 ????????</div>24 ????</div>25 ????<div class="chat-right">26 27 ????</div>28 ????<div class="clear"></div>29 </div>30 31 <script>32 ????$(‘#input_btn‘).click(function () {33 ????????var input_contnet = document.getElementById(‘input_contnet‘);34 ????????var date = new Date();35 ????????$(‘.chat-content‘).append(‘<div>‘+input_contnet.value + ‘ ?????‘ + ‘Time:‘ + date +‘</div>‘);36 ????????$(‘#input_contnet‘).animate({scrollTop:$(‘#input_contnet‘).scrollHeight},500);37 ????????$.ajax(38 ????????????{39 ????????????????type: ‘post‘,40 ????????????????url: ‘chatbar‘,41 ????????????????data : {42 ????????????????????‘from‘:$(‘#username‘).val(),43 ????????????????????‘input_contnet‘:input_contnet.value,44 ????????????????},45 ????????????????success: function (data) {46 ????????????????????console.log(data);47 ????????????????}48 ????????????}49 ????????)50 ????});51 ????$(document).ready(function () {52 ????????get_msg()53 ????});54 ????function get_msg() {55 ????????$.ajax(56 ????????????{57 ????????????????type:‘post‘,58 ????????????????url:‘get_msg‘,59 ????????????????dataType:‘json‘,60 ????????????????data:{‘from‘:$(‘#username‘).val(),},61 ????????????????success:function (data) {62 ????????????????????console.log(data);63 ????????????????????get_msg();64 ????????????????}65 ????????????}66 ????????)67 ????}68 </script>69 </body>70 </html> 1 .chat{ 2 ????border: 4px solid black; 3 ????margin-top: 50px; 4 ????margin-left: 200px; 5 ????margin-right: 200px; 6 ????height: 450px; 7 } 8 ?9 .chat-title{10 ????border: 1px solid red;11 ????margin-left: 20px;12 ????margin-top: 20px;13 ????margin-right: 20px;14 ????height: 30px;15 16 }17 18 .chat-title-font{19 ????text-align: center;20 ????margin-top: 1px;21 ????font-weight: bolder;22 ????color: darkblue;23 ????font-size: larger;24 }25 26 .chat-left{27 ????border: 1px solid blue;28 ????margin-left: 20px;29 ????margin-top: 10px;30 ????height: 350px;31 ????width: 600px;32 ????float: left;33 }34 35 .chat-content{36 ????border: 1px solid red;37 ????margin-left: 20px;38 ????margin-top: 10px;39 ????margin-right: 20px;40 ????overflow: auto;41 ????height: 200px;42 }43 44 .chat-input{45 ????border: 1px solid red;46 ????margin-left: 20px;47 ????margin-top: 10px;48 ????margin-right: 20px;49 ????height: 100px;50 }51 52 .clear{53 ????clear: both;54 ????display: none;55 }56 .chat-right{57 ????border: 1px solid rebeccapurple;58 ????margin-left: 640px;59 ????margin-top: 10px;60 ????height: 350px;61 ????width: 280px;62 } 1 # -*- coding: utf-8 -*- 2 from __future__ import unicode_literals 3 from django.shortcuts import render,HttpResponse 4 import json,Queue 5 ?6 # Create your views here. 7 ?8 def ajax(req): 9 ????if req.method == ‘POST‘:10 ????????print(req.POST)11 ????????data = req.POST.get(‘text1‘)12 ????????data_dic = {‘data‘:data}13 ????????return HttpResponse(json.dumps(data_dic))14 ????else:15 ????????return render(req, ‘test.html‘)16 17 def jsonp(req):18 ????callback = req.GET.get(‘callback‘)19 ????data={‘1‘:‘a‘,‘2‘:‘b‘,‘3‘:‘c‘}20 ????return HttpResponse(‘%s(%s)‘%(callback,json.dumps(data)))21 22 global_msg_dict={}23 24 def chatbar(req):25 ????if req.method == ‘POST‘:26 ????????from_user = req.POST.get(‘from‘)27 ????????json_data_dic=json.dumps(req.POST)28 ????????if not global_msg_dict.get(from_user):29 ????????????global_msg_dict[from_user] = Queue.Queue()30 ????????global_msg_dict[from_user].put(json_data_dic)31 32 ????????return HttpResponse(‘----收到消息----‘)33 ????else:34 ????????return render(req,‘chatbar.html‘)35 36 37 def get_msg(req):38 ????if req.method==‘POST‘:39 ????????msg_list = []40 ????????from_user = ‘chenxin‘41 ????????if not global_msg_dict.get(from_user):42 ????????????global_msg_dict[from_user] = Queue.Queue()43 ????????msg_count = global_msg_dict[from_user].qsize()44 ????????if msg_count>0:45 ????????????for msg in range(msg_count):46 ????????????????msg_list.append(global_msg_dict[from_user].get())47 ????????else:48 ????????????try:49 ????????????????print(‘try‘)50 ????????????????msg_list.append(global_msg_dict[from_user].get(timeout=100))51 ????????????????print(msg_list)52 ????????????except Queue.Empty:53 ????????????????pass54 ????????return HttpResponse(json.dumps(msg_list))web聊天室
原文地址：https://www.cnblogs.com/cx59244405/p/9122540.html