微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Websocket协议详解及简单实例代码

分类：JavaScript作者：编程之家

Websocket协议详解

关于websocket的协议是用来干嘛的，请参考其他文章。

WebSocket关键词

HTML5协议，实时，全双工通信，长连接

WebSocket比传统Http的好处

  1. 客户端与服务端只建立一个TCP连接，可以使用更少的连接
  2. WebSocket的服务端可以将数据推送到客户端，如实时将证券信息反馈到客户端（这个很关键），实时天气数据，比http请求响应模式更灵活
  3. 更轻量的协议头，减少数据传送量

数据帧格式

下图为手工打造的数据帧格式

rush:js;">

/**

  • fin |masked | |
  • srv1 | length | |
  • srv2 | (7bit |mask数据 |payload
  • srv3 | 7+2字节 | 4字节 |真实数据
    opcode | 7+64字节 | |
    （4bit）
    /

作以下说明：

1.前8个bit（一个字节） —fin： 是否数据发送完成，为1发送完成为0发送未完。 —srv1，srv2，srv3：留作后用 —opcode:数据类型操作码，4bit表示，其中 TEXT: 1,text类型的字符串 BINARY: 2,二进制数据，通常用来保存图片 CLOSE: 8,关闭连接的数据帧。 PING: 9,心跳检测。ping PONG: 10,心跳检测。pong

rush:js;"> var events = require('events'); var http = require('http'); var crypto = require('crypto'); var util = require('util');

/**

  • 数据类型操作码 TEXT 字符串
  • BINARY 二进制数据 常用来保存照片
  • PING,PONG 用作心跳检测
  • CLOSE 关闭连接的数据帧 (有很多关闭连接的代码 1001，1009,1007,1002)
    */
    var opcodes = {
    TEXT: 1,BINARY: 2,CLOSE: 8,PING: 9,PONG: 10
    };
    var WebSocketConnection = function (req,socket,upgradeHead) {
    "use strict";
    var self = this;

var key = hashWebSocketKey(req.headers['sec-websocket-key']);
/**

  • 写头
    */
    socket.write('HTTP/1.1 101 Web Socket Protocol Handshake \r\n' +
    "Upgrade:WebSocket\r\n" +
    "Connection : Upgrade\r\n" +
    "sec-websocket-accept: " + key + '\r\n\r\n');

/**

  • 接收数据
    */
    socket.on('data',function (buf) {
    self.buffer = Buffer.concat([self.buffer,buf]);
    while (self._processBuffer()) {
}

});
socket.on('close',function (had_error) {
if (!self.closed) {
self.emit("close",1006);
self.closed = true;
}
});
this.socket = socket;
this.buffer = new Buffer(0);
this.closed = false;

};

//websocket连接继承事件
util.inherits(WebSocketConnection,events.EventEmitter);

/*
发送数据函数

  • */
    WebSocketConnection.prototype.send = function (obj) {
    "use strict";
    var opcode;
    var payload;
    if (Buffer.isBuffer(obj)) {
    opcode = opcodes.BINARY;
    payload = obj;
    } else if (typeof obj) {
    opcode = opcodes.TEXT;
    //创造一个utf8的编码 可以被编码为字符串
    payload = new Buffer(obj,'utf8');
    } else {
    throw new Error('cannot send object.Must be string of Buffer');
    }

this._doSend(opcode,payload);
};
/*
关闭连接函数

  • */
    WebSocketConnection.prototype.close = function (code,reason) {
    "use strict";
    var opcode = opcodes.CLOSE;
    var buffer;
    if (code) {
    buffer = new Buffer(Buffer.byteLength(reason) + 2);
    buffer.writeUInt16BE(code,0);
    buffer.write(reason,2);
    } else {
    buffer = new Buffer(0);
    }
    this._doSend(opcode,buffer);
    this.closed = true;
    };

