构建一个即时消息应用(九):Conversation页面

开发 后端
在这篇文章中,我们将对对话conversation页面进行编码。此页面是两个用户之间的聊天室。在顶部我们将显示其他参与者的信息,下面接着的是最新消息列表,以及底部的消息表单。

[[347198]]

本文是该系列的第八篇。

在这篇文章中,我们将对对话conversation页面进行编码。此页面是两个用户之间的聊天室。在顶部我们将显示其他参与者的信息,下面接着的是最新消息列表,以及底部的消息表单。

聊天标题

 

让我们从创建 static/pages/conversation-page.js 文件开始,它包含以下内容:

  1. import http from '../http.js' 
  2. import { navigate } from '../router.js' 
  3. import { avatar, escapeHTML } from '../shared.js' 
  4.  
  5. export default async function conversationPage(conversationID) { 
  6.     let conversation 
  7.     try { 
  8.         conversation = await getConversation(conversationID) 
  9.     } catch (err) { 
  10.         alert(err.message) 
  11.         navigate('/'true
  12.         return 
  13.     } 
  14.  
  15.     const template = document.createElement('template'
  16.     template.innerHTML = ` 
  17.         <div> 
  18.             <a href="/">← Back</a> 
  19.             ${avatar(conversation.otherParticipant)} 
  20.             <span>${conversation.otherParticipant.username}</span> 
  21.         </div> 
  22.         <!-- message list here --> 
  23.         <!-- message form here --> 
  24.     ` 
  25.     const page = template.content 
  26.     return page 
  27.  
  28. function getConversation(id) { 
  29.     return http.get('/api/conversations/' + id) 

此页面接收路由从 URL 中提取的会话 ID。

首先,它向 /api/ conversations/{conversationID} 发起一个 GET 请求,以获取有关对话的信息。 如果出现错误,我们会将其显示,并重定向回 /。然后我们呈现有关其他参与者的信息。

对话列表

 

我们也会获取最新的消息并显示它们。

  1. let conversation, messages 
  2. try { 
  3.     [conversation, messages] = await Promise.all([ 
  4.         getConversation(conversationID), 
  5.         getMessages(conversationID), 
  6.     ]) 

更新 conversationPage() 函数以获取消息。我们使用 Promise.all() 同时执行这两个请求。

  1. function getMessages(conversationID) { 
  2.     return http.get(`/api/conversations/${conversationID}/messages`) 

发起对 /api/conversations/{conversationID}/messages 的 GET 请求可以获取对话中的最新消息。

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

现在,将该列表添加到标记中。

  1. const messagesOList = page.getElementById('messages'
  2. for (const message of messages.reverse()) { 
  3.     messagesOList.appendChild(renderMessage(message)) 

这样我们就可以将消息附加到列表中了。我们以时间倒序来显示它们。

  1. function renderMessage(message) { 
  2.     const messageContent = escapeHTML(message.content) 
  3.     const messageDate = new Date(message.createdAt).toLocaleString() 
  4.  
  5.     const li = document.createElement('li'
  6.     if (message.mine) { 
  7.         li.classList.add('owned'
  8.     } 
  9.     li.innerHTML = ` 
  10.         <p>${messageContent}</p> 
  11.         <time>${messageDate}</time
  12.     ` 
  13.     return li 

每个消息条目显示消息内容本身及其时间戳。使用 .mine,我们可以将不同的 css 类附加到条目,这样您就可以将消息显示在右侧。

消息表单

 

 
  1. <form id="message-form"
  2.     <input type="text" placeholder="Type something" maxlength="480" required> 
  3.     <button>Send</button> 
  4. </form> 

将该表单添加到当前标记中。

  1. page.getElementById('message-form').onsubmit = messageSubmitter(conversationID) 

将事件监听器附加到 “submit” 事件。

  1. function messageSubmitter(conversationID) { 
  2.     return async ev => { 
  3.         ev.preventDefault() 
  4.  
  5.         const form = ev.currentTarget 
  6.         const input = form.querySelector('input'
  7.         const submitButton = form.querySelector('button'
  8.  
  9.         input.disabled = true 
  10.         submitButton.disabled = true 
  11.  
  12.         try { 
  13.             const message = await createMessage(input.value, conversationID) 
  14.             input.value = '' 
  15.             const messagesOList = document.getElementById('messages'
  16.             if (messagesOList === null) { 
  17.                 return 
  18.             } 
  19.  
  20.             messagesOList.appendChild(renderMessage(message)) 
  21.         } catch (err) { 
  22.             if (err.statusCode === 422) { 
  23.                 input.setCustomValidity(err.body.errors.content) 
  24.             } else { 
  25.                 alert(err.message) 
  26.             } 
  27.         } finally { 
  28.             input.disabled = false 
  29.             submitButton.disabled = false 
  30.  
  31.             setTimeout(() => { 
  32.                 input.focus() 
  33.             }, 0) 
  34.         } 
  35.     } 
  36.  
  37. function createMessage(content, conversationID) { 
  38.     return http.post(`/api/conversations/${conversationID}/messages`, { content }) 

我们利用 partial application 在 “submit” 事件处理程序中获取对话 ID。它 从输入中获取消息内容,并用它对 /api/conversations/{conversationID}/messages 发出 POST 请求。 然后将新创建的消息添加到列表中。

消息订阅

为了实现实时,我们还将订阅此页面中的消息流。

  1. page.addEventListener('disconnect', subscribeToMessages(messageArriver(conversationID))) 

将该行添加到 conversationPage() 函数中。

  1. function subscribeToMessages(cb) { 
  2.     return http.subscribe('/api/messages', cb) 
  3.  
  4. function messageArriver(conversationID) { 
  5.     return message => { 
  6.         if (message.conversationID !== conversationID) { 
  7.             return 
  8.         } 
  9.  
  10.         const messagesOList = document.getElementById('messages'
  11.         if (messagesOList === null) { 
  12.             return 
  13.  
  14.         } 
  15.         messagesOList.appendChild(renderMessage(message)) 
  16.         readMessages(message.conversationID) 
  17.     } 
  18.  
  19. function readMessages(conversationID) { 
  20.     return http.post(`/api/conversations/${conversationID}/read_messages`) 

在这里我们仍然使用这个应用的部分来获取会话 ID。 当新消息到达时,我们首先检查它是否来自此对话。如果是,我们会将消息条目预先添加到列表中,并向 /api/conversations/{conversationID}/read_messages 发起 POST 一个请求,以更新参与者上次阅读消息的时间。


本系列到此结束。 消息应用现在可以运行了。

 

 

责任编辑:庞桂玉 来源: Linux中国
相关推荐

2020-10-16 14:40:20

即时消息Home页面编程语言

2020-10-12 09:20:13

即时消息Access页面编程语言

2020-10-09 12:45:19

创建消息即时消息编程语言

2019-09-29 15:25:13

CockroachDBGoJavaScript

2020-10-09 15:00:56

实时消息编程语言

2020-03-31 12:21:20

JSON即时消息编程语言

2019-10-28 20:12:40

OAuthGuard中间件编程语言

2020-10-10 20:51:10

即时消息编程语言

2023-08-14 08:01:12

websocket8g用户

2021-03-25 08:29:33

SpringBootWebSocket即时消息

2015-03-18 15:37:19

社交APP场景

2018-08-22 17:32:45

2014-10-15 11:01:02

Web应用测试应用

2021-07-14 17:39:46

ReactRails API前端组件

2022-02-10 07:03:32

流量应用架构数据交换

2023-09-21 08:00:00

ChatGPT编程工具

2021-12-03 00:02:01

通讯工具即时

2010-05-24 09:51:37

System Cent

2022-08-30 11:41:53

网络攻击木马

2023-09-15 10:10:05

R 语言
点赞
收藏

51CTO技术栈公众号