HTML5 WebSocket

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

WebSocket是客户端和服务器之间的数据交换变得更简单，允许服务端主动向客户端推送数据。弥补了HTTP协议只能由客户端发起通信的缺陷。

在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，形成一条快速通道。两者之间就可以直接数据传送，进行双向数据传输。

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

HTML5定义的WebSocket协议，能更高的节省服务器资源和带宽，并能够更实时地进行通讯。

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

 

WebSocket的主要特点：

1.可以由服务端发起通信

2.建立在TCP协议之上，服务端的实现比较容易

3.与HTTP协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用HTTP协议，因此握手时不容易屏蔽，能通过各种HTTP代理服务器

4.数据格式比较轻量，性能开销小，通信高效

5.可以发送文本，也可以发送二进制数据

6.没有同源限制，客户端可以与人员服务器通信

7.协议标识符是ws(如果加密，则为wss),服务器网址就是URL

 

WebSocket实例

var ws = new WebSocket("ws://localhost:9998/echo");

 

WebSocket属性

readyState: 只读属性，表示连接状态

                    0---表示连接尚未连接

                    1---表示连接已建立，可以进行通信

                    2---表示连接正在进行关闭

                    3---表示连接已经关闭或者连接不能打开

bufferedAmount: 用于返回已经被send()方法放入队列中但还没发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性将被重置为0。如果不断地调用send()，则该属性会持续增长。

 

WebSocket事件

onopen:连接建立时触发

onmessage:客户端接受服务端数据时触发

onerror:通信发生错误时触发

onclose:连接关闭时触发

 

WebSocket方法

send:使用连接发送数据

close:关闭连接

 

WebSocket所有属性和方法，详情见https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket

 

WebSocket的跨域问题解决

不同页面要要通信，并且页面跨域，可以通过WebSocket解决跨域问题。

项目中要保证两个页面通信是点对点，需要在服务端建立两个页面WebSockter的对应关系，即A发送的消息只能被B收到。

原生WebSocket API使用起来很不方便，可以使用Socket.io，它很好的封装了WebSocket接口，提供了更简单，更灵活的接口，

也对不支持WebSocket的浏览器提供了向下兼容。