6.4 JavaScript中使用WebSocket

6.4 JavaScript中使用WebSocket

HTML5 WebSocket是什么?

WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通信的协议。

WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就可以直接创建持久性的连接,并进行双向数据传输。

现在,很多网站为了实现推送,所用的技术都是Ajax轮询。轮询是在特定的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式具有很明显的缺点,即浏览器需要不断地向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5定义的WebSocket协议,能更好地节省服务器资源和带宽,并且能够更实时地进行通信,如图6.9所示。

图6.9 html5的webSocket

浏览器通过JavaScript向服务器发出建立WebSocket连接的请求,连接建立以后,客户端和服务器端就可以通过TCP连接直接交换数据。

当你获取Web Socket连接后,可以通过send()方法来向服务器发送数据,并通过onmessage事件来接收服务器返回的数据。

以下API用于创建WebSocket对象。

以上代码中的第一个参数url用来指定连接的URL。第二个参数protocol是可选的,指定了可接受的子协议。

1.WebSocket属性

以下是WebSocket对象的属性,见表6.1。

表6.1

2.WebSocket事件

以下是WebSocket对象的相关事件,见表6.2。

表6.2

3.WebSocket方法

以下是WebSocket对象的相关方法,见表6.3。

表6.3

4.WebSocket实例

WebSocket协议本质上是一个基于TCP的协议。

为了建立一个WebSocket连接,客户端浏览器首先要向服务器发起一个HTTP请求,这个请求和通常的HTTP请求不同,包含了一些附加头信息,其中附加头信息"Upgrade:WebSocket"表明这是一个申请协议升级的HTTP请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的WebSocket连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

5.客户端的HTML和JavaScript

目前大部分浏览器支持WebSocket()接口,你可以在以下浏览器中尝试实例:Chrome,Mozilla,Opera和Safari。

下面写个测试文件大体演示一下具体怎么使用。

总结

通过本章的学习,我们了解了Socket一般称为套接字,是一种用来进行客户端服务器之间通信的一种方式,Socket的关键是三次握手。还有就是我们在运行Socket服务器端的时候不要使用web服务发布,要使用命令行的方式运行。目前的主流浏览器都支持webSocket,H5 webSocketAPI的封装是比较完善的,可以直接使用。

作业

利用PHP和JavaScript开发一个简易的聊天程序,实现多人同时聊天的功能。