小白一枚，根據網路上找的代碼寫了一下 WebSocket 的進度條展示，后端是DJANGO ，目前遇到用IE瀏覽器可以正常展示進度，但是谷歌進度條不能完整展示，總是在最后兩個資料就結束了，例如 進度條是 100% 谷歌就只展示到 98%或者99% ，如果是50% 就只展示到 48%或者49%。但是后端其實已經把資料100%推送了。控制臺提示是
" WebSocket connection to 'ws://192.168.0.123:8000/prog' failed: Invalid frame header "
IE 和 火狐 一切正常。
請教一下這個要怎么處理。謝謝大神指點
html
<head>
<title>django-websocket</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv 和 Respond.js 用于讓 IE8 支持 HTML5元素和媒體查詢 -->
<!-- 注意： 如果通過 file:// 引入 Respond.js 檔案，則該檔案無法起效果 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]–>-->
</head>
<body>
<div class="container">
<button class="btn btn-default" type="button" id="connect_websocket">開始同步</button>
<button class="btn btn-default" type="button" id="close_websocket">終斷同步</button>
<!--2. 進度條-->
<div class="progress-div">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 0em; width: 0%;">
0%
</div>
</div>
</div>
</br>
<div class="progress-text progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 0em; width: 0%;">
</div>
</div>
<div class="container">
<div class="row">
<div class="span4">
<h3>一個基本的垂直方向進度條</h3>
<div class="progress">
<div class="progress-bar"
style="width: 60%;"></div>
</div>
<h3>條紋進度條,使用梯度來創建一個條紋的效果</h3>
<div class="progress progress-striped">
<div class="progress-bar" style="width: 60%;"></div>
</div>
<h3>一個影片進度條</h3>
<div class="progress progress-striped active">
<div class="progress-bar" style="width: 50%;"></div>
</div>
</div>
</div>
<hr>
</div>
JS代碼
<script type="text/javascript">
// var ws;
$(
function () {
// debugger;
// ws = new WebSocket("ws://" + window.location.hostname + ":" + window.location.port + "/plmimport/Home/WSChat?userid=" + $('#userid').val());
$('#connect_websocket').click(function () {
if (window.s) {
window.s.close()
}
var ws = new WebSocket("ws://192.168.0.123:8000/prog");
ws.onopen = function () {
console.log("Connected!");
};
ws.onmessage = function (e) {
console.log('message: ' + e.data);
$('.progress-bar').css('width', e.data + '%');
$('.progress-bar').text(e.data + '%');
};
$('#close_websocket').click(function () {
if (window.s) {
window.s.close();//關閉websocket
console.log('websocket已關閉');
}
});
});
}
);
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/95469.html
標籤：JavaScript
下一篇：前端div哈哈