前端培训-中级阶段（25）- Web Socket 网络编程（2019-11-14期）

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。

这块内容是我早就想下手的，但是因为之前服务没跑起来。所以文章没写成。今天经过一下午，终于鼓捣好了demo地址

websocket

webSocket 可以帮助浏览器与服务器完成双向通信。
在 webSocket 出现之前，我们想接收到服务端的数据需要使用一些特殊手段，比如 轮询、长连接。

构造函数

var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
ws = new WebSocket(protocol+"://ws.lilnong.top");

WebSocket(url[, protocols]) 传入 webScoket服务的URL，即可建立连接。

属性与方法

名称	类型	描述
url	属性	当前连接的绝对路径
protocol	属性	下属协议，对应构造函数第二个参数
readyState	属性	当前的链接状态
bufferedAmount	属性	当前连接的绝对路径
binaryType	属性	数据类型：blob
close()	方法	关闭当前链接
send()	方法	发送数据到服务端

readyState 状态码

常量	数值	描述
WebSocket.CONNECTING	0	正在连接中
WebSocket.OPEN	1	已经连接并且可以双向通讯
WebSocket.CLOSING	2	正在关闭中
WebSocket.CLOSED	3	已关闭或者没有连接成功

WebSocket.send() 方法

WebSocket.send(String | ArrayBuffer | Blob | ArrayBufferView);

var protocol = 'wss'
if(location.protocol == "http:") protocol = 'ws'
wsTest = new WebSocket(protocol+"://ws.lilnong.top");
wsTest.onclose = ()=>console.log('onclose');
wsTest.onerror = ()=>console.log('onerror');
wsTest.onmessage = ()=>console.log('onmessage');
wsTest.onopen = ()=>console.log('onopen')

var blob = new Blob(['lilnong.top','水的一批'])
filereader = new FileReader()
filereader.readAsArrayBuffer(blob);
filereader.onload = function(){
    wsTest.send(filereader.result)
    wsTest.send(new Int8Array(filereader.result))
}
wsTest.send(blob)
wsTest.send('lilnong.top水的一批1')

可以看到blob其实是发送失败了。一般来说我们还是发送String居多。

WebSocket.close() 方法

WebSocket.close([code] [, reason]);

1. code 表示错误码。默认为1005。CloseEvent
2. reason 为错误码的描述。

回调函数

函数名称	触发时机	备注
onclose	当连接关闭后的回调函数	主动close或者被动close都会触发
onerror	当连接失败后的回调函数	只有被动close会触发
onmessage	当接收到服务端发送数据时的回调函数	e.data为服务端返回的信息
onopen	当连接成功后的回调函数	之后就可以进行交互了

实现

node

依赖ws = require('ws');这个 websocket 模块。
我们可以把connection 中的连接对象保存到全局的数组。这样我们就可以广播消息了。
在close把连接对象移出数组。

var ws = require('ws');
var socketServer = ws.Server;
var wss = new socketServer({port: 8090});//创建服务，监听8090端口
// 监听连接
wss.on('connection', function(ws){
    // 推送消息
    ws.send(JSON.stringify({type: 'start',time: Date.now()}))
    // 接收浏览器端发送的消息
    ws.on('message',function(message){
        console.log(JSON.parse(message))
    })
    // 监听连接断开
    ws.on('close', function() {})
})

html

var initWs = function initWs(){
    var protocol = 'wss'
    if(location.protocol == "http:") protocol = 'ws'
    ws = new WebSocket(protocol+"://ws.lilnong.top");
    ws.onopen = function (e) {console.log('连接成功');}
    //收到消息处理
    ws.onmessage = function (e) {
        console.log(e.data)
    }
    //监听连接关闭情况
    ws.onclose = function (e) {
        setTimeout(v=>initWs(), 2000);//自动重连
        console.log('连接关闭');
    }
}
initWs();
setInterval(v=>{ws.send(JSON.stringify({type: 'ping'}));}, 10 * 1000);// 保持心跳

总结

1. socket 需要保存心跳，一般是 ping、pong 逻辑。
2. 超时时间是可以人为设置的，所以心跳时间也是可以选择的。（我的是20s，所以心跳是10s。公司之前做的5m）。

3. socket 如果断线要注意重连。因为都会落到close里面，所以我们可以直接在close里面重连。

   1. 部分情况要注意重连频率、以及重连次数的策略。
4. 发送和接受只能是字符串，所以要JSON.stringify()

微信公众号：前端linong

参考文献

1. 前端培训目录、前端培训规划、前端培训计划
2. WebSockets