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