需求描述
1、類似CSDN論壇 右上角的消息通知 如果有新消息 整個頁面不刷新 右上角的消息數字即時+1
2、類似於論壇評論區 ,發佈評論之後,不刷新頁面就可以立刻看到自己的評論
新浪微博的評論區實現方式
觀察了一下新浪微博的評論區實現,從下面的圖可以看出,因爲時間固定顯示爲10秒前,因此可以推斷:
點擊“評論”之後,評論框的 div 只是在本地 append 的,而不是去刷新整個評論區(除非你去手動刷新整個頁面)。可以參考這個思路
web 頁面的解決方案
網上提供的 n 多種實現方式,可以參考一下思路:
1)通過ajax定時提交刷新,不知道你是全部刷新還是通過ajax的方式提交刷新,理論上如果通和AJAX刷新的話應是可以的。
2)使用html5的websocket功能。
3)思路:在獲取頁面的時候,分配session然後去做定閱通知,編輯完了之後發消息給定閱的頻道,再更新
4)用 jira
5) 這個地方基本上都是採用的輪訓吧,只有一些實時性非常高的纔會選擇使用WebSocket 另外還有一種採用消息中間件的方式
6)signalr 應該是可以的
winform 的解決方案
winform就比較好實現了,用委託或者訂閱吧
附:(障眼法)本地追加div的思路及示例
效果:點擊“寫評論”後,下方追加一個富文本編輯框(使用WangEditor)div。
目前點擊保存按鈕後的的刷新方式是使用window.location.reload();
刷新整個頁面,此時瀏覽器拖動條還會默認保持在原來的位置,所以用戶體驗還好。
若想要實現在本地追加新評論div
,可以參照下方 js 代碼的 CommentNode(...)
函數。
HTML
引入 CSS JS
<link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/static/js/easyui/themes/icon.css">
<script src="/static/js/jquery-2.1.1.min.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/js/echarts-4.2.1.js" charset="UTF-8"></script>
<link rel="stylesheet" type="text/css" href="/static/css/editorStyle.css"><!--自定義CSS-->
<script type="text/javascript" src="/static/js/jquery.form.min.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>
<script src="/static/js/paramconvert.js" charset="UTF-8"></script><!--自定義JS-->
<script src="/static/js/editorUtils.js" charset="UTF-8"></script><!--自定義JS-->
Body 核心代碼
<!--評論區begin-->
<h4 style="display: inline">簡評</h4>
<button type="button"
style="position:absolute;right: 68px"
onclick="javascript:appendHtml('others-comment-area',new WangEditorNode('{{p_code}}', 'others','{{ query_date }}'))"
class="btn btn-primary btn-sm">寫評論
</button>
<!-- List group -->
<ul id="others-comment-area" class="list-group" style="padding-top: 10px">
{% for node in others_list %}
<li class="list-group-item">
<div class="username" style="display: inline">用戶:{{ node.user }}</div>
<p>{{ node.update_time }}</p>
<div class="btn-group btn-group-sm" role="group">
<button type="button" onclick="javascript:appendHtml('others-comment-area',new WangEditorModifyNode('{{ p_code }}','others','{{ node.rich_text }}',{{ node.id }}))"
class="btn btn-warning">修改
</button>
<button type="button" onclick="javascript:deleteEditor({{ node.id }})"
class="btn btn-danger">刪除
</button>
</div>
{{ node.rich_text |safe }}
</li>
{% endfor %}
</ul>
<!--評論區end-->
editorUtils.js
手動拼接 HTML,感覺回到了 Servlet 時代
多虧 PyCharm 在粘貼的時候會自動轉義符號,不然自己拼左斜線和雙引號肯定被繞暈…
function appendHtml(div_id, node) {
delAllEditorNode();//先刪除舊的wangEditor
// $('#future-spot-comment-area').append(new CommentNode('testuser', '2020-4-21 22:03:33', 'rich_text', 55).getNodeHtml());
$('#' + div_id).append(node.getNodeHtml());
// $('#future-spot-comment-area').append(new WangEditorNode('RB.SHF', 'cost').getNodeHtml());
var E = window.wangEditor;
var editor = new E('#div1', '#div2');
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存圖片
var $textplace = $('#textplace');
editor.customConfig.onchange = function (html) {
$textplace.val(html)// 監控變化,同步更新到 textarea
};
editor.create();
$textplace.val(editor.txt.html());// 初始化 textarea 的值
// wait for the DOM to be loaded
$(document).ready(function () {
// bind 'myForm' and provide a simple callback function
$('#editor_form').ajaxForm(function (message) {
var messageJson = JSON.parse(message);
if (messageJson.status == '0') {
alert("保存成功!");
window.location.reload();
} else {
alert("保存失敗,請聯繫管理員!" + message);
}
});
});
}
function CommentNode(user, update_time, rich_text, id) {
this.user = user;
this.update_time = update_time;
this.rich_text = rich_text;
this.id = id;
this.nodeHtml = "";
this.getNodeHtml = function () {
this.nodeHtml += "<li class=\"list-group-item\">";
this.nodeHtml += "<div class=\"username\" style=\"display: inline\">用戶:";
this.nodeHtml += user;
this.nodeHtml += "</div>";
this.nodeHtml += "<p>";
this.nodeHtml += update_time;
this.nodeHtml += "</p>";
this.nodeHtml += "<div class=\"btn-group btn-group-sm\" role=\"group\">";
this.nodeHtml += "<button type=\"button\" οnclick=\"javascript:modifyEditor(";
this.nodeHtml += id;
this.nodeHtml += ")\" class=\"btn btn-warning\">修改</button>";
this.nodeHtml += "<button type=\"button\" οnclick=\"javascript:deleteEditor(";
this.nodeHtml += ")\" class=\"btn btn-danger\">刪除</button>";
this.nodeHtml += "</div>";
this.nodeHtml += rich_text;
this.nodeHtml += "</li>";
return this.nodeHtml;
}
}
function WangEditorNode(p_code, attribute, query_date) {
this.nodeHtml="";
this.getNodeHtml = function () {
this.nodeHtml += "<div class=\"editor-node\">";
this.nodeHtml += "<div id=\"div1\" class=\"toolbar\"></div>";
this.nodeHtml += "<div id=\"div2\" class=\"text\"></div>";
this.nodeHtml += "<form id=\"editor_form\" action=\"/api/editor\" method=\"post\">";
this.nodeHtml += "<textarea id=\"textplace\" name=\"textplace\" style=\"display: none\"></textarea>";
this.nodeHtml += "<input type=\"hidden\" name=\"p_code\" value=\"";
this.nodeHtml += p_code;
this.nodeHtml += "\"/>";
this.nodeHtml += "<input type=\"hidden\" name=\"attribute\" value=\"";
this.nodeHtml += attribute;
this.nodeHtml += "\"/>";
this.nodeHtml += "<input type=\"hidden\" name=\"query_date\" value=\"";
this.nodeHtml += query_date;
this.nodeHtml += "\"/>";
this.nodeHtml += "<input type=\"submit\" value=\"保存\">";
this.nodeHtml += "</form>";
this.nodeHtml += "</div>";
return this.nodeHtml;
}
}
function WangEditorModifyNode(p_code, attribute, rich_text, id) {
this.nodeHtml="";
this.getNodeHtml = function () {
this.nodeHtml += "<div class=\"editor-node\">";
this.nodeHtml += "<div id=\"div1\" class=\"toolbar\"></div>";
this.nodeHtml += "<div id=\"div2\" class=\"text\">";
this.nodeHtml += rich_text;
this.nodeHtml += "</div>";
this.nodeHtml += "<form id=\"editor_form\" action=\"/api/editor/update?id=";
this.nodeHtml += id;
this.nodeHtml += "\" method=\"post\">";
this.nodeHtml += "<textarea id=\"textplace\" name=\"textplace\" style=\"display: none\"></textarea>";
this.nodeHtml += "<input type=\"hidden\" name=\"p_code\" value=\"";
this.nodeHtml += p_code;
this.nodeHtml += "\"/>";
this.nodeHtml += "<input type=\"hidden\" name=\"attribute\" value=\"";
this.nodeHtml += attribute;
this.nodeHtml += "\"/>";
this.nodeHtml += "<input type=\"submit\" value=\"保存\">";
this.nodeHtml += "</form>";
this.nodeHtml += "</div>";
return this.nodeHtml;
}
}
function delAllEditorNode() {
$(".editor-node").remove();
}
function deleteEditor(id) {
console.log("刪除, id = " + id);
$.ajax({
url: "/api/editor/" + id,
type: "delete",
processData: false,
contentType: false,
success: function (data) {
alert("刪除成功!如誤刪除,可聯繫管理員恢復。");
window.location.reload();
},
error: function (data) {
alert("刪除失敗" + data);
}
})
}
function modifyEditor(id) {
console.log("修改, id = " + id);
window.open('/api/editor/' + id, '_blank');
}