WebSocketConnection.prototype._processBuffer = function () {
"use strict";
var buf = this.buffer;
if (buf.length < 2) {
return;
}
var idx = 2;
var b1 = buf.readUInt8(0); //读取数据帧的前8bit
var fin = b1 & 0x80; //如果为0x80，则标志传输结束
var opcode = b1 & 0x0f;//截取第一个字节的后四位
var b2 = buf.readUInt8(1);//读取数据帧第二个字节
var mask = b2 & 0x80;//判断是否有掩码，客户端必须要有
var length = b2 | 0x7f;//获取length属性 也是小于126数据长度的数据真实值
if (length > 125) {
if (buf.length < 8) {
return;//如果大于125，而字节数小于8，则显然不合规范要求
}
}
if (length === 126) {//获取的值为126 ，表示后两个字节用于表示数据长度
length = buf.readUInt16BE(2);//读取16bit的值
idx += 2;//+2
} else if (length === 127) {//获取的值为126 ，表示后8个字节用于表示数据长度
var highBits = buf.readUInt32BE(2);//(1/0)1111111
if (highBits != 0) {
this.close(1009,"");//1009关闭代码，说明数据太大
}
length = buf.readUInt32BE(6);//从第六到第十个字节为真实存放的数据长度
idx += 8;
}

if (buf.length < idx + 4 + length) {//不够长 4为掩码字节数
return;
}

var maskBytes = buf.slice(idx,idx + 4);//获取掩码数据
idx += 4;//指针前移到真实数据段
var payload = buf.slice(idx,idx + length);
payload = unmask(maskBytes,payload);//解码真实数据
this._handleFrame(opcode,payload);//处理操作码
this.buffer = buf.slice(idx + length);//缓存buffer
return true;
};

/**

  • 针对不同操作码进行不同处理
  • @param 操作码
  • @param 数据
    */
    WebSocketConnection.prototype._handleFrame = function (opcode,buffer) {
    "use strict";
    var payload;
    switch (opcode) {
    case opcodes.TEXT:
    payload = buffer.toString('utf8');//如果是文本需要转化为utf8的编码
    this.emit('data',opcode,payload);//Buffer.toString()默认utf8 这里是故意指示的
    break;
    case opcodes.BINARY: //二进制文件直接交付
    payload = buffer;
    this.emit('data',payload);
    break;
    case opcodes.PING://发送ping做响应
    this._doSend(opcodes.PING,buffer);
    break;
    case opcodes.PONG: //不做处理
    break;
    case opcodes.CLOSE://close有很多关闭码
    let code,reason;//用于获取关闭码和关闭原因
    if (buffer.length >= 2) {
    code = buffer.readUInt16BE(0);
    reason = buffer.toString('utf8',2);
    }
    this.close(code,reason);
    this.emit('close',code,reason);
    break;
    default:
    this.close(1002,'unkNown opcode');
    }
    };

/**

  • 实际发送数据的函数
  • @param opcode 操作码
  • @param payload 数据
  • @private
    */
    WebSocketConnection.prototype._doSend = function (opcode,payload) {
    "use strict";
    this.socket.write(encodeMessage(opcode,payload));//编码后直接通过socket发送
    };

/**

  • 编码数据
  • @param opcode 操作码
  • @param payload 数据
  • @returns {}
    /
    var encodeMessage = function (opcode,payload) {
    "use strict";
    var buf;
    var b1 = 0x80 | opcode;
    var b2;
    var length = payload.length;
    if (length < 126) {
    buf = new Buffer(payload.length + 2 + 0);
    b2 |= length;
    //buffer,offset
    buf.writeUInt8(b1,0);//读前8bit
    buf.writeUInt8(b2,1);//读8―15bit
    //Buffer.prototype.copy = function(targetBuffer,targetStart,sourceStart,sourceEnd) {
    payload.copy(buf,2)//复制数据,从2(第三)字节开始

} else if (length < (1 << 16)) {
buf = new Buffer(payload.length + 2 + 2);
b2 |= 126;
buf.writeUInt8(b1,0);
buf.writeUInt8(b2,1);
buf.writeUInt16BE(length,2)
payload.copy(buf,4);
} else {
buf = new Buffer(payload.length + 2 + 8);
b2 |= 127;
buf.writeUInt8(b1,1);
buf.writeUInt32BE(0,2)
buf.writeUInt32BE(length,6)
payload.copy(buf,10);
}

return buf;
};

/**

  • 解掩码
  • @param maskBytes 掩码数据
  • @param data payload
  • @returns {Buffer}
    */
    var unmask = function (maskBytes,data) {
    var payload = new Buffer(data.length);
    for (var i = 0; i < data.length; i++) {
    payload[i] = maskBytes[i % 4] ^ data[i];
    }
    return payload;
    };
    var KEY_SUFFIX = '258EAFA5-E914-47DA-95CA-C5ABoDC85B11';

