善⽤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>