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

在这篇文章中,我们将对对话页面进行编码。

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

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

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

聊天标题

构建一个即时消息应用(九):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 = `

← Back
${avatar(conversation.otherParticipant)}
${conversation.otherParticipant.username}



`
const page = template.content
return page
}

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

“`

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

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

对话列表

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

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

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


    `
    return li
    }

    “`

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

    消息表单

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

    “`



    “`

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

    “`
    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中国 荣誉推出

    主题测试文章,只做测试使用。发布者:eason,转转请注明出处:https://aicodev.cn/2020/10/19/%e6%9e%84%e5%bb%ba%e4%b8%80%e4%b8%aa%e5%8d%b3%e6%97%b6%e6%b6%88%e6%81%af%e5%ba%94%e7%94%a8%ef%bc%88%e4%b9%9d%ef%bc%89%ef%bc%9aconversation-%e9%a1%b5%e9%9d%a2/

    (0)
    eason的头像eason
    上一篇 2020年10月19日
    下一篇 2020年10月19日

    相关推荐

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注

    联系我们

    400-800-8888

    在线咨询: QQ交谈

    邮件:admin@example.com

    工作时间:周一至周五,9:30-18:30,节假日休息

    关注微信