概述
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在JS中创建WebSocket后，会有一个HTTP请求发向浏览器以发起请求。在取得服务器响应后，建立的连接会使用HTTP升级将HTTP协议转换为WebSocket协议。
ajax轮询和 websocket 连接示意图
握手连接
WebSocket是应用层协议，是TCP/IP协议的子集，通过HTTP/1.1协议的101状态码进行握手。
WebSocket协议的建立需要先借助HTTP协议，在服务器返回101状态码之后，就可以进行websocket全双工双向通信了。
web端的请求头部：
1. 首先浏览器发送http 的get 请求
客户端端口 60992 服务端端口 8181
2. 紧接着服务端返回 101
字段说明
- Connection必须设置Upgrade。
- Upgrade字段必须设置Websocket。
- Sec-WebSocket-Key是随机的字符串，服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个特殊字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”，然后计算SHA-1摘要，之后进行BASE-64编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。如此操作，可以尽量避免普通HTTP请求被误认为Websocket协议。
- Sec-WebSocket-Version 表示支持的Websocket版本。RFC6455要求使用的版本是13，之前草案的版本均应当弃用。
- Origin字段是可选的，通常用来表示在浏览器中发起此Websocket连接所在的页面，类似于Referer。但是，与Referer不同的是，Origin只包含了协议和主机名称。
- 其他一些定义在HTTP协议中的字段，如Cookie等，也可以在Websocket中使用。
传输消息
客户端向服务端发送消息 nick 999
客户端代码：
简单的创建websocket 连接，连接成功后发送一条消息， 内容为 nick 999
var nick = getQueryString('nick')||'江芊'
var url = 'ws://localhost:8181/'
var Socket = new WebSocket(url);
Socket.onopen = function(evt) {
console.log('open', evt)
Socket.send('nick ' + nick)
}
Socket.onclose = function(evt){
console.log('close', evt)
}
Socket.onmessage = function(evt){
console.log('message', evt)
var data = JSON.parse(evt.data)
console.log(data)
updataMsg(data)
}
Socket.onerror = function(evt){
console.log('error', evt)
}
服务端向客户端发送消息 {"type":"nick","message":"\346\226\260\347\224\250\346\210\267:999"}
服务端代码：
通过node 起的websocket服务，端口为8181，在接收到客户端的消息后，发送一条消息给客户端： {"type":"nick","message":"\346\226\260\347\224\250\346\210\267:999"}
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({ port: 8181 });
var clients = []
var id = 0
wss.on('connection', function (ws) {
console.log('client connected');
clients.push({
id: ++id,
ws: ws
})
ws.on('message', function (message) {
console.log('message', message);
if(message.indexOf('nick') === 0) {
let nickname_array = message.split(' ');
if(nickname_array.length >= 2) {
broadcastSend("nick", '新用户:'+nickname_array[1]);
}
} else if(message.indexOf('PRIVMSG') === 0) {
var msglist = message.split(' ')
broadcastSend("message", msglist[1]);
}
});
function broadcastSend(type, message) {
clients.forEach(function(v, i) {
if(v.ws.readyState === ws.OPEN) {
v.ws.send(JSON.stringify({
"type": type,
"message": message
}));
}
})
}
});
可以看出在websocket发送消息的连接传输中，客户端端口还是为60992 ，服务端还是为8181，一直保持链接没有断开。
api说明
属性
readyState
只读属性 readyState 表示连接状态，可以是以下值：
- 0 - 表示连接尚未建立。
- 1 - 表示连接已建立，可以进行通信。
- 2 - 表示连接正在进行关闭。
- 3 - 表示连接已经关闭或者连接不能打开
bufferedAmount
只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数
事件
- open - 连接建立时触发
- message - 客户端接收服务端数据时触发
- error - 通信发生错误时触发
- close - 连接关闭时触发
方法
- send - 使用连接发送数据
- close - 关闭连接
浏览器支持情况
小结
1、websocket 只有一次握手，且是基于http的get 请求实现。
2、websocket 客户端和服务端传输消息只能是字符串。
3、websocket 为长连接，需要手动断开，业务上处理聊天时，可以通过添加心跳来更新有效的连接。
4、ws 连接为tcp 连接，wss 为tls 连接。
