每周翻译一篇前端技术英文官网(一)

今天准备翻译的网站是 socket . io

网址链接：
https://socket.io/get-started/chat/

首先是左侧sidebar部分翻译：

Introduction - - 介绍，入门
The web framework - - web框架
Serving HTML - - 个人理解是服务器的HTML（如果您有不同意见请下方评论，如果您翻译的更合理我会及时更改）
Integrating Socket.IO - - 整合Socket.IO
Emitting events - - 发射事件，触发事件
Broadcasting - - 播放，广播
Homework - - 家庭作业
Getting this example - - 了解这个例子

接下来是主体部分的翻译：

原文部分：
In this guide we’ll create a basic chat application.It requires almost no basic prior knowledge of Node.JS or Socket.IO,so it’s ideal for users of all knowledge levels.

翻译部分：
在本指南中，我们将创建一个基本的聊天应用程序。它几乎不需要Node.JS或Socket.IO的基本知识，因此，它是所有知识水平的用户的理想选择。

Introduction
介绍

原文部分：
Writing a chat application with popular web applications stacks like LAMP(PHP) has traditionally been very hard.It involves poling the server for changes, keeping track of timestamps, and it is a lot slower than it should be.

翻译部分：
编写一个带有流行web应用程序栈(如LAMP)的聊天应用程序在传统上是非常困难的。它涉及轮询服务器的更改，跟踪时间戳，并且比应该有的速度慢得多。

原文部分：
Sockets have traditionally been the solution around which most real-time chat systems are architected,providing a bi-directional communication channel between a client and a server.

翻译部分：
传统上，socket是大多数实时聊天系统所构建的解决方案,在客户机和服务器之间提供双向通信通道。

原文部分：
This means that the server can push messages to clients.Whenever you write a chat message,the idea is that the server will get it and push it to all other connected clients.

翻译部分：
这意味着服务器可以将消息推送到客户端。每当你写聊天信息的时候,其思想是服务器将获取它并将其推给所有其他连接的客户端。

The web framework
web框架

原文部分：
The first goal is to setup a simple HTML webpage that serves out a form and a list of messages.We’re going to use the Node.JS web framework express to this end.Make sure Node.JS is installed.

翻译部分：
第一个目标是设置一个简单的HTML页面，它提供一个表单和一个消息列表。为此，我们将使用Node.JS web框架 - - express。确保安装了Node.JS

原文部分：
First let’s create a package.json manifest file that describes our project.I recommend you place it in a dedicated empty directory(I’ll call mine chat-example).

翻译部分：
首先，让我们创建一个package.json文件。描述我们项目的清单文件。我建议您将它放在一个专用的空目录中(我将其称为mine chat-example)。

原文部分：
Now,in order to easily populate the dependencies with the things we need,we’ll use npm install --save.

翻译部分：
现在，为了方便地用我们需要的东西我们需要填充依赖关系，我们将使用npm install——save。

原文部分：
Now that express is installed we can create an index.js file that will setup our application.

翻译部分：
现在已经安装了express，我们可以创建一个index.js文件来设置应用程序。

原文部分：
This translates into the following:

Express initializes app to be a function handler that you can supply to an HTTP server(as seen in line 2)
We define a route handler / that gets called when we hit our website home.
We make the http server listen on port 3000.
If you run node index.js you should see the following:

翻译部分：
这意味着：
Express初始化app为一个函数处理程序，您可以将其提供给HTTP服务器(如第2行所示)
我们定义一个路由处理程序/当我们点击我们的网站主页时被调用。
我们让http服务器监听端口3000
如果运行node index.js，应该会看到以下内容:

原文部分：
And if you point your browser to http://localhost:3000:

翻译部分：
如果你把浏览器指向http://localhost:3000:

Serving HTML:
服务器HTML：
原文部分：
So far in index.js we’re calling res.send and pass it a HTML string.Our code would look very confusing if we just placed our entire application’s HTML there.Instead,we’re going to create a index.html file and serve it.Let’s refactor our route handler to use sendFile instead:

翻译部分：
到目前为止，在index.js中，我们调用res.send并传递一个HTML字符串。如果我们只是将整个应用程序的HTML放在那里，我们的代码看起来会非常混乱。相反，我们将创建index.html文件并提供它。让我们重构路由处理程序以使用sendFile:

原文部分：
And populate index.html with the following:

翻译部分：
并使用以下代码填充index.html:

原文部分：
If you restart the process(by hitting Control + C and running node index again) and refresh the page it should look like this:

翻译部分：
如果重新启动进程(单击Control+C，再次运行节点索引)并刷新页面，应该如下所示:

Integrating Socket . IO
整合Socket . IO

原文部分：
Socket . IO is composed of two parts:

A server that integrates with (or mounts on) the Node.JS HTTP Server: socket . io
A client library that loads on the browser side : socket . io-client

During development,socket . io serves the client automatically for us,as we’ll see,so for now we only have to install one module:

