一、为什么需要 WebSocket？
初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？
答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。
它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。
其他特点包括：
（1）建立在 TCP 协议之上，服务器端的实现比较容易。
（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
（3）数据格式比较轻量，性能开销小，通信高效。
（4）可以发送文本，也可以发送二进制数据。
（5）没有同源限制，客户端可以与任意服务器通信。
（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL
----------------------------------------------------------------------------------------------------------------------------
以上参考： http://www.ruanyifeng.com/blog/2017/05/websocket.html
下面是可以用于生产环境的demo
服务端：
// npm install nodejs-websocket
const
ws =
require(
"nodejs-websocket")
console.
log(
"开始建立链接")
let
rd,
obj,
time,
intervalObj =
null
const
server =
ws.
createServer(
conn
=> {
conn.
on(
"text",
str
=> {
time =
new
Date()
time =
time.
getFullYear() +
"-" + (
time.
getMonth() +
1) +
"-" +
time.
getDate() +
" "
+
time.
getHours() +
":" +
time.
getMinutes() +
":" +
time.
getSeconds()
console.
log(
`接受到的信息为:
${
str
}
, 接受到信息的时间为:
${
time
}
`)
obj =
JSON.
parse(
str)
// 回应浏览器发送的ping，判断链接是否已经断开
if (
obj.
event ===
"ping") {
conn.
sendText(
'{"event": "pong"}')
}
// 订阅数据
if (
obj.
event ===
"getData") {
// 模拟数据一直在推送
intervalObj =
setInterval(()
=> {
rd =
Math.
floor(
Math.
random(
0,
1) *
10)
conn.
sendText(
JSON.
stringify({
event:
'getData',
dt: {
num:
rd}}))
},
1000)
}
})
conn.
on(
"close",
function (
code,
reason) {
clearInterval(
intervalObj)
console.
log(
"Connection closed")
})
// 必须监控error, 每当浏览器刷新时会断开链接报错
conn.
on(
"error",
function (
error) {
clearInterval(
intervalObj)
console.
log(
"Connection error",
error)
})
}).
listen(
8001)
客户端
index.html
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
</
head
>
<
body
>
<
div
id=
"message"
></
div
>
</
body
>
</
html
>
<
script
type=
"text/javascript"
src=
"./webSocket.js"
></
script
>
<
script
type=
"text/javascript"
src=
"./init.js"
></
script
>
init.js
const
msg =
document.
querySelector(
"#message")
let
ws,
_getTimer
// 整个站点只要创建一次websocket链接，不同的数据源进行多次订阅即可
ws =
new
webSocketFn(
"ws://127.0.0.1:8001")
// 注册异常调用函数，每个订阅要有一个异常处理函数
let
webSocketData = ()
=> {
ws.
webSocketSend(
'{"event": "getData"}') }
let
ajaxData = ()
=> {
// 接口请求
console.
log(
777)
}
let
fail =
ws.
getSocketFile(
webSocketData,
ajaxData)
ws.
errorCallBackFunArr.
push(
fail)
// 注册成功的回掉，每个订阅对应的要注册一个回掉
ws.
successFn[
'getData'] = (
data)
=> {
data && (
msg.
innerHTML =
data.
dt.
num)
}
let
firstSend = ()
=> {
if (
ws.
isConnection()) {
webSocketData()
}
else {
// 第一次请求可能websocket还没有链接，过200毫秒再试一次
ajaxData()
setTimeout(
webSocketData,
200)
}
}
firstSend()
webSocket.js
class
WebSocketClass {
constructor (
wsUrl) {
this.
successFn = {}
// 成功的回掉函数
this.
wsUrl =
wsUrl
// 请求的url
this.
errorCallBackFunArr = []
// 当推送异常时执行的数组
this.
isConnection =
false
// 判断是否支持weosocket
this.
isErrorCallBack =
false
this.
lockReconnect =
false
// 避免重复连接
this.
ping =
null
this.
sendObj = {}
this.
heartCheck()
this.
createWebSocket()
}
createWebSocket () {
try {
this.
webSocket =
new
WebSocket(
this.
wsUrl)
this.
initEventHandle()
}
catch (
e) {
this.
errorCallBackData()
this.
reconnect(
this.
wsUrl)
}
}
initEventHandle () {
this.
webSocket.
onclose = ()
=> {
this.
errorCallBackData()
this.
reconnect(
this.
wsUrl)
}
this.
webSocket.
onerror = ()
=> {
this.
errorCallBackData()
this.
reconnect(
this.
wsUrl)
}
this.
webSocket.
onopen = ()
=> {
this.
isConnection =
true
this.
isErrorCallBack =
false
clearInterval(
this.
ping)
this.
ping =
setInterval(()
=> {
this.
send(
'{"event": "ping"}')
},
10000)
// 心跳检测重置
this.
heartCheck.
start()
}
this.
webSocket.
onmessage =
data
=> {
// 如果获取到消息，心跳检测重置
// 拿到任何消息都说明当前连接是正常的
this.
heartCheck.
start()
this.
decodeData(
data)
}
}
send(
cmd) {
// 只有当 webSocket.readyState 为 OPEN才发送订阅
// readyState属性返回实例对象的当前状态，共有四种。
// CONNECTING：值为0，表示正在连接。
// OPEN：值为1，表示连接成功，可以通信了。
// CLOSING：值为2，表示连接正在关闭。
// CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
if (!
cmd) {
return
}
// this.sendObj[cmd] && (delete clearTimeout(this.sendObj[cmd]))
if (
this.
webSocket.
readyState ===
1) {
// 只有当链接打开时才进行订阅
this.
webSocket.
send(
cmd)
}
// else if (this.webSocket.readyState === 0) { // 如果链接处于正在链接中，则进行延时订阅
// this.sendObj[cmd] = setTimeout(() => {
// this.send(cmd)
// }, 50)
// }
}
reconnect (
url) {
if (
this.
lockReconnect) {
return
}
this.
lockReconnect =
true
// 没连接上会一直重连，设置延迟避免请求过多
setTimeout(()
=> {
this.
createWebSocket(
url)
this.
lockReconnect =
false
},
2000)
}
errorCallBackData () {
this.
isConnection =
false
if (!
this.
isErrorCallBack &&
this.
errorCallBackFunArr.
length) {
this.
isErrorCallBack =
true
for (
let
i =
0,
len =
this.
errorCallBackFunArr.
length;
i <
len;
i++) {
if ((
typeof
this.
errorCallBackFunArr[
i]) ===
'function') {
this.
errorCallBackFunArr[
i]()
}
}
}
}
decodeData (
data) {
if (
data.
data
instanceof
Blob) {
let
blob =
data.
data
// js中的blob没有没有直接读出其数据的方法，通过FileReader来读取相关数据
let
reader =
new
FileReader()
reader.
readAsArrayBuffer(
blob)
// 当读取操作成功完成时调用.
reader.
onload = (
evt)
=> {
if (
evt.
target.
readyState ===
FileReader.
DONE) {
let
result =
new
Uint8Array(
evt.
target.
result)
// 如果后端进行压缩数据处理（zlib），那么要引入解析zlib的js
result = (
new
window.
Zlib.
RawInflate(
result)).
decompress()
let
strResult =
''
let
length =
result.
length
for (
let
i =
0;
i <
length;
i++) {
strResult +=
String.
fromCharCode(
result[
i])
}
this.
callBackData(
JSON.
parse(
strResult))
}
}
return
}
let
d =
JSON.
parse(
data.
data)
// 如果后端需要等待，则返回code：10010，过一段时间后重新订阅
if (
d.
code ===
'10010') {
let
dt = {}
Object.
assign(
dt,
d)
delete
dt.
code
delete
dt.
msg
setTimeout(()
=> {
this.
send(
JSON.
stringify(
dt))
},
2000)
return
}
this.
callBackData(
JSON.
parse(
data.
data))
}
callBackData (
data) {
if (
data
instanceof
Array) {
for (
let
i =
0;
i <
data.
length;
i++) {
this.
doCallback(
data[
i])
}
}
else
if (
data
instanceof
Object) {
if (
data.
hasOwnProperty(
'event') &&
data.
event ===
'pong') {
return
}
data.
payload && (
data.
payload =
JSON.
parse(
data.
payload))
this.
doCallback(
data)
}
}
doCallback (
data) {
if (
data.
event) {
let
fn =
this.
successFn[
data.
event]
if (
typeof
fn ===
'function') {
fn(
data)
}
}
}
// 心跳检测
heartCheck () {
let
that =
this
this.
heartCheck = {
timeout:
10000,
// 10秒
timeoutObj:
null,
serverTimeoutObj:
null,
reset
:
function () {
clearTimeout(
this.
timeoutObj)
clearTimeout(
this.
serverTimeoutObj)
},
start
:
function () {
this.
reset()
let
self =
this
this.
timeoutObj =
setTimeout(
function () {
// 这里发送一个心跳，后端收到后，返回一个心跳消息
// onmessage拿到返回的心跳就说明连接正常
that.
send(
'{"event": "ping"}')
self.
serverTimeoutObj =
setTimeout(
function () {
// 如果超过一定时间还没重置，说明后端主动断开了
// 如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
that.
webSocket.
close()
},
self.
timeout)
},
this.
timeout)
}
}
}
}
function
webSocketFn (
url) {
let
wb =
new
WebSocketClass(
url)
return {
webSocketSend:
wb.
send.
bind(
wb),
errorCallBackFunArr:
wb.
errorCallBackFunArr,
successFn:
wb.
successFn,
isConnection
:
function () {
return
wb.
isConnection
},
getSocketFile (
webSocketData,
ajaxData) {
let
socketFail = (
isFirst)
=> {
if (
this.
isConnection()) {
webSocketData()
}
else {
ajaxData()
setTimeout(
socketFail,
2000)
}
}
return
socketFail
}
}
}