Category:web开发
Article From:https://www.cnblogs.com/cx59244405/p/9122540.html

 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">chat room</div>
13     </div>
14     <div class="chat-left">
15         <div class="chat-content">
16 
17         </div>
18         <div class="chat-input">
19             <div>Chat column</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="Send information " 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>

HMTL

 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('----Receive messages -')
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

 

Link of this Article: Web chat room

Leave a Reply

Your email address will not be published. Required fields are marked *