在前一章中，我们为所有权合约编写了Solidity代码；在前一章和本章中，我们学习了web3.js的有关知识和使用web3.js调用合约的方法。现在是时候为智能合约创建客户端了，这样方便用户使用。

创建一个客户端，用户从中选择一个文件，输入所有者细节，然后按下Submit按钮广播交易，用文件哈希和所有者的细 节调用合约的set方法。一旦交易被成功广播，将显示交易哈希。用户还能够选择一个文件，并从智能合约中得到所有者的细节。客户端还将实时显示最新挖出的 set交易。

我们将在前端使用sha1.js获取文件哈希，使用jQuery进行DOM操纵，并使用Bootstrap 4创建一个反应层（responsive layout）。在后端使用express.js和web3.js。我们将使用socket.io，这样不需要前端间隔相等的时间请求数据，后端就把最近 挖出的交易推到前端。

web3.js可以在前端使用，但对于应用是个安全漏洞。也就是说，我们在使用存储在geth中的账户，并把geth节点URL显示给前端，这将使存储在那些账户中的以太币面临风险。

4.2.1　项目结构

在本章的练习文件中，将发现两个目录：Final和Initial。Final包含项目的最终源代码，而Initial包含可以用于迅速创建应用的空的源代码文件和库。

为了测试Final目录，需要在其中运行npm install，并把app.js中硬编码的合约地址替换为在部署合约之后得到的合约地址。然后，使用Final目录中的node app.js命令运行该应用。

在Initial目录中，将发现一个public目录和两个文件（app.js和package.json）。package.json包含应用的后端相关内容，app.js包含应用的后端源代码。

public目录包含与前端相关的文件。在public/css中会发现bootstrap.min.css，它是 Bootstrap库；在public/html中会发现index.html，所应用的HTML代码放在这里；在public/js目录中将发现 jQuery、sha1和socket.io的JS文件。在public/js中还会发现一个main.js文件，应用的前端JS代码放在这里。

4.2.2　创建后端

先创建App后端。首先，在initial目录中运行npm install，为后端安装所需相关内容。其次，在进行后端编码之前，确保geth运行时启用rpc。如果是在私有网络上运行geth，要确保启用 mining。最后，确保账户0存在并被解锁。可以在私有网络上运行geth，这时需要启用rpc和mining，并解锁账户0：

编码开始前最后需要做的一件事是，使用在前一章中见到的代码部署所有权合约，并复制合约地址。现在创建一个单独的服务端，它将为浏览器提供HTML，并接收socket.io连接：

这里把运行在端口8080上的两个服务端express和socket.io合并成一个服务端。现在创建路径以用于静态文件和App主页。相关代码如下：

这里使用了express.static中间件，用于在公共目录中发现静态文件。

现在连接到geth节点，并获取已部署合约的引用，这样可以发送交易并监听事件。相关代码如下：

上述代码就是用得到的合约地址替换原有的合约地址。

现在创建广播交易和获取文件信息的路径。相关代码如下：

其中，“/submit”路径用于创建和广播交易。获取交易哈希之后，把它发送给客户端。然后等待挖出交易。“/getInfo”路径用于调用节点自身的合约get方法，而非创建交易。它仅仅发送回所得到的回应。

现在监听来自于合约的事件，并向所有客户端广播。相关代码如下：

这里需要检查一下状态是否为true，如果为true，才能向所有连接的socket.io客户端广播事件。

4.2.3　创建前端

让我们从应用的HTML开始创建前端。把下面的代码放入index.html文件：

执行过程如下：

1）显示Bootstrap的文件输入框，这样用户可以选择一个文件。

2）显示一个文本框，用户可以输入所有者的细节。

3）得到两个按钮。一个用于存储文件哈希和合约中的所有者细节，另一个用于从合约中获取文件信息。单击Submit按钮触发submit（）方法，单击Get Info按钮触发getInfo（）方法。

4）得到一个显示信息的报警框。

5）显示一个有序列表，以显示用户在该页面上时被挖出的合约交易。

接下来为getInfo（）和submit（）方法编写实现，与服务端建立socket.io连接，并从服务端监听socket.io信息。

执行过程如下：

1）定义submit（）方法。在submit方法中，确保选择一个文件，且文本框不为空，然后读取文件内容作为数组 缓存，并传送数组缓存给sha1.js显示的sha1（）方法，以获取数组缓存中的内容哈希。得到哈希之后，使用jQuery发出一个AJAX请求给 “/submit”路径，然后在报警框中显示交易哈希。

2）定义getInfo（）方法。该方法首先确定选中一个文件，然后就像之前一样生成哈希，并发出请求到“/getInfo”端点，以得到关于那个文件的信息。

3）使用socket.io库显示的io（）方法建立socket.io连接，然后等待事件连接到触发器——这表示连接已经建立。在连接建立之后，监听来自服务端的信息，并向用户显示交易细节。

之所以不在以太坊区块链中存储文件，是因为存储文件很昂贵——它需要大量gas。对于本节的示例子，其实不需要存储文件，因为网络中的节点将可以看见文 件。因此，如果用户希望文件内容是秘密的，其实是做不到的。这里的应用是想证明一个文件的所有权，而不是像云服务那样存储和服务文件。

4.2.4　测试客户端

运行app.js节点，以运行应用服务端。打开浏览器，访问http://localhost：8080/ ，可以看到图4-1所示的界面。

图　4-1

现在选择一个文件，输入所有者姓名，单击Submit按钮，界面将变为图4-2所示的样子。

图　4-2

在这里可以看到显示交易哈希。现在等待，直到交易被挖出。一旦挖出，就可以在当前交易列表中看到交易，如图4-3所示。

图　4-3

现在再次选择同一个文件，单击Get Info按钮，界面如图4-4所示。

来源：我是码农，转载请保留出处和链接！

本文链接：http://www.54manong.com/?id=564

• 从“组织人”到“区块链人”2018-09-05 22:51
• 第四章 链接万物的区块链2018-09-14 22:53
• 作为云的区块链2018-09-14 13:18
• 7.3　创建投注合约2018-09-15 10:56