本文是构建个即该系列的第八篇。

第一篇: 模式 第二篇: OAuth 第三篇: 对话 第四篇: 消息 第五篇: 实时消息 第六篇: 仅用于开发的时消登录 第七篇: Access 页面 第八篇: Home 页面

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

聊天标题

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

import http from ../http.js import {  navigate } from ../router.js import {  avatar,用Cn页 escapeHTML } from ../shared.js export default async function conversationPage(conversationID) {      let conversation     try {          conversation = await getConversation(conversationID)     } catch (err) {          alert(err.message)         navigate(/, true)         return     }     const template = document.createElement(template)     template.innerHTML = `         <div>             <a href="/">← Back</a>             ${ avatar(conversation.otherParticipant)}             <span>${ conversation.otherParticipant.username}</span>         </div>         <!-- message list here -->         <!-- message form here -->     `     const page = template.content     return page } function getConversation(id) {      return http.get(/api/conversations/ + id) } 

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

首先，构建个即它向 /api/ conversations/{ conversationID} 发起一个 GET 请求，时消以获取有关对话的用Cn页信息。 如果出现错误，高防服务器构建个即我们会将其显示，时消并重定向回 /。用Cn页然后我们呈现有关其他参与者的信息。

对话列表

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

let conversation, messages try {      [conversation, messages] = await Promise.all([         getConversation(conversationID),         getMessages(conversationID),     ]) } 

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

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

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

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

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

const messagesOList = page.getElementById(messages) for (const message of messages.reverse()) {      messagesOList.appendChild(renderMessage(message)) } 

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

function renderMessage(message) {      const messageContent = escapeHTML(message.content)     const messageDate = new Date(message.createdAt).toLocaleString()     const li = document.createElement(li)     if (message.mine) {          li.classList.add(owned)     }     li.innerHTML = `         <p>${ messageContent}</p>         <time>${ messageDate}</time>     `     return li } 

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

消息表单

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

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

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

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

function messageSubmitter(conversationID) {      return async ev => {          ev.preventDefault()         const form = ev.currentTarget         const input = form.querySelector(input)         const submitButton = form.querySelector(button)         input.disabled = true         submitButton.disabled = true         try {              const message = await createMessage(input.value, conversationID)             input.value =              const messagesOList = document.getElementById(messages)             if (messagesOList === null) {                  return             }             messagesOList.appendChild(renderMessage(message))         } catch (err) {              if (err.statusCode === 422) {                  input.setCustomValidity(err.body.errors.content)             } else {                  alert(err.message)             }         } finally {              input.disabled = false             submitButton.disabled = false             setTimeout(() => {                  input.focus()             }, 0)         }     } } function createMessage(content, conversationID) {      return http.post(`/api/conversations/${ conversationID}/messages`, {  content }) } 

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

消息订阅

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

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

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

function subscribeToMessages(cb) {      return http.subscribe(/api/messages, cb) } function messageArriver(conversationID) {      return message => {          if (message.conversationID !== conversationID) {              return         }         const messagesOList = document.getElementById(messages)         if (messagesOList === null) {              return         }         messagesOList.appendChild(renderMessage(message))         readMessages(message.conversationID)     } } function readMessages(conversationID) {      return http.post(`/api/conversations/${ conversationID}/read_messages`) } 

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

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

源代码 演示