翻译部分：
Socket . IO由两部分组成:
与Node.JS HTTP服务器集成(或挂载)的服务器:socket . io
在浏览器端加载的客户端:socket . io-client
在开发期间,socket . io自动为我们服务客户端,我们将看到，到目前为止，我们只需要安装一个模块。

原文部分：
That will install the module and add the dependency to package.json.Now let’s edit index.js to add it:

翻译部分：
这将安装模块并将依赖项添加到package.json。现在让我们编辑index.js来添加它:

原文部分：
Notice that I initialize a new instance of socket . io by passing the http (the HTTP server) object.Then I listen on the connection event for incoming sockets,and I log it to the console.
Now in index.html I add the following snippet before the </body>:

翻译部分：
注意，我通过传递http(http服务器)对象初始化了socket . io的一个新实例。然后监听引入的Sockets的连接事件，并将其记录到控制台。
现在在index.html中，我在</body>之前添加了以下代码片段:

原文部分：
That’s all it takes to load the socket . io-client,which exposes a io global (and the endpoint GET / socket . io/socket . io .js),and then connect.
If you would like to use the local version of the client-side JS file,you can find it at node_modules/socket . io-client/dist/socket . io.js.
Notice that I’m not specifying any URL when I call io(),since it defaults to trying to connect to the host that serves the page.
If you now reload the server and the website you should see the console print “a user connected”.
Try opening several tabs, and you’ll see several messages:

翻译部分：
这就是加载客户端Socket所需的全部内容。它公开一个全局io(以及端点GET /socket.io/socket.io.js)，然后连接。
如果您想使用客户端JS文件的本地版本，可以在node_modules/socket . io-client / dist / socket . io.js中找到它。
注意，在调用io()时没有指定和URL，因为它默认尝试连接到提供页面的主机。
如果您现在重新加载服务器和网站，您应该看到控制台打印“a user connected”。
尝试打开几个选项卡，您将看到几个消息:

原文部分：
Each socket also fires a special disconnect event:

翻译部分：
每个socket还触发一个特殊的disconnect事件:

原文部分：
Then if you refresh a tab several times you can see it in action:

翻译部分：
然后，如果你刷新一个标签几次，你可以看到它的行动:

Emitting events
触发事件

原文部分：
The main idea behind Socket . IO is that you can send and receive any events you want, with any data you want.Any objects that can be encoded as JSON will do,and binary data is supported too.
Let’s make it so that when the user types in a message,the server gets it as a chat message event.The scripts section in index.html should now look as follows:

翻译部分：
Socket . IO背后的主要思想是你可以发送和接收任何你想要的事件，任何你想要的数据。任何可以编码为JSON的对象都可以，而且还支持二进制数据。
让我们这样做:当用户输入消息时，服务器将其作为聊天消息事件获取。index.html中的scripts部分现在应该如下所示:

原文部分：
And in index.js we print out the chat message event:

翻译部分：
在index.js中，我们输出聊天消息事件:

原文部分：
AndResult should be like the following video:

翻译部分：
结果应该如下面的视频所示:

Broadcasting
播放，广播
原文部分：
The next goal is for us to emit the event from the server to the rest of the users.
In order to send an event to every, Socket . IO gives us the io . emit:

翻译部分：
下一个目标是将事件从服务器发送给其他用户。为了向每个人发送一个事件，Socket . IO给我们提供了io . emit方法:

原文部分：
If you want to send a message to everyone except for a certain socket, we have the broadcast flag:

翻译部分：
如果你想发送一个消息给每个人，除了一个特定的socket，我们有broadcast标志:

原文部分：
In this case, for the sake of simplicity we’ll send the message to everyone, including the sender.

翻译部分：
在本例中，为了简单起见，我们将把消息发送给每个人，包括发送者。

原文部分：
And on the client side when we capture a chat message event we’ll include it in the page. The total client-side JavaScript code now amounts to:

翻译部分：
在客户端，当我们捕获聊天消息事件时，我们将把它包含在页面中。客户端JavaScript代码总数现在达到:

原文部分：
And that completes our chat application, in about 20 lines of code! This is what it looks like:

翻译部分：
这就完成了我们的聊天应用程序，只需要20行代码!它是这样的:

Homework
家庭作业

原文部分：
Here are some ideas to improve the application:

Broadcast a message to connected users when someone connects or disconnects.
Add support for nicknames.
Don’t send the same message to the user that sent it himself. Instead, append the message directly as soon as he presses enter.
Add “{user} is typing” functionality.
Show who’s online.
Add private messaging.
Share your improvements!

翻译部分：
*下面是一些改进应用程序的想法:
当有人连接或断开连接时，向已连接的用户广播消息。
添加对昵称的支持。
不要向亲自发送消息的用户发送相同的消息。相反，只要他按下enter键，就直接添加消息。
添加“{user}正在键入”功能。
显示谁在线。
添加私人信息。
分享你的进步!
*

Getting this example
了解这个示例
原文部分：
You can find it on GitHub here.

翻译部分：
你可以在GitHub上找到它。

原文部分：
Caught a mistake? Edit this page on GitHub

翻译部分：
抓住一个错误?在GitHub上编辑这个页面