去中心化聊天软件
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文件并在浏览器中打开它们的基本知识 。
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!”字样。 在屏幕顶部以白色文字显示。
Great, we are up and running with a basic web page and a log()
function which will print text on the screen.
太好了,我们启动并运行了一个基本的网页和一个log()
函数,该函数将在屏幕上打印文本。