|
|
|
|
步骤 2 : WebSocket概念 步骤 3 : 优点
如图所示，当服务端有新的比特币价格后，浏览器马上就可以看到最新的数据。
<!DOCTYPE html>
<html>
<head>
<title>用WebSocket实时获知比特币价格</title>
</head>
<body>
<div style="width:400px;margin:20px auto;border:1px solid lightgray;padding:20px;text-align:center;">
当前比特币价格：￥<span style="color:#FF7519" id="price">10000</span>
<div style="font-size:0.9em;margin-top:20px">查看的人数越多，价格越高, 当前总共 <span id="total">1</span> 个人在线</div>
<div style="color:silver;font-size:0.8em;margin-top:20px">以上价格纯属虚构，如有雷同，so what？</div>
</div>
</body>
<script type="text/javascript">
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
websocket = new WebSocket("wss://how2j.cn/ws/bitcoinServer");
//连接成功建立的回调方法
websocket.onopen = function () {
websocket.send("客户端链接成功");
}
//接收到消息的回调方法
websocket.onmessage = function (event) {
setMessageInnerHTML(event.data);
}
//连接发生错误的回调方法
websocket.onerror = function () {
alert("WebSocket连接发生错误");
};
//连接关闭的回调方法
websocket.onclose = function () {
//alert("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function () {
closeWebSocket();
}
}
else {
alert('当前浏览器 Not support websocket')
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
var bitcoin = eval("("+innerHTML+")");
document.getElementById('price').innerHTML = bitcoin.price;
document.getElementById('total').innerHTML = bitcoin.total;
}
//关闭WebSocket连接
function closeWebSocket() {
websocket.close();
}
</script>
</html>
在WebSocket概念出来之前，如果页面要不停地显示最新的价格，那么必须不停地刷新页面，或者用一段js代码每隔几秒钟发消息询问服务器数据。
而使用WebSocket技术之后，当服务器有了新的数据，会主动通知浏览器。 如效果所示，当服务端有新的比特币价格之后，浏览器立马接收到消息。
1. 节约带宽。 不停地轮询服务端数据这种方式，使用的是http协议，head信息很大，有效数据占比低， 而使用WebSocket方式，头信息很小，有效数据占比高。
2. 无浪费。 轮询方式有可能轮询10次，才碰到服务端数据更新，那么前9次都白轮询了，因为没有拿到变化的数据。 而WebSocket是由服务器主动回发，来的都是新数据。 3. 实时性，考虑到服务器压力，使用轮询方式不可能很短的时间间隔，否则服务器压力太多，所以轮询时间间隔都比较长，好几秒，设置十几秒。 而WebSocket是由服务器主动推送过来，实时性是最高的
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2019-08-01
站长websocket有问题哦，一出来就报连接错误！
2019-01-04
websocket带参数
2018-08-12
站长不会是隐形土豪吧
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
