解决webSocket中传输base64图片过大时的过慢问题

1、背景

公司项目有个需求，将发生的事件使用webSocket推送到前端（包括一张高清图），要求1秒之内在web上显示，且不能失真。

方案1：首先是将图片转换成base64，作为字符串推送给前端，但是推送过来的信息量太大，导致接收信息延时。

方案2：改为推送文件路径，但是web请求图片会有0.6-0.7毫秒的时间，一旦推送过多，会更慢，且web加载图片时会有短暂的闪烁。

2、解决方案

将字符串信息压缩后传给web，但是java对于字符串压缩量不大，因此通过node来进行处理。使用开源插件pako。

将node作为服务端，java后台（客户端）通过socket将字符串发给node，node将压缩后的图片发送给java后台（也可以直接通过node服务器发给web，当前项目重构量比较大，未使用）。再发给web去解压。

3、代码

node服务端代码

/*** js压缩函数* @type {{}}*/
const pako = require('pako');
/*** 导入websocket*/
const websocket = require('./websocket.js');var net = require('net');
var HOST = '127.0.0.1';
var PORT = 11111;/*** 压缩函数* @param str* @returns {void | number | * | Deflate.result}*/
const gzip = function (str){const _str = str || args[0] || '';return pako.deflate(_str, { to: 'string' });
};net.createServer(function(socket) {console.log('connection: ' + socket.remoteAddress + ':' + socket.remotePort);/*** 连接后 接收消息*/let __data = '';const BEGIN = '0x420x450x470x490x4E';const END = '0x450x4E0x44';const setData = function(data) {// endsWidth 无用if (data.includes(END)) {const _data = gzip(__data.replace(BEGIN, '').replace(END, ''));// 测试代码// websocket.connections.forEach(function(conn) {//     conn.sendText(_data);// });socket.write(_data + '\n');__data = '';}};socket.on('data', function(data) {data = data.toString();const len = data.length;if (data.startsWith(BEGIN)) {__data = data;} else {__data += data;}setData(data);});/*** 监听关闭状态*/socket.on('close', function(data) {console.log('close: ' + socket.remoteAddress + ' ' + socket.remotePort);});
}).listen(PORT, HOST);console.log('Server listening on ' + HOST +':'+ PORT);

node websocket测试代码

const ws = require('nodejs-websocket')const AllUserData = [];// Scream server example: 'hi' -> 'HI!!!'
const connection = function (conn) {conn.on('text', function (str) {AllUserData.push({'id':str,'ws':conn});conn.sendText(str.toUpperCase()+'!!!')});conn.on('close', function (code, reason) {console.log('Connection closed')// 当用户退出的时候捕捉到退出的用户for (let i in AllUserData) {if (AllUserData[i].ws == conn) {console.log(AllUserData[i])}}});conn.on('error', function(code) {// 某些情况如果客户端多次触发连接关闭，会导致connection.close()出现异常，这里try/catch一下try {conn.close()} catch (error) {console.log('close异常', error)}console.log('异常关闭', code)});
}
const server = ws.createServer(connection).listen(8001);module.exports = server;// console.log(server.connections);

java客户端代码

import java.io.*;
import java.net.Socket;public class Pako {private Socket socket = null; // Socket 对象private PrintWriter printWriter = null; // 发送事件对象private BufferedReader bufferedReader = null; // 接收事件对象public Pako() throws IOException {socket = new Socket("127.0.0.1", 11111);printWriter = new PrintWriter(new BufferedWriter(new OutputStreamWriter(socket.getOutputStream())), true);bufferedReader = new BufferedReader(new InputStreamReader(socket.getInputStream()));}/*** @param str* @return* @throws IOException*/public String getPakoDataBySocket(String str) throws IOException {// 事件发送this.sendMsg(str);// 事件接收return this.getMsg();}/*** 关闭连接* @throws IOException*/public void closeSocket() throws IOException {socket.close();}/*** 发送事件* @param str* @throws IOException*/public void sendMsg(String str) throws IOException {printWriter.println(str);printWriter.flush();}/*** 接收事件* @throws IOException* @return*/private String getMsg() throws IOException {return bufferedReader.readLine();}
}

java客户端测试代码

import java.io.IOException;
import java.util.Date;public class Test {public static Pako pako;static {try {pako = new Pako();} catch (IOException e) {}}public Test() throws IOException {}public static void main(String[] args) throws IOException {Test _test = new Test();_test.test();}public void test() throws IOException {String b64Data = "H4sIAAAAAAAAAJ3UMQ7CMAwF0KugP2ewEzdpcxXUAbWAOiHUMqCqdyeVQAobfGXIYL8hP5ZXnEdkeNEk6vUgXTbLonC4zMjHFY/5Wm511ekdTsOCLKVp2rlIKOA2jTuBot//cr7BhobEwsbAloY8kDGyqoQ5H/oHsdwQ21cCmaspCz0L2jcYOgLHhNGw4TT1yVmBpuS9PZHWY35siqnxvimEvpE9FY4peQhfbhO0FDnuFqWAEAAA=end";for (int j = 0; j < 5; j++) {try{String _str = "";for (int i = 0; i < 1000; i++) {_str += b64Data;}_str = "0x420x450x470x490x4E"  + _str + "0x450x4E0x44";System.out.println(new Date().getTime());String str = pako.getPakoDataBySocket(_str);Thread thread = Thread.currentThread();thread.sleep(1);//暂停1毫秒后程序继续执行1}catch (InterruptedException e) {// TODO Auto-generated catch blocke.printStackTrace();}}System.out.println(new Date().getTime());}}

web客户端测试代码

<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>django-websocket</title><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="./node_modules/pako/dist/pako.min.js"></script><script type="text/javascript">//<![CDATA[$(function () {function cnn() {if (window.s) {window.s.close()}/*创建socket连接*/var socket = new WebSocket("ws://127.0.0.1:8001");socket.onopen = function () {console.log('WebSocket open');//成功连接上Websocket};socket.onmessage = function (e) {const str =  pako.inflate(e.data, { to: 'string' });console.log(new Date().getTime())console.log(str.length);//打印出服务端返回过来的数据$('#messagecontainer').prepend('<p>' + str + '</p>');};// Call onopen directly if socket is already openif (socket.readyState == WebSocket.OPEN) socket.onopen();window.s = socket;}cnn();$('#connect_websocket').click(function () {cnn();});$('#send_message').click(function () {//如果未连接到websocketif (!window.s) {alert("websocket未连接.");} else {window.s.send($('#message').val());//通过websocket发送数据}});$('#close_websocket').click(function () {if (window.s) {window.s.close();//关闭websocketconsole.log('websocket已关闭');}});});//]]></script>
</head>
<body>
<br>
<input type="text" id="message" value="user1"/>
<button type="button" id="connect_websocket">连接 websocket</button>
<button type="button" id="send_message">发送 message</button>
<button type="button" id="close_websocket">关闭 websocket</button>
<h1>Received Messages</h1>
<div id="messagecontainer">
</div>
</body>
</html>

4、耗时（24万字符长度，包含解压缩大概100毫秒）目前未找到socket一次传输大批量数据的方法

发送事件：0 发送时间：1571033967852
发送事件：1 发送时间：1571033967939
发送事件：2 发送时间：1571033967989
发送事件：3 发送时间：1571033968013
发送事件：4 发送时间：1571033968053