/*equals to crypto.createHash('sha1').update(key+'KEY_SUFFIX').digest('base64')

  • */
    var hashWebSocketKey = function (key) {
    "use strict";
    var sha1 = crypto.createHash('sha1');
    sha1.update(key + KEY_SUFFIX,'ascii');
    return sha1.digest('base64');
    };

exports.listen = function (port,host,connectionHandler) {
"use strict";
var srv = http.createServer(function (req,res) {
});

srv.on('upgrade',function (req,upgradeHead) {
"use strict";
var ws = new WebSocketConnection(req,upgradeHead);
connectionHandler(ws);
});
srv.listen(port,host);
};

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

原文地址：https://www.jb51.cc/js/43647.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

Websocket协议Websocket协议实例代码Websocket协议详细介绍

相关推荐

自定义web弹窗/层：简易风格的msg与可拖放的dialog，生成博客园文章目录弹窗
前言 做过web项目开发的人对layer弹层组件肯定不陌生，作为layUI的一个重要组件，使用简单、接口参数丰富，功能健壮，深受广大开发者的喜爱，作为一个热（经）爱（常）工（划）作（水），喜欢钻研探索技术的程序员（狗），我们自己来实现一个web弹窗/层，一窥layer的本源（/手动滑稽脸），进步，从
nice-validator表单验证插件的简单使用
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步，是数据安全的第一道关卡，虽然我们不能100%相信客户端提交的数据（真正的校验还得在服务端进行），但设置前端表单校验也是至关重要的，自己写逻辑代码一个一个表单字段去校验不现实，又不想自己造轮子，使用jquery插件是不错的选择，这里记录一下在
基于“formData批量上传的多种实现” 的多图片预览、上传的多种实现
前言 图片上传是web项目常见的需求，我基于之前的博客的代码（请戳：formData批量上传的多种实现）里的第三种方法实现多图片的预览、上传，并且支持三种方式添加图片到上传列表：选择图片、复制粘贴图片、鼠标拖拽图片，同时支持从上传列表中移除图片（点击“X”号） 效果演示 选择图片 页面操作 后台接参
踹掉后端，前端导出Excel！
前言 导出Excel文件这个功能，通常都是在后端实现返回前端一个下载链接，但有时候我们只想导出前端页面上已经有了的数据，不想再调后端导出接口浪费服务器资源，学习本文demo例子，我们踹掉后端，直接在前端导出Excel！ 代码实现 1、利用Blob对象构造一个a标签的href链接，从而实现文件下载，E
Web Worker——js的多线程，实现统计博客园总阅读量、总评论量、总推荐量
前言 众所周知，js是单线程的，从上往下，从左往右依次执行，当我们有耗时的任务需要处理时，便会阻塞线程造成页面卡顿等问题。web worker的目的，就是为JavaScript创造多线程环境，允许主线程将一些任务分配给子线程。在主线程运行的同时，子线程在后台运行，两者互不干扰。等到子线程完成计算任务
select标签 禁止选择但又能通过序列化form表单传值到后台
前言 项目开发中，我们可能会碰到这样的需求：select标签，禁止选择但又能通过序列化form表单传值到后台，但是当我们使用disabled=&quot;disabled&quot;时发现，无法序列化form获取到select标签的值；当我们使用readonly=&quot;readonly&quo
还在问跨域？本文记录js跨域的多种实现实例
前言 众所周知，受浏览器同源策略的影响，产生了跨域问题，那么我们应该如何实现跨域呢？本文记录几种跨域的简单实现 前期准备 为了方便测试，我们启动两个服务，10086（就是在这篇博客自动生成的项目，请戳：SpringBoot系列——Spring-Data-JPA（究极进化版） 自动生成单表基础增、删、
formData批量上传的多种实现
前言 最近项目需要批量上传附件，查了下资料，网上很多但看着一脸懵，只贴部分代码，介绍也不详细，这里记录一下自己的采坑与多种实现，以免以后忘记。 这里先介绍下FormData对象，以下内容摘自：https://developer.mozilla.org/zh-CN/docs/Web/API/FormD
laypage 物理分页与逻辑分页实例
前言 以下介绍摘自&#160;layui官网laypage layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素
乐观锁机制解决多层嵌套异步ajax问题
前言 在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot