WebSocket

什么是 websocket

WebSocket 是一种全新的协议，HTML5 新增功能，大多数浏览器都开始全面支持了，他将 TCP 的 socket（套接字）应用在了 webpage 上，从而使通信双方建立起了一个保持在活动状态连接通道。 一旦 Web 服务器与客户端之间建立起 WebSocket 协议通信连接，之后所有的通信都依靠这个专用协议进行，通信过程中可互相发送 JSON,XML,HTML 或图片等任意格式的数据，由于是建立在 http 基础上的协议，因此连接的发起仍是客户端，而一旦确立 websocket 通信连接，不论服务器还是客户端，任意一方都可直接向对方发送报文。

HTTP 的局限性

HTTP 是半双工协议，也就是说，在同一时刻数据只能单向流动，客户端向服务器发送请求（单向的），然后服务器相应请求（单向的）。 服务器不能主动推送数据给浏览器，这就会导致一些高级功能难以实现，诸如聊天室场景就没法实现。

WebSocket 的特点

• 支持双向通信，实时性强
• 可以发送文本，也可以发送二进制数据。
• 减少通信量:只要建立起 websocket 连接，就希望一直保持连接状态，和 http 相比，不但每次连接时的总开销减少，而且由于 websocket 的首部信息很小，通信量也相应的减少了

相对于传统的 HTTP 每次请求-应答都需要客户端与服务器建立连接的模式，websocket 是类似 Socket 的 TCP 长连接的通讯模式，一旦 websocket 连接建立后，后续数据都已帧序列的形式传输。 在客户端断开 websocket 连接或 Server 端断掉连接前，不需要客户端和服务端重新发起连接请求。 在海量并发和客户端与服务器交互负载流量大的情况下，极大地节省了网络宽带资源的消耗，有明显的性能优势，且客户端发送和接受消息是在同一个持久连接上发起，实时性优势明显。

WebSocket 应用整体结构代码

let socket = new WebSocket('ws://localhost:8080/websocket')
//打开事件
socket.onopen = function() {
  console.log('Socket 已打开')
  //主动发消息给服务端
  //socket.send("这是来自客户端的消息" + location.href + new Date());
}

//获得消息事件
socket.onmessage = function(msg) {
 //发现消息进入，拿到服务端发来的数据
  console.log(msg.data)
}

//关闭事件
socket.onclose = function() {
  console.log('Socket已关闭')
  //监听到socket已断开连接
}

//发生了错误事件
socket.onerror = function() {
  alert('Socket发生了错误')
}
$(window).unload(function() {
  socket.close()
  //关闭socket
})