去中心化聊天软件_在15分钟内建立去中心化网络聊天-蒲公英云

去中心化聊天软件

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！”字样。在屏幕顶部以白色文字显示。

Screenshot of hello world

Great, we are up and running with a basic web page and a log() function which will print text on the screen.

太好了，我们启动并运行了一个基本的网页和一个log()函数，该函数将在屏幕上打印文本。

导入Bugout (Import Bugout)

Now let’s get the Bugout library imported so we can use it to connect peoples’ browsers together in a peer-to-peer style. We’ll load the library directly from its GitHub page.

现在，让我们导入Bugout库，以便我们可以使用它以点对点的方式将人们的浏览器连接在一起。我们将直接从其GitHub页面加载该库。

Add this <script> tag into the <head> section of the HTML just before the closing </head> tag:

将此<script>标记添加到HTML的<head>部分中，紧接在</head>标记之前：

<script src="https://chr15m.github.io/bugout/bugout.min.js" type="application/javascript"></script>

Save your index.html file again and hit refresh in the browser. If you know how to use the developer console you can check the network tab to verify the bugout.min.js file getting loaded in. If you don’t, don’t worry just skip this step and move on.

再次保存您的index.html文件，然后在浏览器中单击“刷新”。如果您知道如何使用开发人员控制台，则可以检查“网络”选项卡以验证是否已加载bugout.min.js文件。如果不这样做，请不要担心，只需跳过此步骤并继续。

Screenshot of library loading

制作Bugout对象 (Make a Bugout object)

Let’s make a Bugout object that we can use to talk to other browsers. Add the following code at the end of the file in the script tag after it says “Your code goes here!”:

让我们创建一个Bugout对象，我们可以使用它与其他浏览器进行对话。提示“您的代码在这里！”之后，在脚本标记的文件末尾添加以下代码：

var b = Bugout();
log(b.address() + " [ me ]");

Now when you hit reload you should see “Hello world!” like before and on the next line you should see the address of this Bugout instance. It will look something like this: bKpdPiLJjPmwrYWoZYXVWbJFcEMUpfh6BN [ me ].

现在，当您点击重新加载时，您应该会看到“ Hello world！” 像之前和下一行一样，您应该看到此Bugout实例的地址。它看起来像这样： bKpdPiLJjPmwrYWoZYXVWbJFcEMUpfh6BN [ me ] 。

Screenshot of Bugout address

You might notice this address looks a bit like a Bitcoin address. That’s because Bugout uses a similar type of cryptographic technique to create its address from an internal cryptographic keypair. Cryptography is how Bugout nodes can be sure they are receiving information from the node they think they are receiving it from. On the network Bugout nodes can find and identify eachother using these addresses.

您可能会注意到此地址看起来有点像比特币地址。这是因为Bugout使用类似类型的加密技术从内部加密密钥对创建其地址。密码学是Bugout节点如何确保它们从他们认为从其接收消息的节点接收信息。在网络上，Bugout节点可以使用这些地址查找并标识彼此。

连接您的Bugout实例 (Connect your Bugout instance)

Now that we have a Bugout instance running in our web page, how do we connect it to other Bugout instances running in pages on other people’s computers?

现在，我们的网页中正在运行一个Bugout实例，我们如何将其连接到在其他人的计算机页面中运行的其他Bugout实例？

In real life when you want to meet up with somebody you share the address of the place to meet. Computers are the same. Any time you want to connect two computer programs together over a network you need some type of address. For example to get to this web page you followed a link to its URL, and your computer loaded this page from that address.

在现实生活中，当您想与某人见面时，您会分享见面地点的地址。电脑是一样的。每当您想通过网络将两个计算机程序连接在一起时，就需要某种类型的地址。例如，要访问此网页，您单击了指向其URL的链接，然后您的计算机从该地址加载了该页面。

Bugout instances connect to addresses called “identifiers” which you can think of as room names. The first argument passed to the Bugout() instance is the identifier or room name that you want it to connect to.

Bugout实例连接到称为“标识符”的地址，您可以将其视为房间名称。传递给Bugout()实例的第一个参数是您希望其连接到的标识符或房间名称。

