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爬虫之使用urllib2组件抓取网页内容
Nov 04 Python
python使用Flask框架获取用户IP地址的方法
Mar 21 Python
pandas.DataFrame选取/排除特定行的方法
Jul 03 Python
Python Socket编程之多线程聊天室
Jul 28 Python
python画柱状图--不同颜色并显示数值的方法
Dec 13 Python
Python关于excel和shp的使用在matplotlib
Jan 03 Python
python控制nao机器人身体动作实例详解
Apr 29 Python
Python制作词云图代码实例
Sep 09 Python
Python使用Pandas库常见操作详解
Jan 16 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
Jul 13 Python
Python3.9最新版下载与安装图文教程详解(Windows系统为例)
Nov 28 Python
详解Python 3.10 中的新功能和变化
Apr 28 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中文截取函数mb_strlen和mb_substr
2015/02/09 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP入门教程之数组用法汇总(创建,删除,遍历,排序等)
2016/09/11 PHP
phpinfo()中Loaded Configuration File(none)的解决方法
2017/01/16 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
一种JavaScript的设计模式
2006/11/22 Javascript
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
2015/09/15 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
详解jQuery的Cookie插件
2016/11/23 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
JS中的函数与对象的创建方式
2019/05/12 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[00:32]2018DOTA2亚洲邀请赛Newbee出场
2018/04/03 DOTA
python中split方法用法分析
2015/04/17 Python
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
Python 异常的捕获、异常的传递与主动抛出异常操作示例
2019/09/23 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
客户经理岗位职责
2013/12/08 职场文书
委托书范文
2014/04/02 职场文书
常务副总经理任命书
2014/06/05 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
Python OpenCV超详细讲解读取图像视频和网络摄像头
2022/04/02 Python