json中如何传一个byte数组

一、装逼前先热热身

无论是比较传统的 web项目还是近几年流行的前后端分离，后端只独立提供数据交互接口服务的项目，都避免不了数据之间交互格式的选择。

从很早之前的 xml 格式
到现在最火热的json格式

我们可以发现数据格式都是越来越 “短小精悍” 。当然我们可能在某些特定的业务场合，比如对延时要求特别高的场景

H5多人对战类型游戏
实时的数据信息交互场景语音聊天、以及难度更高的视频聊天等

或者对传输数据大小有一定限制的业务场所；那么这时候我们就可以使用websocket 进行信息数据的交互；不过使用传统的websocket +json字符串的方式来进行数据交互的话，无论是网络带宽的占用以及响应的时间上来说都比不上使用byte字节数组交互数据的方式；当然，对于很早之前的web前端，并不能很好的处理byte字节数组，不过随着H5的到来我们在JavaScript上也可以很好的对二进制数据进行操作

二、具体实现步骤

spring boot 依赖加入
WebSocket config配置
WebSocket接口类简单实现
前端JavaScript具体实现
1、spring boot 依赖加入

<dependency> <groupId>org.;/groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency>

2、 WebSocket config配置

import org.; import org.; import org.; @Configuration public class WebConfig { @Bean public ServerEndpointExporter serverEndpointExporter() { return new ServerEndpointExporter(); } }

3. WebSocket接口类简单实现

package com.exam; import org.; import java.nio.ByteBuffer; import javax.websocket.*; import javax.web; /** * @ServerEndpoint * 注解是一个类层次的注解，它的功能主要是将目前的类定义成一个websocket服务器端, * 注解的值将被用于监听用户连接的终端访问URL地址,客户端可以通过这个URL来连接到WebSocket服务器端 */ @ServerEndpoint(value="/websocket") @Component public class WebSocketTest { @OnOpen public void onOpen(Session session){ Sy("加入连接"); } @OnClose public void onClose(){ Sy("关闭连接"); } @OnError public void onError(Session session, Throwable error){ Sy("发生错误"); error.printStackTrace(); } /** * 收到客户端消息后调用的方法 * @param messages 客户端发送过来的消息 * @param session 可选的参数 */ @OnMessage public void onmessage(byte[] messages, Session session) { try { Sy("接收到消息:"+new String(messages,"utf-8")); //返回信息 String resultStr="{name:\"张三\",age:18,addr:\"上海浦东\"}"; //发送字符串信息的 byte数组 ByteBuffer bf=By("utf-8")); ().sendBinary(bf); //发送字符串 //().sendText("测试"); } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } } }

4. 前端JavaScript具体实现

<html> <head> </head> <body> <input id="text" type="text"/> <button onclick="send()">发送消息</button> <div id="message"></div> </body> <script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/websocket"); //websocket默认是传输字符串的，需要改为arraybuffer二进制传输类型 web = "arraybuffer"; }else { alert('当前浏览器 Not support websocket') } //连接发生错误的回调方法 web = function () { setMessageinnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 web = function () { setMessageInnerHTML("WebSocket连接成功"); } //接收到消息的回调方法 web = function (event) { //将接收到的二进制数据转为字符串 var unit8Arr = new Uint8Array) ; setMessageInnerHTML(bytetoString(unit8Arr)); } //连接关闭的回调方法 web = function () { setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭WebSocket连接 function closeWebSocket() { web(); } //发送消息 function send() { var message = document.getElementById('text').value; //将字符串转换为byte数组 var bytesArr= stringToByte(message); var bytes =new Uint8Array) ; for (var i = 0; i < by; i++) { bytes[i]=bytesArr[i]; } con(bytes) web(bytes); } //将字符串转为 Array byte数组 function stringToByte(str) { var bytes = new Array(); var len, c; len = ; for(var i = 0; i < len; i++) { c = (i); if(c >= 0x010000 && c <= 0x10FFFF) { by(((c >> 18) & 0x07) | 0xF0); by(((c >> 12) & 0x3F) | 0x80); by(((c >> 6) & 0x3F) | 0x80); by((c & 0x3F) | 0x80); } else if(c >= 0x000800 && c <= 0x00FFFF) { by(((c >> 12) & 0x0F) | 0xE0); by(((c >> 6) & 0x3F) | 0x80); by((c & 0x3F) | 0x80); } else if(c >= 0x000080 && c <= 0x0007FF) { by(((c >> 6) & 0x1F) | 0xC0); by((c & 0x3F) | 0x80); } else { by(c & 0xFF); } } return bytes; } //byte数组转字符串 function byteToString(arr) { if(typeof arr === 'string') { return arr; } var str = '', _arr = arr; for(var i = 0; i < _arr.length; i++) { var one = _arr[i].toString(2), v = one.match(/^1+?(?=0)/); if(v && one.length == 8) { var bytesLength = v[0].length; var store = _arr[i].toString(2).slice(7 - bytesLength); for(var st = 1; st < bytesLength; st++) { store += _arr[st + i].toString(2).slice(2); } str += S(parseInt(store, 2)); i += bytesLength - 1; } else { str += S(_arr[i]); } } return str; } </script> </html>

三、效果展示