构建一个即时消息应用（九）：Conversation 页面

本文是该系列的第九篇，也是最后一篇。

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

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

聊天标题

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

“`
import http from ‘../http.js’
import { navigate } from ‘../router.js’
import { avatar, 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 = `

`
const page = template.content
return page
}

function getConversation(id) {
return http.get(‘/api/conversations/’ + id)
}

“`

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

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

对话列表

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

“`
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 请求可以获取对话中的最新消息。

“`

“`

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

“`
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 = `

${messageContent}

${messageDate}
`
return li
}

“`

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

消息表单

“`

“`

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

“`
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 一个请求，以更新参与者上次阅读消息的时间。

via: https://nicolasparada.netlify.com/posts/go-messenger-conversation-page/

作者：Nicolás Parada 选题：lujun9972 译者：gxlct008 校对：wxy

本文由 LCTT 原创编译，Linux中国 荣誉推出