JS之websocket实现gzip压缩解压发送实例
JS
js之gzip压缩
function ws_send(ws, msg) {
var gzip_msg = new Uint8Array(pako.gzip(msg));
ws.send(gzip_msg.buffer);
}js之gzip解压
if (evt.data instanceof Blob) {
let result = '';
let reader = new FileReader();
//FileReader：从Blob对象中读取数据
reader.onloadend = function (e) {
//pako.inflate()对数据进行解压，得到正常的json对象
result = pako.inflate(reader.result, { to: 'string' });
//console.log("result=" + result);
var recv_msg = eval("(" + result + ")");
if (recv_msg.errno == 0) {
switch (recv_msg.cmd) {
case 11:
{
$("#service-quote-status").text("服务已连接, 订阅行情完成，PHP邮箱登陆成功,APP_KEY获取成功, 用户登录成功。");
}
break;
case 300: {
$("#service-trade-status").text("操作成功。数据已接收.返回数据:" + recv_msg.content.Order);
console.log(result);
}
break;
case -310: {
$("#service-trade-status").text("数据已接收.返回数据:" + recv_msg.content.Order);
console.log(result);
}
break;
case -102: {
if($("#show-quote-log").is(':checked'))
{
console.log("result=" + result);
}
if (recv_msg.content.s == "BTCUSDT") {
if (recv_msg.content.c) {
lastPrice = recv_msg.content.c;
lastTimeMsc = recv_msg.content.E;
$("#service-BTCUSDT").text("BTCUSDT:" + recv_msg.content.c);
if ($("#mt5-symbol").find("option:selected").val() == "BTCUSDT") {
$("#mt5-price").val(lastPrice);
}
}
else {
}
}
else if (recv_msg.content.s == "EOSUSDT") {
if (recv_msg.content.c) {
lastPrice = recv_msg.content.c;
lastTimeMsc = recv_msg.content.E;
$("#service-EOSUSDT").text("EOSUSDT:" + recv_msg.content.c);
if ($("#mt5-symbol").find("option:selected").val() == "EOSUSDT") {
$("#mt5-price").val(lastPrice);
}
}
else {
}
}
else if (recv_msg.content.s == "LTCUSDT") {
if (recv_msg.content.c) {
lastPrice = recv_msg.content.c;
lastTimeMsc = recv_msg.content.E;
$("#service-LTCUSDT").text("LTCUSDT:" + recv_msg.content.c);
if ($("#mt5-symbol").find("option:selected").val() == "LTCUSDT") {
$("#mt5-price").val(lastPrice);
}
}
else {
}
}
else if (recv_msg.content.s == "ADAUSDT") {
if (recv_msg.content.c) {
lastPrice = recv_msg.content.c;
lastTimeMsc = recv_msg.content.E;
$("#service-ADAUSDT").text("ADAUSDT:" + recv_msg.content.c);
if ($("#mt5-symbol").find("option:selected").val() == "ADAUSDT") {
$("#mt5-price").val(lastPrice);
}
}
else {
}
}
else if (recv_msg.content.s == "ETHUSDT") {
if (recv_msg.content.c) {
lastPrice = recv_msg.content.c;
lastTimeMsc = recv_msg.content.E;
$("#service-ETHUSDT").text("ETHUSDT:" + recv_msg.content.c);
if ($("#mt5-symbol").find("option:selected").val() == "ETHUSDT") {
$("#mt5-price").val(lastPrice);
}
}
else {
}
}
else {
console.log("未处理的成功消息:" + result);
}
}
break;
default: {
console.log(result);
}
break;
}
}
else {
switch (recv_msg.cmd) {
case 300:
case 301: {
$("#service-trade-status").text("操作成功。数据已接收.返回数据:" + recv_msg.message);
console.log(result);
}
break;
default: {
console.log("未处理的错误消息:" + result);
}
break;
}
}
}
reader.readAsBinaryString(evt.data);
}解压附件gzip-sha1-md5-base64-js.zip
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WebSocket验证测试</title>
<style type="text/css">
.align-center {
margin: 10 auto;
/* 居中 这个是必须的，，其它的属性非必须 */
width: 100%;
/* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
background: white;
/* 背景色 */
text-align: center;
/* 文字等内容居中 */
}
.dotted {
border-style: dotted
}
.dashed {
border-style: dashed
}
.solid {
border-style: solid
}
.double {
border-style: double
}
.groove {
border-style: groove
}
.ridge {
border-style: ridge
}
.inset {
border-style: inset
}
.outset {
border-style: outset
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="js/pako.min.js"></script>
</head>
<body>
<script>
function gzip_uncompress_blob(blob, result) {
//let result = '';
let reader = new FileReader();
//FileReader：从Blob对象中读取数据
reader.onloadend = function (e) {
//pako.inflate()对数据进行解压，得到正常的json对象
result = pako.inflate(reader.result, { to: 'string' });
}
reader.readAsBinaryString(blob);
//return result;
}
function gzip_uncompress_string(str) {
return pako.inflate(str, { to: 'string' });
}
function gzip_compress_string_ex(str) {
return pako.deflate(escape(str), { to: 'string' });
}
function gzip_compress_string(str) {
return pako.gzip(escape(str), { to: 'string' });
}
//将字符串转换成十六进制形式，中间用空格隔开
function StringToHex(str) {
var result = [];
var list = str.split("");
for (var i = 0; i < list.length; i++) {
if (i != 0) {
result.push(" ");
}
var item = list[i];
var binaryStr = item.charCodeAt().toString(16);
result.push(binaryStr);
}
return result.join("");
}
//将十六进制字符串转换成Unicode字符串
function HexToString(str) {
var result = [];
var list = str.split(" ");
for (var i = 0; i < list.length; i++) {
var item = list[i];
var asciiCode = parseInt(item, 16);
var charValue = String.fromCharCode(asciiCode);
result.push(charValue);
}
return result.join("");
}
//将字符串转换成二进制形式，中间用空格隔开
function StringToBinary(str) {
var result = [];
var list = str.split("");
for (var i = 0; i < list.length; i++) {
if (i != 0) {
result.push(" ");
}
var item = list[i];
var binaryStr = item.charCodeAt().toString(2);
result.push(binaryStr);
}
return result.join("");
}
//将二进制字符串转换成Unicode字符串
function BinaryToString(str) {
var result = [];
var list = str.split(" ");
for (var i = 0; i < list.length; i++) {
var item = list[i];
var asciiCode = parseInt(item, 2);
var charValue = String.fromCharCode(asciiCode);
result.push(charValue);
}
return result.join("");
}
</script>
<script>
$(document).ready(function () {
var ws = null;
$("#sendmsg-gzip").attr("checked",false);
$("#start-server-btn").click(function () {
// 打开一个 web socket
ws = new WebSocket($("#server-addr").val());
ws.onopen = function () {
// Web Socket 已连接上，使用 send() 方法发送数据
$("#service-quote-status").text("服务已连接");
};
ws.onmessage = function (evt) {
let result = "";
console.log(evt.data);
if ($("#recvmsg-gzip").is(':checked')) {
if (evt.data instanceof Blob) {
let result = '';
let reader = new FileReader();
//FileReader：从Blob对象中读取数据
reader.onloadend = function (e) {
//pako.inflate()对数据进行解压，得到正常的json对象
result = pako.inflate(reader.result, { to: 'string' });
$("#service-quote-status").text(result);
console.log("result=" + result);
}
reader.readAsBinaryString(evt.data);
}
}
else {
$("#service-quote-status").text(evt.data);
}
};
ws.onclose = function () {
// 关闭 websocket
$("#service-quote-status").text("服务已断开");
};
//=======================================================================
});
$("#stop-server-btn").click(function () {
console.log("Websocket close...");
ws.close();
});
//发送消息
$("#sendmsg-btn").click(function () {
console.log("sendmsg...");
let msg = $("#sendmsg-txt").val();
console.log(msg);
if ($("#sendmsg-gzip").is(':checked')) {
var gzip_msg = new Uint8Array(pako.gzip(msg));
ws.send(gzip_msg.buffer);
}
else {
ws.send(msg);
}
});
});
</script>
<div name="main" class="align-center">
<div id="websocket-quote">
服务器地址:
<input id="server-addr" type="text" value="ws://192.168.31.124:2021">
<br>
<button id="start-server-btn">连接</button>
<button id="stop-server-btn">断开</button>
</div>
<HR>
<div id="websocket-quote-state">
输入要发送的消息:
<br>
<input id="sendmsg-gzip" type="checkbox" checked="true" />发送启用gzip</p>
<input id="recvmsg-gzip" type="checkbox" checked="true" />接收启用gzip</p>
<textarea id="sendmsg-txt" rows="10%" cols="50%">{"cmd":100,"params":{"symbols":["BTCUSDT"]}}</textarea>
<button id="sendmsg-btn">发送</button>
<br>
<span id="service-quote-status">状态信息 </span>
<br>
</div>
<HR>
</div>
</body>
</html>
收藏的用户（0）
X
正在加载信息~
2
最新回复 (0)