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

Nov 8, 2019

思否

前端最基础的就是 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里面重连。

部分情况要注意重连频率、以及重连次数的策略。

发送和接受只能是字符串，所以要JSON.stringify()

微信公众号：前端linong

参考文献

前端培训目录、前端培训规划、前端培训计划
WebSockets

原文：SegmentFault