Python使用django框架实现多人在线匿名聊天的小程序


Posted in Python onNovember 29, 2017

最近看到好多设计类网站,都提供了多人在线匿名聊天的小功能,感觉很有意思,于是基于python的django框架自己写了一个,支持手动实时更名,最下方提供了完整的源码.

在线聊天地址(无需登录,开一个窗口,代表一个用户):

http://zhaozhaoli.vicp.io/chatroom/happy/

移动端聊天效果图:

Python使用django框架实现多人在线匿名聊天的小程序

网页版聊天效果图:

Python使用django框架实现多人在线匿名聊天的小程序

实现思路:

发送的消息通过ajax先写入数据库,通过ajax的循环请求,将写入数据库的消息显示到前端界面.

前端核心代码:

<script>
 $(function () {
  $("#send").click(function () {
   var input_info = $("#input_info").val();
   if (input_info.length < 1) {
    alert("请输入字符后发送");
    return;
   } else if (input_info.length > 200) {
    alert("每次发送不可以超出200个字符哈~");
    return;
   }
   else {
    // 获取csrftoken的值
    var csrf_value = $('#csrfmiddlewaretoken').text();
    var user_id = $("#user_id").text();
    var user_name = $("#user_name").text();
    $.ajax({
     'url': '/chatroom/save_chat_log/',
     'data': {
      'chat_content': input_info,
      'user_id': user_id,
      'user_name': user_name,
      'user_ip': '127.127.127.127',
      'csrfmiddlewaretoken': csrf_value
     },
     'type': 'post',
     'async': false,
     'success': function (data) {
     }
    });
    $("#input_info").val("");
    console.log($("#show_info").scrollTop());
   }
  })
 })
</script>
<script>
 var user_id = $("#user_id").text();
 var user_name = $("#user_name").text();
 $(function () {
  var last_id = 0;
  var csrf_value2 = $('#csrfmiddlewaretoken').text();
  function update_info() {
   // ajax 获取最新数据
   $.ajax({
    'url': '/chatroom/get_near_log/',
    'data':{"last_id":last_id,'csrfmiddlewaretoken': csrf_value2},
    'type':'post',
    'async': false,
    'success':function (data) {
     if (parseInt(last_id) == parseInt(JSON.parse(data.data).last_id)){
      return;
     }
     //获取后台传过来的id值,并将值存储到全局变量中
     last_id = JSON.parse(data.data).last_id;
     // 将内容读取,并打印
     content = JSON.parse(data.data).info;
     for (var i=0; i< content.length; i++){
      if (parseInt(content[i].user_id) == parseInt($("#user_id").text())){
       var html = "<div class='my_info'><span>"+content[i].user_name+"</span></div>";
       html = html + "<div class='my_one_info'>"+content[i].mess+"</div>";
       $("#content").append(html);
      }else{
       var html = "<div class='other_info'><span>"+content[i].user_name+"</span></div>";
       html = html + "<div class='other_one_info'>"+content[i].mess+"</div>";
       $("#content").append(html);
      }
      $("#show_info").scrollTop($("#content").height())
     }
    }
   })
  }
  update_info();
  setInterval(update_info, 1000);
 })
</script>
<script>
 $(function () {
  //监听键盘点击
  $(document).keyup(function (event) {
   if (event.keyCode == 13){
    $("#send").click();
   }
  })
 })
</script>
<script>
 $(function () {
  $("#change_name").click(function () {
   // 获取新名称
   var new_name = String($("#new_name").val());
   // 检查新名称是否合法
   // 如果合法
   if (new_name.length<11 && new_name.length>0){
    console.log(new_name);
    $("#user_name").text(new_name);
    $("#new_name").val("")
   }else{
    alert("昵称长度应为1-10,请重新输入");
    $("#new_name").val("")
   }
  })
 })
</script>
<div id="main_form">
 <div class="my_nike_name">我的昵称:<span id="user_name">{{user_name}}</span><span><button id="change_name">更名</button><input type="text" id="new_name"></span></div>
 <div id="show_info">
  <div id="content">
  </div>
 </div>
 <br>
 <div class="my_nike_name">消息</div>
 <input type="text" id="input_info">
 <button id="send">发送消息</button>
 <div id="user_id" style="display: none">{{user_id}}</div>
 <div id="user_ip" style="display: none">{{user_ip}}</div>
 <span id ="csrfmiddlewaretoken" style="display: none">{{csrf_token}}</span>
</div>

后端核心代码:

# 返回基础页面
def happy(request):
 user_info = UserInfo()
 # 初始用户名为匿名用户
 user_name = "匿名用户"
 user_info.user_name = user_name
 # 利用时间产生临时ID
 user_id = int(time.time())
 user_info.user_id = user_id
 # 获取用户ip
 user_ip = wrappers.get_client_ip(request)
 user_info.user_ip = user_ip
 user_info.save()
 return render(request, 'chatroom/happy.html', locals())
# 保存聊天内容
def save_chat_log(request):
 try:
  print("后端收到了ajax消息")
  chatinfo = ChatInfo()
  # 获取前端传过来的数据
  chat_content = wrappers.post(request, "chat_content")
  user_ip = wrappers.get_client_ip(request)
  user_name = wrappers.post(request, "user_name")
  user_id = wrappers.post(request, "user_id")
  # 将数据存入数据库
  chatinfo.chat_content = chat_content
  chatinfo.user_ip = user_ip
  chatinfo.user_name = user_name
  chatinfo.user_id = user_id
  chatinfo.save()
  return JsonResponse({"ret":0})
 except:
  return JsonResponse({"ret":"保存出现问题"})
  pass
