介绍
sugo-client 是一款前端的跨进程调用（RPC）工具，可以在多个页面或者iframe之间进行数据和函数的传输，非常适用于不同前端应用之间的通讯，也可以用于同一个应用中不同的iframe之间进行交互。本文主要介绍 sugo-client 的使用方法和注意事项。
安装
可以使用 npm 直接安装 sugo-client：
npm install sugo-client --save
使用
sugo-client 分为两部分，在服务端实现RPC的API，在客户端调用这些API。
在服务端实现RPC API
在服务端（一般是web页面）需要安装 sugo-server 来监听客户端发送的请求。
npm install sugo-server --save
服务端需要以下几个步骤：
- 引入 sugo-server 并创建 server 实例
var Sugos = require('sugos')
var sugoServer = new Sugos.Server()- 实现 RPC handler
-- -------------------- ---- -------
--- ------- - -
----------- -------- -- -
------ ------ -------
-
-
--------------------------- -- ------ -- -- -
--------------------- --------
--上面的代码中，getMessage 是一个RPC handler，在客户端调用 server.call('getMessage') 时，就会触发这个 handler。
- 启动 server
sugoServer.listen(3000)
在客户端调用RPC API
客户端需要引入 sugo-client，并调用 server.call 来调用服务端的RPC handler。
var SugosClient = require('sugo-client')
var sugoClient = new SugosClient('http://localhost:3000')
sugoClient.connect().then(function (handler) {
handler.getMessage().then(function (message) {
console.log(message) // 'Hello World!'
})
})上面的代码中：
- 创建 sugoClient 实例，并连接到服务端
- 连接成功后，取得服务端的 handler 实例，就可以使用 getMessage 方法调用服务端的 RPC handler 了。
注意事项
使用 sugo-client 时，需要注意以下的问题：
- sugo-server 和 sugo-client 的版本需要一致。
- handler 的方法需要返回 Promise，异步才能正常工作。
- 如果出现了意料之外的错误，sugo-client 可能会断开与服务端的连接，需要及时处理这种情况。
示例代码
下面是一个完整的例子，展示了如何在不同的 web 应用之间调用 serve1r 的 RPC handler：
在服务端建立一个名为 server1 的页面，运行 server.js 文件：
-- -------------------- ---- -------
-- ---------
--- ----- - ----------------
--- ---------- - --- --------------
--- ------- - -
----------- -------- -- -
------ ------ -------
-
-
--------------------------- -- ------ -- -- -
--------------------- --------
--
-----------------------在客户端建立两个页面一个为 client1.html，一个为 client2.html，运行 client.js 文件：
-- -------------------- ---- ------- ---- ------------ --- --------- ----- ------ ------ ---------------------- ------- ------ ----------- ----- ------------------------ ------- -------------------------- ---------------- ------- --------------------------- ------- ------- ---- ------------ --- --------- ----- ------ ------ ---------------------- ------- ------ ----------- ----- ------------------------ ------- -------------------------- ---------------- ------- --------------------------- ------- -------
-- -------------------- ---- -------
-- ---------
--- ----------- - ----------------------
--- ---------- - --- ------------------------------------
---------------------------------- --------- -
----- --- - --- --------------------------
----- ---------- - ----------------------------------------
---------------------------------- --------- -
---------------------------------------------- - --------
---
------------------------------------------------- --------- -
---------------------------------------------- - --------
--
--
-------- ------------ -
--- ---------- - --- ------------------------------------
---------------------------------- --------- -
----- --- - --- --------------------------
----- ---------- - ----------------------------------------
---------------------------------- --------- -
---------------------------------------------- - --------
---
------------------------------------------------- --------- -
---------------------------------------------- - --------
--
--
-在 client1.html 中点击 'get message' 按钮，可以触发 handler.getMessage 方法，client1 和 client2 都会收到服务端的消息。```js handler.onChangeMessage(clientType).then(function (message) { document.querySelector('#message').textContent = message; })
在 client1.html 中点击 'get message' 按钮后，client2.html 中的消息也会改变。 > 来源：[JavaScript中文网](https://www.javascriptcn.com/post/600559e081e8991b448d765b) ，转载请注明来源 [https://www.javascriptcn.com/post/600559e081e8991b448d765b](https://www.javascriptcn.com/post/600559e081e8991b448d765b)