If you don’t supply a room name argument the Bugout instance will connect to it’s own .address() by default. That means it will listen out for other Bugout instances connecting back to it. Other instances can connect by passing your Bugout instance’s .address() in as their first argument.

如果不提供房间名称参数，则默认情况下，Bugout实例将连接到它自己的.address .address() 。这意味着它将侦听其他Bugout实例连接回它。其他实例可以通过将Bugout实例的.address .address()作为第一个参数传递来进行连接。

For our chat room we want to connect all the Bugout instances together in one room. We do that by using the same room name as the first argument.

对于我们的聊天室，我们希望将所有Bugout实例连接到一个房间中。我们通过使用与第一个参数相同的房间名称来实现。

Update the code to pass an argument "bugout-chat-tutorial" as the room name. We’ll also install an event handler which will fire every time we see another Bugout instance connecting to the same room using b.on("seen").

更新代码以将参数"bugout-chat-tutorial"作为房间名称传递。我们还将安装一个事件处理程序，该事件处理程序将在每次看到另一个Bugout实例使用b.on("seen")连接到同一房间时b.on("seen") 。

Replace the line var b = Bugout(); with the following code. Leave the address logging line in there.

替换行var b = Bugout(); 使用以下代码。将地址记录行留在那里。

var b = Bugout("bugout-chat-tutorial");
b.on("seen", function(address) { log(address + " [ seen ]"); });

When you refresh the page now you may see other Bugout instances connecting - those are other people doing this same tutorial! You can open the index.html in another tab or browser and after a few seconds in both windows you should see the two Bugout instances discover eachother and output ...ADDRESS... [ seen ] with eachother’s address.

现在刷新页面时，您可能会看到其他Bugout实例正在连接-这些是其他人在做同样的教程！您可以在另一个选项卡或浏览器中打开index.html ，然后在两个窗口中都经过几秒钟后，您应该看到两个Bugout实例相互发现并输出...ADDRESS... [ seen ]与彼此的地址一起...ADDRESS... [ seen ] 。

Screenshot of seeing other instances

接收讯息 (Receiving messages)

Now that we have Bugout instances connecting we can send data between them. Let’s handle receiving messages first. When our Bugout instance receives a message we want to add it straight to the log so we can see what messages people are sending to the room.

现在我们已经连接了Bugout实例，我们可以在它们之间发送数据。让我们先处理接收消息。当我们的Bugout实例收到一条消息时，我们想将其直接添加到日志中，以便我们可以看到人们正在发送给会议室的消息。

Add this snippet of JavaScript below the Bugout instantiation code you added before:

在您之前添加的Bugout实例化代码下方添加以下JavaScript代码段：

b.on("message", function(address, message) {
  log(address + ": " + message);
});

This code will log every message our Bugout instance receives with the address of the sender.

此代码将记录我们的Bugout实例收到的每条消息以及发件人的地址。

If you refresh the page at this point you may start to see messages coming in from anybody else who has done this tutorial and is sending messages since you are in the same room called "bugout-chat-tutorial".

如果此时刷新页面，则可能会开始看到来自其他完成本教程并正在发送消息的其他人发送的消息，因为您位于同一间名为"bugout-chat-tutorial"房间中。

Screenshot of seeing messages

传送讯息 (Sending messages)

Sending a message is just as easy. We can use b.send("Hello world!"); to send a message to the room or b.send(address, "Hello you."); to send to a specific Bugout instance. If you use the second method the transmission will be encrypted with a key supplied by the receiving instance (if the other party is online).

发送消息同样容易。我们可以使用b.send("Hello world!"); 向房间发送消息或b.send(address, "Hello you."); 发送到特定的Bugout实例。如果您使用第二种方法，则将使用接收实例提供的密钥对传输进行加密(如果对方在线)。

But before we add the sending functionality we need a way for users to type in the messages they want to send, so let’s take a little user-interface detour.

但是，在添加发送功能之前，我们需要一种让用户键入要发送的消息的方法，因此让我们绕过一些用户界面。

获取用户输入 (Get user input)

We need some kind of input for users to type messages they want to send.

我们需要某种输入，以便用户键入要发送的消息。

