效果如下:
界面比较简陋,界面的大致代码如下:
{%extends "base.html" %}
{% block body_block %}
<a href="/category/index" onClick="javascript :history.back(-1);" style="margin-left: 50px;">返回</a>
<h3 style="margin-left: 50px;">当前用户: {
{ user }} </h3>
<div class="row">
<div id="chatting" style="width: 500px;height: 500px;border: 1px solid #000000;float: left;overflow: auto;margin-left: 30px;" ></div>
</div>
<div class="col-lg-4">
<div class="input-group">
<input id="msg" type="text" class="form-control">
<span class="input-group-btn">
<button id="sendmsg" class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
{% endblock %}
{% block js %}
<script>
// using jQuery
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
// 时间格式
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this