善⽤Websocket替代前端轮询请求接⼝
⼀、由来
WebSocket 是 HTML5 开始提供的⼀种在单个 TCP 连接上进⾏全双⼯通讯的协议。
实际场景：实时获取后台数据，⾸先想到的⼀定是ajax每隔⼏秒不断轮询调⽤后台接⼝，这种⽅式可以实现，简单粗暴，但是⼀次次的请求会浪费很多的带宽资源。
在java中，有消息中间件MQ，客户端向Broker中间件发消息，服务端监听Broker，也可替换http接⼝调⽤实现数据传输。
html5为了优化轮询调⽤，也提供了类似⽅式。
WebSocket通信协议，建⽴⼀个长链接，客户端监听服务端信息，此链接可⼿动关闭。
var Socket = new WebSocket(url, [protocol] );
⼆、事件
以下是 WebSocket 对象的相关事件。假定我们使⽤了以上代码创建了 Socket 对象：
事件事件处理程序描述
pen连接建⽴时触发
ssage客户端接收服务端数据时触发
r通信发⽣错误时触发
lose连接关闭时触发
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript">
function WebSocketTest()
前端websocket怎么用{
if ("WebSocket" in window)
{
alert("您的浏览器⽀持 WebSocket!");
// 打开⼀个 web socket
var ws = new WebSocket("ws://localhost:9998/echo");
{
// Web Socket 已连接上，使⽤ send() ⽅法发送数据                  ws.send("发送数据");
alert("数据发送中...");
};
{
var received_msg = evt.data;
alert("数据已接收...");
};
{
// 关闭 websocket
alert("连接已关闭...");
};
}
else
{
// 浏览器不⽀持 WebSocket
alert("您的浏览器不⽀持 WebSocket!");
}
}
</script>
</head>
<body>
<div id="sse">
<a href="javascript:WebSocketTest()">运⾏ WebSocket</a>      </div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。