BinaryJS 入门指南：构建实时二进制数据传输应用-CSDN博客

BinaryJS 入门指南：构建实时二进制数据传输应用

什么是 BinaryJS

BinaryJS 是一个基于 WebSocket 的实时二进制数据传输框架，它允许开发者在浏览器和服务器之间高效地传输二进制数据流。与传统的 WebSocket 不同，BinaryJS 专门优化了二进制数据的传输，支持流式处理和分块传输，非常适合处理大文件、音视频流等场景。

环境准备

安装 BinaryJS

在开始之前，我们需要安装 BinaryJS 的服务器端组件。使用 npm 可以轻松完成安装：

npm install binaryjs

引入客户端库

在网页中引入 BinaryJS 客户端库非常简单，只需添加以下 script 标签：

<script src="http://cdn.binaryjs.com/0/binary.js"></script>

构建服务器端

1. 基础服务器搭建

首先创建一个基本的 BinaryJS 服务器，监听在 9000 端口：

const BinaryServer = require('binaryjs').BinaryServer;
const fs = require('fs');

// 创建 BinaryServer 实例
const server = new BinaryServer({ port: 9000 });

// 处理客户端连接
server.on('connection', (client) => {
  console.log('新客户端连接');
  
  // 读取并发送图片文件
  const fileStream = fs.createReadStream(__dirname + '/flower.png');
  client.send(fileStream);
});

这段代码创建了一个简单的服务器，每当有客户端连接时，就会读取本地的 flower.png 文件并通过 BinaryJS 发送给客户端。

2. 流式传输详解

BinaryJS 的核心优势在于其流式处理能力。上面的例子使用了 client.send() 快捷方法，实际上它等价于：

const stream = client.createStream();
fileStream.pipe(stream);

这种流式处理方式特别适合大文件传输，因为它不会一次性占用大量内存，而是分块传输数据。

构建客户端

1. 基础客户端实现

客户端需要连接到服务器并接收数据流：

const client = new BinaryClient('ws://localhost:9000');

client.on('stream', (stream, meta) => {
  const parts = [];
  
  // 收集数据块
  stream.on('data', (data) => {
    parts.push(data);
  });
  
  // 数据接收完成
  stream.on('end', () => {
    // 创建 Blob 对象并显示图片
    const img = document.createElement('img');
    img.src = URL.createObjectURL(new Blob(parts));
    document.body.appendChild(img);
  });
});

2. 客户端处理流程解析

创建 BinaryClient 实例连接到服务器
监听 'stream' 事件，当服务器发送数据流时触发
在数据流(data)事件中收集二进制数据块
在流结束(end)事件中将所有数据块合并并显示

高级集成方案

1. 与现有 HTTP 服务器集成

BinaryJS 可以与现有的 HTTP 服务器共享端口：

const http = require('http');
const BinaryServer = require('binaryjs').BinaryServer;

// 创建普通 HTTP 服务器
const httpServer = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(9000);

// 创建 BinaryServer 并附加到 HTTP 服务器
const binaryServer = new BinaryServer({
  server: httpServer,
  path: '/binary-endpoint'
});

2. 与 Express 集成

对于 Express 应用，集成方式略有不同：

const http = require('http');
const express = require('express');
const app = express();

// 创建 HTTP 服务器并使用 Express 作为请求处理器
const server = http.createServer(app).listen(9000);

// 附加 BinaryServer
const binaryServer = new BinaryServer({
  server: server,
  path: '/binary-endpoint'
});