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之永远强大的函数
Sep 14 Python
Python实现统计英文单词个数及字符串分割代码
May 28 Python
解决Python中字符串和数字拼接报错的方法
Oct 23 Python
python导出hive数据表的schema实例代码
Jan 22 Python
Python 反转字符串(reverse)的方法小结
Feb 20 Python
python爬取网页转换为PDF文件
Jun 07 Python
解决django前后端分离csrf验证的问题
Feb 03 Python
pytz格式化北京时间多出6分钟问题的解决方法
Jun 21 Python
python简单鼠标自动点击某区域的实例
Jun 25 Python
解决pip install psycopg2出错问题
Jul 09 Python
Python机器学习工具scikit-learn的使用笔记
Jan 28 Python
python opencv人脸识别考勤系统的完整源码
Apr 26 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微信开发自定义菜单
2016/08/27 PHP
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
利用PHP判断是手机移动端还是PC端访问的函数示例
2017/12/14 PHP
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
浅谈JavaScript字符集
2014/05/22 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
javascript随机显示背景图片的方法
2015/06/18 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
2017/01/03 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
Webpack如何引入bootstrap的方法
2017/06/17 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
Python生成随机MAC地址
2015/03/10 Python
Python变量作用范围实例分析
2015/07/07 Python
Python的Scrapy爬虫框架简单学习笔记
2016/01/20 Python
Python的Flask框架中的Jinja2模板引擎学习教程
2016/06/30 Python
利用python打印出菱形、三角形以及矩形的方法实例
2017/08/08 Python
python线程池threadpool实现篇
2018/04/27 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
用uWSGI和Nginx部署Flask项目的方法示例
2019/05/05 Python
Django 解决由save方法引发的错误
2020/05/21 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
给老师的一封建议书
2014/03/13 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
保护动物的宣传语
2015/07/13 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
golang使用map实现去除重复数组
2022/04/14 Golang