First create an input they can type into. Add the following tag just below the <pre id="log"> tag:

首先创建一个可以输入的输入。在<pre id="log">标记下方添加以下标记：

<pre id="input" contenteditable="true"></pre>

Now add some styling to make it clear this is an input that the user can type into. Add this to the <style> section of the header:

现在添加一些样式以使其清晰可见，这是用户可以输入的输入。将其添加到标题的<style>部分：

#input { border-bottom: 1px solid #ccc; background-color: #383838; padding: 0.25em; outline: 0; }
    #input::before { content: "> "; }

Finally, we can hook this all up. We’ll add an event handler which will send the message the user has typed as soon as they hit the enter key. Add this to the JavaScript tag after the other code you have added so far:

最后，我们可以将所有内容联系起来。我们将添加一个事件处理程序，该事件处理程序将在用户按下Enter键后立即发送用户键入的消息。到目前为止添加的其他代码之后，请将其添加到JavaScript标记中：

document.getElementById("input").onkeydown = function(ev) {
    if (ev.keyCode == 13) {
      if (b.lastwirecount) {
        b.send(ev.target.textContent);
        ev.target.textContent = "";
      }
      ev.preventDefault();
    }
  }

There’s a couple of extra things to note here. We’re checking for key code 13 (the enter key) and we’re also checking lastwirecount to make sure we only send a message once we have seen another Bugout instance to send to. So you will need to have two different copies of index.html loaded in different tabs or browsers to make this work.

这里还有两点要注意。我们正在检查键码13(回车键)，也在检查lastwirecount以确保仅在看到另一个Bugout实例发送给我们之后才发送消息。因此，您需要在不同的选项卡或浏览器中加载两个不同的index.html副本，以使此工作有效。

Refresh again and once you see the [ seen ] messages you can start typing messages between the windows. You might even see messages coming from other people doing this tutorial.

再次刷新，一旦看到[ seen ]消息，就可以开始在窗口之间键入消息。您甚至可能会看到来自其他人的消息，他们正在本教程中。

Screenshot of final product

So that’s it, our super minimal decentralized chat client is done. Enjoy!

就是这样，我们超级最小的分散聊天客户端就完成了。请享用！

If this tutorial was useful and you want to know more about the decentralized stuff I am building you can find me here:

如果本教程很有用，并且您想了解有关我正在构建的分散式内容的更多信息，请在这里找到我：

Subscribe to my newsletter

订阅我的时事通讯
Follow me on Twitter at @mccrmx

在Twitter上关注我@mccrmx
Send me an email (I freelance too)

给我发送电子邮件 (我也是自由职业者)
Follow the cryptography/decentralization tag on my blog

在我的博客上关注cryptography / decentralization标签

了解更多 (Find out more)

You can find out more about Bugout on the GitHub project page. You can also npm install it if that’s your thing.

您可以在GitHub项目页面上找到有关Bugout的更多信息。您也可以通过npm install它。

There is also API documentation where you can look up all Bugout methods, events, and properties.

还有API文档，您可以在其中查找所有Bugout方法，事件和属性。

If you want a more fleshed out decentralized web chat inspired by IRC then check out dirc.

如果您想获得更多受IRC启发的分散式网络聊天功能，请查看dirc 。

走得更远 (Go further)

Astute readers will have some questions at this point.

精明的读者此时会遇到一些问题。

Isn’t WebRTC signalling still centralized?

WebRTC信号还不是集中的吗？
What happens to the messages when somebody goes offline?

当有人下线时消息会如何处理？
How can do we handle identities when there’s no central server?

没有中央服务器时，我们如何处理身份？

For some possible solutions to the last question you can check my post on decentralized identity linking.

对于最后一个问题的一些可能的解决方案，您可以查看我关于分散身份链接的文章。

I’m actively working on the first two questions. If you want to find out more and keep up with what I’m building you can find me at the links above.

我正在积极处理前两个问题。如果您想了解更多信息并紧跟我正在开发的内容，可以在上面的链接中找到我。

I would love to hear from you about the decentralized things you are building too!

我也很想听到您关于您正在建设的去中心化事物的消息！