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

在这种情况下，HTML5定义了WebSocket协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。

那么，如何用原生JavaScript实现与服务器建立WebSocket连接呢？

第一步，新建文件websocket.js

第二步，拼接出用于连接WebSocket的URL：

const wsuri = `ws://${window.location.host}/message`

第三步，定义用于存放WebSocket对象的变量：

let socket = null

第四步，编写用于初始化WebSocket的函数：

function startWebSocket() {
  socket = new WebSocket(wsuri)
  //监听消息接收事件
  socket.addEventListener('message', onMessage)
  //监听WebSocket连接事件
  socket.addEventListener('open', onOpen)
  //监听WebSocket异常事件
  socket.addEventListener('error', onError)
  //监听WebSockt关闭事件
  socket.addEventListener('close', onClose)
}

第五步，编写事件对应函数：

function onOpen() {
  socket.send('Hello from client')
  sendHeartBeat()
}

function onError(e) {
  console.error(e)
  startWebSocket()
}

function onMessage(e) {
  if (!e) return
  console.log(e.data)
}

function onClose(e) {
  console.log('WebSocket disconnected.', e)
}

关于ReadyState的解释：

部分内容摘自：

https://baike.baidu.com/item/WebSocket/1953845?fr=aladdin