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

在线聊天地址(无需登录,开一个窗口,代表一个用户):http://zhaozhaoli.vicp.io/chatroom/happy/移动端聊天效果图:

移动端聊天.PNG

网页版聊天效果图:

网页版聊天.png

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

前端核心代码:

$(function () {

$("#send").click(function () {            var input_info = $("#input_info").val();            if (input_info.length

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());

}

})

})

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[i].user_name+"