Linux中國

構建一個即時消息應用(九):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 = `
 <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(&apos;/api/conversations/&apos; + 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 請求可以獲取對話中的最新消息。

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

現在,將該列表添加到標記中。

const messagesOList = page.getElementById(&apos;messages&apos;)
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(&apos;li&apos;)
    if (message.mine) {
        li.classList.add(&apos;owned&apos;)
    }
    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(&apos;message-form&apos;).onsubmit = messageSubmitter(conversationID)

將事件監聽器附加到 「submit」 事件。

function messageSubmitter(conversationID) {
    return async ev => {
        ev.preventDefault()

        const form = ev.currentTarget
        const input = form.querySelector(&apos;input&apos;)
        const submitButton = form.querySelector(&apos;button&apos;)

        input.disabled = true
        submitButton.disabled = true

        try {
            const message = await createMessage(input.value, conversationID)
            input.value = &apos;&apos;
            const messagesOList = document.getElementById(&apos;messages&apos;)
            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(&apos;disconnect&apos;, subscribeToMessages(messageArriver(conversationID)))

將該行添加到 conversationPage() 函數中。

function subscribeToMessages(cb) {
    return http.subscribe(&apos;/api/messages&apos;, cb)
}

function messageArriver(conversationID) {
    return message => {
        if (message.conversationID !== conversationID) {
            return
        }

        const messagesOList = document.getElementById(&apos;messages&apos;)
        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中國 榮譽推出


本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive

對這篇文章感覺如何?

太棒了
0
不錯
0
愛死了
0
不太好
0
感覺很糟
0
雨落清風。心向陽

    You may also like

    Leave a reply

    您的電子郵箱地址不會被公開。 必填項已用 * 標註

    此站點使用Akismet來減少垃圾評論。了解我們如何處理您的評論數據

    More in:Linux中國