web聊天室
阿新 • • 發佈：2018-06-01
500px empty tex AR ole .sh resp cef ready 
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>HMTL9 <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 }CSS
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 pass 54 return HttpResponse(json.dumps(msg_list))python
web聊天室