去中心化聊天软件_在15分钟内建立去中心化网络聊天-CSDN博客

本文提供了一个15分钟的教程，教你如何构建一个简单的去中心化聊天应用程序，该程序完全在Web浏览器中运行。教程使用Bugout JavaScript库处理对等网络和加密，仅需一个文本编辑器、Web浏览器和基本的HTML文件操作知识即可。文章涵盖了从HTML样板开始、导入Bugout库、创建Bugout对象、连接实例、接收和发送消息以及获取用户输入的步骤。

摘要由CSDN通过智能技术生成

去中心化聊天软件

In this 15 minute tutorial we're going to build a simple decentralized chat application which runs entirely in a web browser.

在这个15分钟的教程中，我们将构建一个简单的分散式聊天应用程序，该应用程序完全在Web浏览器中运行。

All you will need is a text editor, a web browser, and a basic knowledge of how to save HTML files and open them in the browser.

您只需要一个文本编辑器 ，一个Web浏览器 ，以及有关如何保存HTML文件并在浏览器中打开它们的基本知识 。

Diagram of how WebRTC works browser to browser

We're going to use Bugout, a JavaScript library that takes care of the peer-to-peer networking and cryptography.

我们将使用Bugout ，这是一个JavaScript库，负责处理对等网络和加密。

If you just want the files, download index.html in this repo.
如果只需要这些文件，请在此仓库中下载index.html 。

Ok, let's get started!

好的，让我们开始吧！

从HTML样板开始 (Start with the HTML boilerplate)

To keep this tutorial simple we're going to do everything in one .html file using pure Javascript. We're not going to use any build tools, minifiers, language transpilers, etc. You'll probably need those things when you build something more complicated but for the purposes of this tutorial we'll stick with good old fashioned HTML and JavaScript.

为了简化本教程，我们将使用纯Javascript在一个.html文件中进行所有操作。我们将不使用任何构建工具，缩小器，语言编译器等。在构建更复杂的东西时，您可能会需要这些东西，但出于本教程的目的，我们将使用老式HTML和JavaScript。

The first thing we need is a basic boilerplate web page into which we can start building our application. We also need a simple function to output text on the screen. Here's the HTML you can use to get started:

我们需要的第一件事是一个基本的样板网页，我们可以在其中开始构建应用程序。我们还需要一个简单的功能来在屏幕上输出文本。这是您可以用来入门HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <title>Bugout chat tutorial</title>
  <style>
    body { background-color: #333; font-size: 1.5em; padding: 0em 0.25em; }
    pre { color: #fff; white-space: pre-wrap; word-wrap: break-word; text-shadow: 0 0 10px #ccc; }
  </style>
  <script>
    function log(message) {
      document.getElementById("log").textContent += message + "\n";
    }
  </script>
</head>
<body>
  <pre id="log"></pre>
</body>
<script>
  log("Hello world!");

  /***** Your code goes here! *****/

</script>
</html>

Go ahead and save the snippet above into a file called index.html and then open that file in your web browser.

继续，并将上面的代码段保存到名为index.html文件中，然后在Web浏览器中打开该文件。

You should see the words "Hello world!" in white text at the top of the screen.

您应该看到“ Hello world！”字样。在屏幕顶部以白色文字显示。