1703877430
1703877431
现在监听来自于合约的事件，并向所有客户端广播。相关代码如下：
1703877432
1703877433
1703877434
1703877435
1703877436
这里需要检查一下状态是否为true，如果为true，才能向所有连接的socket.io客户端广播事件。
1703877437
1703877438
1703877439
1703877440
1703877441
区块链项目开发指南 [:1703875339]
1703877442
区块链项目开发指南 4.2.3 创建前端
1703877443
1703877444
让我们从应用的HTML开始创建前端。把下面的代码放入index.html文件：
1703877445
1703877446
1703877447
1703877448
1703877449
1703877450
1703877451
1703877452
上述代码的执行过程如下：
1703877453
1703877454
1）显示Bootstrap的文件输入框，这样用户可以选择一个文件。
1703877455
1703877456
2）显示一个文本框，用户可以输入所有者的细节。
1703877457
1703877458
3）得到两个按钮。一个用于存储文件哈希和合约中的所有者细节，另一个用于从合约中获取文件信息。单击Submit按钮触发submit（）方法，单击Get Info按钮触发getInfo（）方法。
1703877459
1703877460
4）得到一个显示信息的报警框。
1703877461
1703877462
5）显示一个有序列表，以显示用户在该页面上时被挖出的合约交易。
1703877463
1703877464
接下来为getInfo（）和submit（）方法编写实现，与服务端建立socket.io连接，并从服务端监听socket.io信息。
1703877465
1703877466
相关代码如下。把该代码放入main.js文件：
1703877467
1703877468
1703877469
1703877470
1703877471
1703877472
1703877473
1703877474
上述代码的执行过程如下：
1703877475
1703877476
1）定义submit（）方法。在submit方法中，确保选择一个文件，且文本框不为空，然后读取文件内容作为数组缓存，并传送数组缓存给sha1.js显示的sha1（）方法，以获取数组缓存中的内容哈希。得到哈希之后，使用jQuery发出一个AJAX请求给“/submit”路径，然后在报警框中显示交易哈希。
1703877477
1703877478
2）定义getInfo（）方法。该方法首先确定选中一个文件，然后就像之前一样生成哈希，并发出请求到“/getInfo”端点，以得到关于那个文件的信息。
1703877479