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的浏览器提供了向下兼容。