javascript 使用zlib发送wss请求,接收blob,并解压

浅陌夏秋nfc

已于 2022-06-17 11:49:34 修改

阅读量1k

点赞数

分类专栏：前端代码文章标签： javascript

于 2022-06-16 16:23:41 首次发布

本文链接：https://blog.csdn.net/love1ky/article/details/125318189

版权

前端代码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用了pako插件

/*! pako 2.0.4 https://github.com/nodeca/pako @license (MIT AND Zlib) */

主要代码：

var ws = new WebSocket("wss://yoururl");
            //连接成功时，触发事件
            ws.onopen = function () {                
                ws.send(binaryArray);
                console.log("数据发送中...");
            }
            //接收到服务端响应的数据时，触发事件
            ws.onmessage = function (res) {
				console.log("数据接收中...");
            }
            // 断开 web socket 连接成功触发事件
            ws.onclose = function () {
                console.log("连接已关闭...");
            };

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn" type="button">点我发送请求</button>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
	<script type="text/javascript">
		$("#btn").click(function() {
			// 创建WebSocket 对象
			var ws = new WebSocket("wss://yoururl");
			//连接成功时，触发事件
			ws.onopen = function() {
				//请求参数
				var param = {
					"method": "test",
					"lang": "zh_CN",
					"token": "12345678",
					"cache": 0,
					"callbackId": "123",
					"version": 0.7
				};
				// 使用 send() 方法发送数据
				var str = JSON.stringify(param);
				var binaryArray = pako.deflate(str);
				ws.send(binaryArray);
				console.log("数据发送中...");
			}
			//接收到服务端响应的数据时，触发事件
			ws.onmessage = function(res) {
				console.log("数据接收中...");
				console.log("blob类型数据: " + res.data); //blob
				let reader = new FileReader();
				reader.readAsArrayBuffer(res.data, "utf-8");
				reader.onload = function() {
					console.log("blob转ArrayBuffer数据类型", reader.result);
					// 对数据进行解压
					let msg = JSON.parse(
						pako.inflate(reader.result, {
							to: "string"
						})
					);
					console.log("ArrayBuffer转字符串", msg);
				};
			}
			// 断开 web socket 连接成功触发事件
			ws.onclose = function() {
				console.log("连接已关闭...");
			};
		});
	</script>
</html>

服务器返回消息为blob类型，不能直接处理，报错Uncaught unknown compression method，需要转为arrayBuffer再进行解码

应答消息也可以使用Promise then()处理

ws.onmessage = function (evt) {
				console.log(evt.data);
				 new Response(evt.data).arrayBuffer().then(buffer=> {
					var result = JSON.parse(pako.inflate(buffer, { to: 'string' }));
					console.log(result);
					})
            }

另一种方案：

定义WebSocket同时指定传输字符类型,

var ws = new WebSocket("yoururl");		
ws.binaryType = "arraybuffer";

这样onmessage接收的就是arraybuffer,可以直接处理。

 ws.onmessage = function(e) {
				console.log(e.data);
				var str =pako.inflate(e.data, {	to: 'string'});
				console.log(str);

浅陌夏秋nfc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
javascript 使用zlib发送wss请求,接收blob,并解压

javascript发送wss请求请求为gzip压缩传输接收blob,并解压
复制链接

扫一扫

专栏目录

javascript 使用zlib发送wss请求,接收blob,并解压

“相关推荐”对你有帮助么？