18.2 使用WebSocket与服务器通信
WebSocket是一个革命性的技术,它改变了传统HTTP协议的通信方式。通过WebSocket可以让服务器主动向浏览器“推送”数据。
18.2.1 WebSocket接口
按照传统的HTTP协议,如果浏览器不向Web服务器发送请求,那么Web服务器就不能把数据“推送”给浏览器。在这样的技术背景下,如果需要构建实时性要求比较高的应用,
比如说在线游戏、在线证券、设备监控、新闻在线播报等,当客户端浏览器呈现这些信息的时候,服务器端的数据可能已经更新过了。
为了让客户端和服务器端的信息同步是实时的,常用的解决方法有如下两种。
定义发送请求:浏览器以固定频率向服务器端发送请求,以频繁请求的方式来保持客户端和服务器端的同步。这种同步方案的最大问题是,当客户端以固定频率向服务器端发起
请求的时候,服务器端的数据可能并没有更新,这样会带来很多无谓的网络传输,所以这是一种非常低效的实时方案。
隐藏的连接:在浏览器页面上使用一个隐藏的窗口与服务器端建立长连接,服务器端通过这个长连接可以将数据源源不断地“推送”给浏览器。但这种机制需要针对不同的浏览器设计
不同的解决方案,而且这种机制在并发量比较大的情况下,会加重服务器端的负担。
WebSocket的出现完全可以改变这种现状,WebSocket允许通过JavaScript建立与远程服务器的连接,从而允许远程服务器将数据推送给浏览器。
WebSocket定义了如下两个方法:
send():向远程服务器发送数据。
close():关闭该WebSocket。
WebSocket还定义了如下事件监听器属性,通过为这些属性绑定事件监听器函数即可监听网络通信。
onopen:当WebSocket建立网络连接时触发该事件。
onerror:当网络连接出现错误时触发该事件。
onclose:当WebSocket被关闭时触发该事件。
onmessage:当WebSocket接收到远程服务器的数据时触发该事件。
WebSocket还定义了一个readyState属性,该属性可以返回WebSocket所处的状态。
该属性可能返回如下几个状态值。
CONNECTING(数值0):WebSocket正在尝试与服务器建立连接。
OPEN(数值1):WebSocket与服务器已建立连接。
CLOSING(数值2):WebSocket正在关闭与服务器的连接。
CLOSED(数值3):WebSocket已经关闭了与服务器的连接。
如果需要使用WebSocket来与远程服务器通信,只需要如下3个步骤即可。
(1)调用WebSocket的Constructor(DOMString url,[DOMString protocols])创建一个WebSocket对象。
(2)如果要发送消息,则调用WebSocket的send()方法发送消息即可。
(3)如果要接收消息,则为WebSocket的onmessage()方法绑定事件监听器即可。