Python 是一种面向对象解释型计算机程序设计语言, 由 Guido van Rossum 于 1989 年底发明, 第一个公开发行版发行于 1991 年 Python 语法简洁而清晰, 具有丰富和强大的类库它常被昵称为胶水语言, 它能够把用其他语言制作的各种模块 (尤其是 C/C++) 很轻松地联结在一起
很多网站都提供了在线匿名聊天的小功能, 下面小编基于 python 的 django 框架实现一个多人在线匿名聊天的小程序, 具体实现代码大家参考下本文
最近看到好多设计类网站, 都提供了多人在线匿名聊天的小功能, 感觉很有意思, 于是基于 python 的 django 框架自己写了一个, 支持手动实时更名, 最下方提供了完整的源码.
在线聊天地址(无需登录, 开一个窗口, 代表一个用户):
http://zhaozhaoli.vicp.io/chatroom/happy/
移动端聊天效果图:
网页版聊天效果图:
实现思路:
发送的消息通过 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
来源: http://www.phperz.com/article/18/0222/361524.html