From 7de43b2ce72ec7610fca537f0772cf7d7bad4820 Mon Sep 17 00:00:00 2001 From: XianLei Gao <279483350@qq.com> Date: Tue, 6 Oct 2020 08:56:30 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E8=AF=91=E6=96=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...719 Building a Messenger App- Home Page.md | 91 +++++++++---------- 1 file changed, 45 insertions(+), 46 deletions(-) diff --git a/sources/tech/20180719 Building a Messenger App- Home Page.md b/sources/tech/20180719 Building a Messenger App- Home Page.md index 991b9ebe35..ad3cd30125 100644 --- a/sources/tech/20180719 Building a Messenger App- Home Page.md +++ b/sources/tech/20180719 Building a Messenger App- Home Page.md @@ -7,44 +7,43 @@ [#]: via: (https://nicolasparada.netlify.com/posts/go-messenger-home-page/) [#]: author: (Nicolás Parada https://nicolasparada.netlify.com/) -Building a Messenger App: Home Page +构建一个即时消息应用（八）：Home 页面 ====== -This post is the 8th on a series: +本文是该系列的第八篇。 - * [Part 1: Schema][1] - * [Part 2: OAuth][2] - * [Part 3: Conversations][3] - * [Part 4: Messages][4] - * [Part 5: Realtime Messages][5] - * [Part 6: Development Login][6] - * [Part 7: Access Page][7] + * [第一篇: 模式][1] + * [第二篇: OAuth][2] + * [第三篇: 对话][3] + * [第四篇: 消息][4] + * [第五篇: 实时消息][5] + * [第六篇: 仅用于开发的登录][6] + * [第七篇: Access 页面][7] +继续前端部分，让我们在本文中完成 Home 页面的开发。 我们将添加一个开始对话的表单和一个包含最新对话的列表。 -Continuing the frontend, let’s finish the home page in this post. We’ll add a form to start conversations and a list with the latest ones. - -### Conversation Form +### 对话表单 ![conversation form screenshot][8] -In the `static/pages/home-page.js` file add some markup in the HTML view. +转到 `static/ages/home-page.js` 文件，在 HTML 视图中添加一些标记。 -``` +```html
``` -Add that form just below the section in which we displayed the auth user and logout button. +将该表单添加到我们显示 auth user 和 logout 按钮部分的下方。 -``` +```js page.getElementById('conversation-form').onsubmit = onConversationSubmit ``` -Now we can listen to the “submit” event to create the conversation. +现在我们可以监听 “submit” 事件来创建对话了。 -``` +```js import http from '../http.js' import { navigate } from '../router.js' @@ -79,15 +78,15 @@ function createConversation(username) { } ``` -On submit we do a POST request to `/api/conversations` with the username and redirect to the conversation page (for the next post). +在提交时，我们使用用户名对 `/api/conversations` 进行 POST 请求，并重定向到 conversation 页面 (用于下一篇文章)。 -### Conversation List +### 对话列表 ![conversation list screenshot][9] -In the same file, we are going to make the `homePage()` function async to load the conversations first. +还是在这个文件中，我们将创建 `homePage()` 函数用来先异步加载对话。 -``` +```js export default async function homePage() { const conversations = await getConversations().catch(err => { console.error(err) @@ -101,24 +100,24 @@ function getConversations() { } ``` -Then, add a list in the markup to render conversations there. +然后，在标记中添加一个列表来渲染对话。 -``` +```html
    ``` -Add it just below the current markup. +将其添加到当前标记的正下方。 -``` +```js const conversationsOList = page.getElementById('conversations') for (const conversation of conversations) { conversationsOList.appendChild(renderConversation(conversation)) } ``` -So we can append each conversation to the list. +因此，我们可以将每个对话添加到这个列表中。 -``` +```js import { avatar, escapeHTML } from '../shared.js' function renderConversation(conversation) { @@ -146,11 +145,11 @@ function renderConversation(conversation) { } ``` -Each conversation item contains a link to the conversation page and displays the other participant info and a preview of the last message. Also, you can use `.hasUnreadMessages` to add a class to the item and do some styling with CSS. Maybe a bolder font or accent the color. +每个对话条目都包含一个指向对话页面的链接，并显示其他参与者信息和最后一条消息的预览。另外，您可以使用 `.hasUnreadMessages` 向该条目添加一个类，并使用 CSS 进行一些样式设置。也许是粗体字体或强调颜色。 -Note that we’re escaping the message content. That function comes from `static/shared.js`: +请注意，我们需要转义信息的内容。该函数来自于 `static/shared.js` 文件： -``` +```js export function escapeHTML(str) { return str .replace(/&/g, '&') @@ -161,35 +160,35 @@ export function escapeHTML(str) { } ``` -That prevents displaying as HTML the message the user wrote. If the user happens to write something like: +这会阻止将用户编写的消息显示为 HTML。如果用户碰巧编写了类似以下内容的代码： -``` +```js ``` -It would be very annoying because that script will be executed 😅 -So yeah, always remember to escape content from untrusted sources. +这将非常烦人，因为该脚本将被执行😅。 +所以，永远记住要转义来自不可信来源的内容。 -### Messages Subscription +### 消息订阅 -Last but not least, I want to subscribe to the message stream here. +最后但并非最不重要的一点，我想在这里订阅消息流。 -``` +```js const unsubscribe = subscribeToMessages(onMessageArrive) page.addEventListener('disconnect', unsubscribe) ``` -Add that line in the `homePage()` function. +在 `homePage()` 函数中添加这一行。 -``` +```js function subscribeToMessages(cb) { return http.subscribe('/api/messages', cb) } ``` -The `subscribe()` function returns a function that once called it closes the underlying connection. That’s why I passed it to the “disconnect” event; so when the user leaves the page, the event stream will be closed. +函数 `subscribe()` 返回一个函数，该函数一旦调用就会关闭底层连接。这就是为什么我把它传递给 “断开连接”disconnect事件的原因；因此，当用户离开页面时，事件流将被关闭。 -``` +```js async function onMessageArrive(message) { const conversationLI = document.querySelector(`li[data-id="${message.conversationID}"]`) if (conversationLI !== null) { @@ -221,12 +220,12 @@ function getConversation(id) { } ``` -Every time a new message arrives, we go and query for the conversation item in the DOM. If found, we add the `has-unread-messages` class to the item, and update the view. If not found, it means the message is from a new conversation created just now. We go and do a GET request to `/api/conversations/{conversationID}` to get the conversation in which the message was created and prepend it to the conversation list. +每次有新消息到达时，我们都会在 DOM 中查询会话条目。如果找到，我们会将 `has-unread-messages` 类添加到该条目中，并更新视图。如果未找到，则表示该消息来自刚刚创建的新对话。我们去做一个对 `/api/conversations/{conversationID}` 的 GET 请求，以获取在其中创建消息的对话，并将其放在对话列表的前面。 * * * -That covers the home page 😊 -On the next post we’ll code the conversation page. +以上这些涵盖了主页的所有内容 😊。 +在下一篇文章中，我们将对 conversation 页面进行编码。 [Souce Code][10] @@ -236,7 +235,7 @@ via: https://nicolasparada.netlify.com/posts/go-messenger-home-page/ 作者：[Nicolás Parada][a] 选题：[lujun9972][b] -译者：[译者ID](https://github.com/译者ID) +译者：[译者ID](https://github.com/gxlct008) 校对：[校对者ID](https://github.com/校对者ID) 本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 From 4319ae6f8d5da85846808979e3da57fed64c4bf3 Mon Sep 17 00:00:00 2001 From: XianLei Gao <279483350@qq.com> Date: Tue, 6 Oct 2020 08:57:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E5=B0=86=E8=AF=91=E6=96=87=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E5=88=B0=20translated/tech/=20=E7=9B=AE=E5=BD=95?= =?UTF-8?q?=E4=B8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tech/20180719 Building a Messenger App- Home Page.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {sources => translated}/tech/20180719 Building a Messenger App- Home Page.md (100%) diff --git a/sources/tech/20180719 Building a Messenger App- Home Page.md b/translated/tech/20180719 Building a Messenger App- Home Page.md similarity index 100% rename from sources/tech/20180719 Building a Messenger App- Home Page.md rename to translated/tech/20180719 Building a Messenger App- Home Page.md