|
|
|
|
移动端

构建一个即时消息应用(八):Home 页面

继续前端部分,让我们在本文中完成 home 页面的开发。 我们将添加一个开始对话的表单和一个包含最新对话的列表。

作者:Nicolás Parada来源:Linux中国|2020-10-16 14:40

本文是该系列的第八篇。

继续前端部分,让我们在本文中完成 home 页面的开发。 我们将添加一个开始对话的表单和一个包含最新对话的列表。

对话表单

转到 static/ages/home-page.js 文件,在 HTML 视图中添加一些标记。

 
  1. <form id="conversation-form"
  2.     <input type="search" placeholder="Start conversation with..." required> 
  3. </form> 

将该表单添加到我们显示 “auth user” 和 “logout” 按钮部分的下方。

  1. page.getElementById('conversation-form').onsubmit = onConversationSubmit 

现在我们可以监听 “submit” 事件来创建对话了。

  1. import http from '../http.js' 
  2. import { navigate } from '../router.js' 
  3.  
  4. async function onConversationSubmit(ev) { 
  5.     ev.preventDefault() 
  6.  
  7.     const form = ev.currentTarget 
  8.     const input = form.querySelector('input'
  9.  
  10.     input.disabled = true 
  11.  
  12.     try { 
  13.         const conversation = await createConversation(input.value) 
  14.         input.value = '' 
  15.         navigate('/conversations/' + conversation.id) 
  16.     } catch (err) { 
  17.         if (err.statusCode === 422) { 
  18.             input.setCustomValidity(err.body.errors.username) 
  19.         } else { 
  20.             alert(err.message) 
  21.         } 
  22.         setTimeout(() => { 
  23.             input.focus() 
  24.         }, 0) 
  25.     } finally { 
  26.         input.disabled = false 
  27.     } 
  28.  
  29. function createConversation(username) { 
  30.     return http.post('/api/conversations', { username }) 

在提交时,我们使用用户名对 /api/conversations 进行 POST 请求,并重定向到 conversation 页面(用于下一篇文章)。

对话列表

还是在这个文件中,我们将创建 homePage() 函数用来先异步加载对话。

  1. export default async function homePage() { 
  2.     const conversations = await getConversations().catch(err => { 
  3.         console.error(err) 
  4.         return [] 
  5.     }) 
  6.     /*...*/ 
  7.  
  8. function getConversations() { 
  9.     return http.get('/api/conversations'

然后,在标记中添加一个列表来渲染对话。

  1. <ol id="conversations"></ol> 

将其添加到当前标记的正下方。

  1. const conversationsOList = page.getElementById('conversations'
  2. for (const conversation of conversations) { 
  3.     conversationsOList.appendChild(renderConversation(conversation)) 

因此,我们可以将每个对话添加到这个列表中。

  1. import { avatar, escapeHTML } from '../shared.js' 
  2.  
  3. function renderConversation(conversation) { 
  4.     const messageContent = escapeHTML(conversation.lastMessage.content) 
  5.     const messageDate = new Date(conversation.lastMessage.createdAt).toLocaleString() 
  6.  
  7.     const li = document.createElement('li'
  8.     li.dataset['id'] = conversation.id 
  9.     if (conversation.hasUnreadMessages) { 
  10.         li.classList.add('has-unread-messages'
  11.     } 
  12.     li.innerHTML = ` 
  13.         <a href="/conversations/${conversation.id}"
  14.             <div> 
  15.                 ${avatar(conversation.otherParticipant)} 
  16.                 <span>${conversation.otherParticipant.username}</span> 
  17.             </div> 
  18.             <div> 
  19.                 <p>${messageContent}</p> 
  20.                 <time>${messageDate}</time
  21.             </div> 
  22.         </a> 
  23.     ` 
  24.     return li 

每个对话条目都包含一个指向对话页面的链接,并显示其他参与者信息和最后一条消息的预览。另外,您可以使用 .hasUnreadMessages 向该条目添加一个类,并使用 CSS 进行一些样式设置。也许是粗体字体或强调颜色。

请注意,我们需要转义信息的内容。该函数来自于 static/shared.js 文件:

  1. export function escapeHTML(str) { 
  2.     return str 
  3.         .replace(/&/g, '&amp;'
  4.         .replace(/</g, '&lt;'
  5.         .replace(/>/g, '&gt;'
  6.         .replace(/"/g, '&quot;'
  7.         .replace(/'/g, '&#039;') 

这会阻止将用户编写的消息显示为 HTML。如果用户碰巧编写了类似以下内容的代码:

<script>alert('lololo')</script>

这将非常烦人,因为该脚本将被执行😅。所以,永远记住要转义来自不可信来源的内容。

消息订阅

最后但并非最不重要的一点,我想在这里订阅消息流。

  1. const unsubscribe = subscribeToMessages(onMessageArrive) 
  2. page.addEventListener('disconnect', unsubscribe) 

在 homePage() 函数中添加这一行。

  1. function subscribeToMessages(cb) { 
  2.     return http.subscribe('/api/messages', cb) 

函数 subscribe() 返回一个函数,该函数一旦调用就会关闭底层连接。这就是为什么我把它传递给 “断开连接”disconnect事件的原因;因此,当用户离开页面时,事件流将被关闭。

  1. async function onMessageArrive(message) { 
  2.     const conversationLI = document.querySelector(`li[data-id="${message.conversationID}"]`) 
  3.     if (conversationLI !== null) { 
  4.         conversationLI.classList.add('has-unread-messages'
  5.         conversationLI.querySelector('a > div > p').textContent = message.content 
  6.         conversationLI.querySelector('a > div > time').textContent = new Date(message.createdAt).toLocaleString() 
  7.         return 
  8.     } 
  9.  
  10.     let conversation 
  11.     try { 
  12.         conversation = await getConversation(message.conversationID) 
  13.         conversation.lastMessage = message 
  14.     } catch (err) { 
  15.         console.error(err) 
  16.         return 
  17.     } 
  18.  
  19.     const conversationsOList = document.getElementById('conversations'
  20.     if (conversationsOList === null) { 
  21.         return 
  22.     } 
  23.  
  24.     conversationsOList.insertAdjacentElement('afterbegin', renderConversation(conversation)) 
  25.  
  26. function getConversation(id) { 
  27.     return http.get('/api/conversations/' + id) 

每次有新消息到达时,我们都会在 DOM 中查询会话条目。如果找到,我们会将 has-unread-messages 类添加到该条目中,并更新视图。如果未找到,则表示该消息来自刚刚创建的新对话。我们去做一个对 /api/conversations/{conversationID} 的 GET 请求,以获取在其中创建消息的对话,并将其放在对话列表的前面。


以上这些涵盖了主页的所有内容 😊。 在下一篇文章中,我们将对 conversation 页面进行编码。

【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

云原生架构实践

云原生架构实践

新技术引领移动互联网进入急速赛道
共3章 | KaliArch

19人订阅学习

数据中心和VPDN网络建设案例

数据中心和VPDN网络建设案例

漫画+案例
共20章 | 捷哥CCIE

180人订阅学习

搭建数据中心实验Lab

搭建数据中心实验Lab

实验平台Datacenter
共5章 | ITGO(老曾)

112人订阅学习

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO官微