Web 应用中的 HTTP 决定了客户端和服务端的连接是短连接,即客户端 Request ,服务端 Response ,连接断开。如果要想实现客户端和服务端实时通信,只能通过客户端轮询来实现。服务端推送数据也并不是字面意思上的直接推,其实还是客户端自己取。 WebSockets 是 HTML 5 规范新引入的功能,用于解决浏览器与后台服务器双向通信的问题,使用 WebSockets 技术后台可以随时向前端推送消息,以保证前后台状态统一。
Web Sockets 实现了浏览器与服务器的双向通信, Web Sockets API 是下一代客户端 - 服务器的异步通信方法,该通信取代了单个的 TCP 套接字,使用 ws 或者 wss 协议,可用于任意的客户端和服务器程序。
Web Sockets API 最伟大之处在于服务器和客户端可以在给定时间范围内的任意时段相互推送信息。 Web Sockets 并不限于以 AJAX 或者 XHR 方式通信,这是因为 AJAX 技术需要客户端发起请求,而 Web Sockets 服务器和客户端可以彼此相互推送信息; XHR 受到域的限制,而 Web Sockets 允许跨域通信。
检测浏览器是否支持 WebSocket 。
var sockets = window.WebSocket;
if (!sockets) {
alert('WebSocket not supported by this browser');
} else {
alert('WebSocket supported by this browser');
}
WebSocket 的构造函数。
WebSocket WebSocket(in DOMString url, in optional DOMString
protocols); WebSocket WebSocket(in DOMString url, in optional DOMString[]
protocols);
在上述两个构造函数中, WebSocket() 实例化时需要传入两个参数,第一个参数是请求地址,该地址指向服务器,其实例化时的格式依次是 ws 或者 wss 、主机名称、端口号以及 WebSocket Server 。第二个参数是一个可选参数,表示协议名,它可以是一个,也可以是一个数组。
var mySocket = new WebSocket(
'http://www.lmssee.com/socketserver',
'my-custom-protocol',
);
var mySocket = new WebSocket('http://www.lmssee.com/socketserver', [
'protocol1',
'protocol2',
]);
onopen :连接打开时会触发的事件。
mySocket.onopen = function () {
alert('连接已经打开 ');
};
onmessage :接收服务器端所发送的事件,在该事件中提供了一个 data 属性,它可以包含消息的 Body 部分,消息的 Body 部分必须是一个字符串,可以进行序列化 / 反序列化操作,以便于传递更多的数据。
mySocket.onmessage = function (event) {
var message = event.data;
document.getElementById('showMessage').innerHTML = message;
};
onclose :连接关闭时会触发该事件。
mySocket.onclose = function () {
alert('连接已经关闭 ');
};
send() 方法发送数据。
mySocket.send('Test Message!');
mySocket.send(JSON.stringify({ action: 'node.remove', id: '001' }));
.连接状态 客户端与服务器端建立连接的过程中, WebSocket 对象的 readyState 属性会记录连接的状态,这个属性有 4 种状态,状态值分别使用数字 0 、 1 、 2 和 3 表示。