前端培训-中级阶段（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]);

code 表示错误码。默认为1005。CloseEvent
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);// 保持心跳

总结

socket 需要保存心跳，一般是 ping、pong 逻辑。
超时时间是可以人为设置的，所以心跳时间也是可以选择的。（我的是20s，所以心跳是10s。公司之前做的5m）。
socket 如果断线要注意重连。因为都会落到close里面，所以我们可以直接在close里面重连。
1. 部分情况要注意重连频率、以及重连次数的策略。
发送和接受只能是字符串，所以要JSON.stringify()

微信公众号：前端linong