websocket是HTML5提供的一种在单个TCP连接上进行全双工通讯的协议，了解HTTP协议的都应该知道，http协议是无状态的，也就是说服务器不会记录客户端的请求，也不会主动向客户端通信，所以有些网站如果
需要保持和服务端通信，需要采用js轮询的方式不断地向服务的发送请求，这样就浪费了更多的http请求和带宽资源，在websocket API中，浏览器只需要和服务器做一次握手操作，然后，服务器和浏览器就形成了一条
快速通道，两者之间就可以实时自由通信了。

1.连接通信

浏览器通过JavaScript向服务器发出建立WebSocket连接的请求，连接建立以后，客户端和服务器端就可以通过TCP连接直接交换数据。当你获取Web Socket连接后，你可以通过send()方法来向服务器发送数据，并通过onmessage事件来接收服务器返回的数据。

1
var Socket = new WebSocket(url, [protocol] );

url: 连接服务的url
protocol: 可选，可接收的子协议

2.WebSocket属性

属性 描述
Socket.readyState 只读属性 readyState 表示连接状态，可以是以下值：
0 - 表示连接尚未建立。
1 - 表示连接已建立，可以进行通信。
2 - 表示连接正在进行关闭。
3 - 表示连接已经关闭或者连接不能打开。
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

3.WebSocket事件

事件 处理程序 描述
open Socket.onopen 连接建立时触发
message Socket.onmessage 客户端接收服务端数据时触发
error Socket.onerror 通信发生错误时触发
close Socket.onclose 通信关闭时触发

4.WebSocket方法

方法 描述
Socket.send() 使用连接发送数据
Socket.close 连接关闭

WebSocket 实例
WebSocket 协议本质上是一个基于 TCP 的协议。

5.Websocket实例

为了建立一个 WebSocket连接，客户端浏览器首先要向服务器发起一个 HTTP请求，这个请求和通常的 HTTP请求不同，包含了一些附加头信息，其中附加头信息"Upgrade: WebSocket"表明这是一个申请协议升级的 HTTP请求，
服务器端解析这些附加的头信息然后产生应答信息返回给客户端，客户端和服务器端的 WebSocket连接就建立起来了，双方就可以通过这个连接通道自由的传递信息，并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

6.简单的JavaScript案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function websocket(){
  if('Websocket' in window){
    // 打开一个 web socket
    let ws = new WebSocket("ws://localhost:1235/server");
      
    ws.onopen = function(){
      // Web Socket 已连接上，使用 send() 方法发送数据
      ws.send("发送数据");
      alert("数据发送中...");
    };
      
    ws.onmessage = function (evt) { 
      let received_msg = evt.data;
      alert("数据已接收...");
    };
      
    ws.onclose = function(){ 
      // 关闭 websocket
      alert("连接已关闭..."); 
    };
  }else{
    alert('Please upgrade your browser！')
  }
}