1。背景很多网站使用Ajax轮询来实现推送技术。轮询是浏览器在特定的时间间隔向服务器发送HTTP请求，然后服务器将最新的数据返回给客户端的浏览器。这种传统模式带来的弊端很明显，就是浏览器需要不断向服务器发送请求，但是HTTP请求可能包含很长的header，真正有效的数据可能只有一小部分，显然是浪费了很多带宽和其他资源。HTML5新增的一些协议WebSocket可以在单个TCP连接上提供全双工双向通信，可以节省服务器资源和带宽，并且可以实时通信。2、WebSocket介绍传统的http也是一种协议，WebSocket是一种协议。WebSocket不能使用http服务器来实现。2.1.浏览器支持基本上主流浏览器都支持2.2。优点与http相比，有以下优点：1.Customers客户端和服务器之间只建立一个TCP连接，可以使用的连接数更少。2、WebSocket服务端可以主动向客户端推送数据，更加灵活高效。3.更轻量级的协议头，减少数据传输量。对比轮训机制3、WebSocket的使用在我们了解了WebSocket是什么以及它有什么优势之后，我们该如何使用呢？3.1.WebSocket使用自定义协议创建WebSocket，url方式与http略有不同，未加密连接为ws://，加密连接为wss://，使用newWebSocket()创建WebSocket实例方法，varws=newWebSocket(url,[protocol]);第一个参数url指定连接URL。第二个参数protocol是可选的，它指定了可接受的子协议。3.2.WebSocket属性ws对象创建时，readyState是ws实例的状态，一共有4种状态，0代表连接没有建立。1表示连接已建立并且可以通信。2表示正在关闭连接。3表示连接已关闭或无法打开连接。Tips：发送消息前先判断状态，断开时要有重连机制。3.3.WebSocket事件ws实例对象创建后，会有如下事件，可以根据不同的状态在事件回调中写方法。ws.onopen连接建立时触发ws.onmessagews.onerror客户端从服务器接收数据时触发ws.onerror发生通信错误时触发ws.onclose连接关闭时触发ws.onmessage=(res)=>{console.log(res.data);};ws.onopen=()=>{console.log('OPEN...');};ws.onclose=()=>{console.log('CLOSE...');}3.4.WebSocket方法ws.send()使用连接发送数据（只能发送纯文本数据）ws.close()关闭连接4.Demo演示了解WebSocket的一些API后，趁热打铁，让小case跑起来。4.1.Node服务器端WebSocket协议与Node配合良好，原因有以下两个：1.WebSocket客户端基于事件的编程类似于Node中的自定义事件。2、WebSocket实现客户端与服务端的长连接。Node的基本事件驱动方式非常适合高并发连接。创建一个webSocket.js如下：constWebSocketServer=require('ws').Server;constwss=newWebSocketServer({port:8080});wss.on('connection',function(ws){console.log('clientconnected');ws.on('message',function(message){ws.send('我收到'+消息);});});打开windows命令窗口运行4.2。HTML客户端创建一个新的index.html页面
