概述

BFF的产生

BFF的产生与两个因素紧密相关：一是后台微服务化和领域化；二是前端应用的跨多端成为潮流。前者使得后台向领域内聚方向发展，后者使得同一个应用在不同端呈现出不可避免的差异。两个方向的发展，就导致了在后台服务与前台应用之间，出现了明显的Gap。

假设后台接口彻底领域化，那么前端应用中的一些逻辑，就需要在前端代码中获取和组装多个后台接口，然后进行编排；这对于前端应用来说就太重了，且这些逻辑很难维护。

假设将这些面向UI组装数据的逻辑放到了后台，那么又阻碍了后台的领域化。

所以就产生了BFF层，来填补的后台与多变前台之间的Gap。

BFF的功能定位

从以上可以看出，BFF层应该具备的核心功能是:

接口聚合和编排

除了这个核心功能之外，BFF层通常也会提供:

鉴权（通常是访问第三方服务进行）
参数校验与剪裁

在不同的企业应用架构中，BFF层承担的功能可能会略有差异，比如鉴权可能在网关层承载掉。但大体不会超出以上的功能范围。

接口聚合和编排

当请求走到BFF层，流量此时已经走到了企业的服务后台。它要进行聚合和编排的接口，这时往往以RPC的形式提供。那么在BFF层首先要完成的就是RPC接口的调用。

RPC是内部服务调用的通用协议，具体实现会有多种，比如 dubbo、gRPC。

不失一般性，我们首先定义一个RPC协议的实现，然后用代码实现它。

实现RPC协议，需要实现：

通信协议。我们这里使用tcp
数据协议。需要设计消息体格式，关键点是如何判断消息长度、编解码

消息体格式

我们将消息体拟定为以下格式:

长度+'/n'+payload

其中长度是 payload 的字节长度。我们采用最简单的序列化/反序列化作为编解码方案，采用 { data: {}, error: {}}的格式来表示解码消息，则编解码函数为:

export function encode(payload) {
  return JSON.stringify(payload)
}
export function decode(payload) {
  try {
  	return JSON.parse(payload)
  } catch(err) {
    log.error('decode error: ', err)
    return { error: err }
  }
}

rpc通信时的buffer生成方法:

export function buildDataBuffer(payload) {
  const encoded = encode(payload)
  // 消息的字节长度 +'/n'+payload
  return Buffer.byteLength(encoded) + '\n' + encoded;
}

确定消息体格式后，我们有了长度判断和编解码规则，就可以确定从接收到的buffer数据中解析出payload的逻辑：

/**
 * 将 buffer data 转为携带 payload 的信息
 * @param {*} data 通过 rpc 传达的数据
 * @param {*} lengthObj 用来储存 buffer data, 结构如下
    {
      bufferBytes: undefined, // 即已经收到的 buffer data
      getLength: true, // 标识是否需要解析出字节长度字段
      length: -1 // 解析出来的 字节长度 , 据此以对 buffer data 截断进行解析
    }
    当消息体过大时，会多次触发 on('data') ，所以需要用它作为容器存储 buffer data，等其长度 >= payload.length 后再解析
    在 connection.on('data') 之外初始化此容器，以确保多次触发的 data 事件能通过它实现存储
 */
export function parseRpcResponse(data, lengthObj) {
  // 取出 buffer 消息
  if (lengthObj.bufferBytes && lengthObj.bufferBytes.length > 0) {
    // 如果长度大于0，则已经接收过数据，将新的 data 拼接在其后
    const tmpBuff = Buffer.alloc(lengthObj.bufferBytes.length + data.length);

    lengthObj.bufferBytes.copy(tmpBuff, 0);
    data.copy(tmpBuff, lengthObj.bufferBytes.length);

    lengthObj.bufferBytes = tmpBuff;
  } else {
    lengthObj.bufferBytes = data;
  }

  var [fnDatas, finished] = parseBufferDatas.call(lengthObj);
  return [fnDatas, finished]
}
export function parseBufferDatas() {
  var datas = [];
  // 标识消息体是否解析完
  let finished = false;
  var i = -1;

  // 对根据 length + '/n' + payload 中的 length 截取的 payload 进行 parse
  var parseBufferData = function () {
    if (this.getLength === true) {
      // 寻找 \n 前的长度标识
      i = getNewlineIndex(this.bufferBytes);
      if (i > -1) {
        this.length = Number(this.bufferBytes.slice(0, i).toString());
        this.getLength = false;
        this.bufferBytes = clearBuffer(this.bufferBytes, i + 1);
      }
    }

    // 等数据长度达到 length 时，再开始解析
    if (this.bufferBytes && this.bufferBytes.length >= this.length) {
      const dataStr = this.bufferBytes.slice(0, this.length).toString();
      // 处理完第一个data后，需要查看是否还有未解析完的数据继续解析
      this.getLength = true;

      let parsedData
      try {
        parsedData = decode(dataStr)
      }
      catch (e) {
        log.e('ERROR PARSE: ', e, dataStr);
        return;
      }

      datas.push(parsedData);
      // 将剩余部分放入缓存对象
      this.bufferBytes = clearBuffer(this.bufferBytes, this.length);

      // 继续处理下面的指令
      if (this.bufferBytes && this.bufferBytes.length > 0) {
        parseBufferData.call(this);
      } else {
        // 解析完了数据，设置为 true
        finished = true
      }
    }
  };

  parseBufferData.call(this);
  return [datas, finished];
}

在 rpc 通信中，客户端要描述调用的方法及参数，设计其数据格式如下：

