码迷,mamicode.com
首页 > Web开发 > 详细

web聊天室

时间:2018-06-01 17:38:05      阅读:377      评论:0      收藏:0      [点我收藏+]

标签:技术   分享   lang   fun   return   ==   overflow   end   callback   

技术分享图片
 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>
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(----收到消息----)
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聊天室

标签:技术   分享   lang   fun   return   ==   overflow   end   callback   

原文地址:https://www.cnblogs.com/cx59244405/p/9122540.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!