# 获取最近的聊天信息
def get_near_log(request):
 try:
  # 获取数据库内所有的信息
  all_info = ChatInfo.objects.all()
  # 获取数据库内最后一条消息的id
  id_max =ChatInfo.objects.aggregate(Max('id'))
  last_id = id_max["id__max"]
  # print("后台数据库内最新的id为", last_id)
  # 获取请求的id值
  old_last_id = wrappers.post(request, "last_id")
  print(old_last_id,"<-<-")
  print(old_last_id, type(old_last_id),"-->")
  # print("后台发送过来的id为",old_last_id)
  # 返回的信息字典,返回当前时间(current_date),返回信息列表(id_info)
  # 如果第一次请求,则回复最后一条消息的id
  if int(old_last_id) == 0:
   user_ip = wrappers.get_client_ip(request)
   result_dict = dict()
   result_dict["last_id"] = last_id
   result_dict["info"] = [{"id":"-->", "mess":"欢迎"+user_ip+"来到聊天室!", "user_name":"系统消息:"}]
   result_dict["user_id"] = ""
   result_dict = json.dumps(result_dict,ensure_ascii=False)
   # print("第一次握手")
   return JsonResponse({"data":result_dict})
  # 如果数据内没有消息更新
  elif int(old_last_id) >= int(last_id):
   result_dict = dict()
   result_dict["last_id"] = last_id
   result_dict["info"] = [{last_id:"欢迎再次来到聊天室!"}]
   result_dict["user_id"] = ""
   result_dict = json.dumps(result_dict,ensure_ascii=False)
   # print("一次无更新的交互")
   return JsonResponse({"data":result_dict})
  # 如果有消息更新
  else:
   # print("有更新的回复")
   result_dict = dict()
   # 获取新的消息对象集合
   the_new_info =ChatInfo.objects.filter(id__gt=old_last_id)
   # 创建消息列表
   mess_list = list()
   # 将最新的消息组成字典进行返回
   for info in the_new_info:
    # print(info)
    # print ("-->",info.chat_content, info.id)
    # 创建消息字典
    mess_dic = dict()
    mess_dic["id"] = info.id
    mess_dic["mess"] = info.chat_content
    # 将消息所属的用户添加到消息列表
    mess_dic["user_name"] = info.user_name
    mess_dic["user_id"] = info.user_id
    # 将消息字典添加到消息列表
    mess_list.append(mess_dic)
  result_dict["last_id"] = last_id
  result_dict["info"] = mess_list
  # result_dict["info"] = [{"id":3, "mess":"hahah"}, {"id":4, "mess":"666"}]
  result_dict = json.dumps(result_dict,ensure_ascii=False)
  # print("--->>>", type(result_dict))
  return JsonResponse({"data":result_dict})
 except:
  return JsonResponse({"ret":"刷新出现问题"})
  pass

总结

以上所述是小编给大家介绍的Python使用django框架实现多人在线匿名聊天的小程序,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Python 相关文章推荐
实例讲解python函数式编程
Jun 09 Python
在Python中使用swapCase()方法转换大小写的教程
May 20 Python
python计算文本文件行数的方法
Jul 06 Python
python内置函数:lambda、map、filter简单介绍
Nov 16 Python
python中返回矩阵的行列方法
Apr 04 Python
总结python中pass的作用
Feb 27 Python
对Pytorch神经网络初始化kaiming分布详解
Aug 18 Python
Python字符串大小写转换拼接删除空白
Sep 19 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
Apr 02 Python
使用anaconda安装pytorch的实现步骤
Sep 03 Python
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
May 12 Python
一些让Python代码简洁的实用技巧总结
Aug 23 Python
Python实现的计数排序算法示例
Nov 29 #Python
Scrapy框架CrawlSpiders的介绍以及使用详解
Nov 29 #Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
Nov 29 #Python
Python快速排序算法实例分析
Nov 29 #Python
Python3学习urllib的使用方法示例
Nov 29 #Python
Python实现的选择排序算法示例
Nov 29 #Python
Python实现的桶排序算法示例
Nov 29 #Python
You might like
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
提高PHP性能的编码技巧以及性能优化详细解析
2013/08/24 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
2016/01/08 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
ES6中的箭头函数实例详解
2017/04/06 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
Python中删除文件的程序代码
2011/03/13 Python
使用Python下载Bing图片(代码)
2013/11/07 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python实现购物程序思路及代码
2017/07/24 Python
Python多进程并发与多线程并发编程实例总结
2018/02/08 Python
Python global全局变量函数详解
2018/09/18 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
Python Django搭建网站流程图解
2020/06/13 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
HTML5 placeholder属性详解
2016/06/22 HTML / CSS
AE美国鹰美国官方网站:American Eagle Outfitters
2016/08/22 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
市场拓展计划书
2014/05/03 职场文书
关于感谢信的范文
2015/01/23 职场文书
合理化建议书
2015/02/04 职场文书
2015年高中生国庆节演讲稿
2015/07/30 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
Python 中的单分派泛函数你真的了解吗
2021/06/22 Python
一文搞懂Python Sklearn库使用
2021/08/23 Python
Linux中如何安装并部署Redis
2022/04/18 Servers
MySQL的prepare使用以及遇到的bug
2022/05/11 MySQL