function buildClientRequestPayload(fnName, args) {
  var id = idGenerator();
  const payload = { id: id, fn: fnName, args }
  return buildDataBuffer(payload)
}

rpc 通信的服务端收到消息后，调用对应方法，然后将结果以如下形式返回:

/**
 * @param {*} oPayload 格式如下
 * {
 *   reqData: { id: 'x', fn: 'fnname', args: [] } 请求
 *   data?: 方法执行结果
 *   msg?: 错误描述
 *   error?: 错误信息
 * }
 */
function buildResponse(oPayload) {
  const responsePayload = { id: oPayload.reqData.id, ...oPayload }
  delete responsePayload.reqData
  return buildDataBuffer(responsePayload)
}

RPC Server

Rpc server 主要包含以下部分：

接受client传递的消息
解析消息，调用对应的方法
返回结果

当启动一个rpc server时，需要描述当前server上的方法，我们设计如下的rpc server实例描述:

import RPCServer from '../rpc/server.js';

const port = 5665;

const rpc = new RPCServer({
  combine: function (a, b) {
    return a + b
  },
  longString: function () {
    // 构造一个 2m 的string
    let s = '1'
    const n2m = (2 << 20)
    for (let i = 0; i < n2m; i++) {
      s += '1'
    }
    s += 'over.'
    return s
  }
});

rpc.listen(port);

其中 combine 、longString 就是该服务提供的方法。基于以上接口，我们设计 RPCServer 如下：

class RPCServer {
  constructor(services, logger) {
    this.services = services;
    this.listen = (port) => {
      this.getServer();
      this.server.listen(port, () => {
        console.log(`server running on port ${port}`)
      });
    }
    this.getServer = () => {
      const self = this;
      const server = net.createServer(function (c) {
        // 用来存储要进行解析的数据
        const lengthObj = {
          bufferBytes: undefined,
          getLength: true,
          length: -1
        };

        c.on('data', getOnDataFn(c, lengthObj, self));
      });

      this.server = server;
    }
    this.close = () => {
      this.server.close();
    }
  }
}

function getOnDataFn(connection, lengthObj, rpcInstance) {
  return function (data) {
    const [fnDatas, finished] = parseRpcResponse(data, lengthObj)
    if (finished) {
      fnDatas.forEach(fData => fnExecution(fData, connection, rpcInstance));
    }
  };
}

function fnExecution(reqData, c, rpcInstance) {
  if (!rpcInstance.services[reqData.fn]) {
    c.write(buildResponse({ reqData, msg: '未找到对应的方法', error: { code: 'UNKNOWN_COMMAND' } }))
    return
  }

  const args = reqData.args;
  try {
    const fn = rpcInstance.services[reqData.fn]
    const argList = Array.isArray(args) ? args : [args]
    const data = fn.apply({}, argList)
    c.write(buildResponse({ reqData, data }))
  }
  catch (error) {
    c.write(buildResponse({ reqData, error, msg: '执行方法错误' }));
  }
};

parseRpcResponse 即前述数据解析方法。

BFF 层中的请求管理

我们用 express 启动一个服务作为bff层

import express from 'express';
import bodyParser from 'body-parser';
import RpcClient from '../client.js';

const rpcClient = new RpcClient()
const app = express()
app.use(bodyParser.json());

app.post('/', async (req, res) => {
  const { fn, args } = req.body
  const response = await rpcClient.proxy({
    host: 'localhost',
    port: 5665,
    fn,
    args,
  })
  if (response.data) {
    res.send(response.data)
    return
  }
  res.send(response)
})

app.listen(3000, () => {
  console.info('listening on port 3000.')
})

RpcClient即我们需要的作为客户端的类，对于远端的调用使用其 proxy 方法进行。

RPC Client

我们来实现BFF 中使用的 client，在消息体格式中已经确定它需要提供 proxy 方法，用来发起请求和处理响应。其中要做的事情主要是:

请求与 server 的连接

const connection = net.createConnection(port, host);

发送方法描述信息

connection.on('connect', function () {
  // 连接上后发送消息, buildClientRequestPayload见前
  connection.write(buildClientRequestPayload(fn, args));
})

解析响应返回数据

RpcClient.prototype.proxy = function proxy({
  host,
  port,
  fn,
  args,
} = {}) {
  return new Promise((resolve, reject) => {
    // 建立连接
    const connection = net.createConnection(port, host);

    let success = false
    // 远端数据的容器，与 server 端类似的逻辑
    const lengthObj = {
      bufferBytes: undefined,
      getLength: true,
      length: -1
    }
    // connection.on('connect', () => {})...
    // 解析远端响应
    connection.on('data', function (data) {
      try {
        // 数据超出 socket 的一次消息长度后，将会分多次收到，这里会在一次通信中反复触发；所以用 finished 来标识此次通信是否结束，只有在结束后才返回
        // finished的判断标准是所有消息的长度，大于消息头部传来的长度字段值
        const [result, finished] = parseRpcResponse(data, lengthObj)
        if (finished) {
          success = true
          connection.end()
          resolve(getDataFromRpcResponse(result))
        }
      } catch (err) {
        resolve({ error: err, msg: 'parse data error.' })
      }
    })
    // ...省略如error等其他事件
  })
}

这样，我们就完成了 bff 层与 rpc 服务进行通信的功能。详细代码可以参见github repo

实现了与微服务的rpc通信之后，再进行接口聚合和编排就比较简单了，这里不再赘述。

概述