birpc 讲解 -- 前后端接口函数式调用

为撒尼123
196 阅读3分钟

⭐ 简介

其主要功能是：双端调用。客户端可以直接以函数调用的方式调用服务端的方法，服务端同理。

这个看上去没什么厉害的，但是细想一下最常见的场景是：客户端发请求到服务端 -> 等待服务端响应 -> 获取结果数据。在某种程度上可以看作是客户端在调用服务端的方法，并获得其返回结果。

但是很少见到服务端去调用客户端的方法，并获得其返回结果吧。使用websocket确实可以实现，但是如果要自己实现的话，就需要实现：

  • 服务端发调用信息给客户端：serverWebsocket.send
  • 设置客户端的message的监听
  • 客户端执行完函数后把结果再发给服务端的流程：clientWebsocket.send
  • 设置服务端的message的监听

是有点麻烦的哈，而birpc就是让这一过程更简便了。这方法突出一个简单，快捷，高效，敏捷开发呀！

  1. 服务端不用写路由，路由处理函数，路由返回结果啊啥的
  2. 客户端也不用写请求相关的参数啥的，如果客户端使用浏览器的话，由于webSocket兼容性很好，甚至不用安装axios，直接new windows.webSocket

但是他的文档就太垃圾了 github.com/antfu/birpc…，讲解一下它的demo吧

如果使用websocket作为双端通信的技术

client

import type { ServerFunctions } from './types'

const ws = new WebSocket('ws://url')

const clientFunctions: ClientFunctions = {
  hey(name: string) {
    return `Hey ${name} from client`
  }
}

const rpc = createBirpc<ServerFunctions>(
  clientFunctions,
  {
    post: data => ws.send(data),
    on: data => ws.on('message', data),
    // these are required when using WebSocket
    serialize: v => JSON.stringify(v),
    deserialize: v => JSON.parse(v),
  },
)

await rpc.hi('Client') // Hi Client from server

server

import type { ClientFunctions } from './types'
import { WebSocketServer } from 'ws'

const serverFunctions: ServerFunctions = {
  hi(name: string) {
    return `Hi ${name} from server`
  }
}

const wss = new WebSocketServer()

wss.on('connection', (ws) => {
  const rpc = createBirpc<ClientFunctions>(
    serverFunctions,
    {
      post: data => ws.send(data),
      on: fn => ws.on('message', fn),
      serialize: v => JSON.stringify(v),
      deserialize: v => JSON.parse(v),
    },
  )

  await rpc.hey('Server') // Hey Server from client
})

客户端调用了服务端的hi方法，并且拿到了结果。服务端亦然。这就表现出了它的双端调用

📢 参数讲解

createBirpc的第一个参数就是指定暴露出去的可以给对方调用的方法

第二个参数中，post方法是birpc发消息的方法。

on方法的参数fn是birpc内实现的onMessage方法，是用来接收数据的。在一次调用中，数据要有发送有接收（结果），发送用的是post方法，接收用的就是onMessage方法。on: fn => ws.on('message', fn)就是说将birpc的onMessage方法绑定为websocket的message事件的回调中，这样就可以当websocket接收到数据后触发message事件，就能够调用onMessage方法让birpc接收到数据。

注意：post方法是每次发送数据时都会调用，但是on方法只会在createBirpc执行时调用一次实现绑定。

所以我感觉这样设置参数真的很扯淡，文档又不全，还把执行机制不一样的参数放一块，这不是摆明了让人不好理解嘛

serialize和deserialize就不用讲了，猜都能猜到是干啥的。不设置默认是保留原始数据格式

还有一个参数是eventNames，指定在调用对方的哪些函数时，不需要它的返回结果，可能是为了省一次接收返回数据的通信吧。举例说服务端设置eventNames: ['onUpdateProjectInfo', 'onUpdateLangData'],那么在调用客户端的这俩方法时就没有返回结果了

avatar
文章
阅读
粉丝