[[346742]]

本文是該系列的第八篇。

• 第一篇: 模式
• 第二篇: OAuth
• 第三篇: 對(duì)話
• 第四篇: 消息
• 第五篇: 實(shí)時(shí)消息
• 第六篇: 僅用于開發(fā)的登錄
• 第七篇: Access 頁(yè)面

繼續(xù)前端部分，讓我們?cè)诒疚闹型瓿?nbsp;home 頁(yè)面的開發(fā)。 我們將添加一個(gè)開始對(duì)話的表單和一個(gè)包含最新對(duì)話的列表。

對(duì)話表單

轉(zhuǎn)到 static/ages/home-page.js 文件，在 HTML 視圖中添加一些標(biāo)記。

<form id="conversation-form"> 
    <input type="search" placeholder="Start conversation with..." required> 
</form> 

將該表單添加到我們顯示 “auth user” 和 “logout” 按鈕部分的下方。

page.getElementById('conversation-form').onsubmit = onConversationSubmit 

現(xiàn)在我們可以監(jiān)聽 “submit” 事件來創(chuàng)建對(duì)話了。

import http from '../http.js' 
import { navigate } from '../router.js' 
 
async function onConversationSubmit(ev) { 
    ev.preventDefault() 
 
    const form = ev.currentTarget 
    const input = form.querySelector('input') 
 
    input.disabled = true 
 
    try { 
        const conversation = await createConversation(input.value) 
        input.value = '' 
        navigate('/conversations/' + conversation.id) 
    } catch (err) { 
        if (err.statusCode === 422) { 
            input.setCustomValidity(err.body.errors.username) 
        } else { 
            alert(err.message) 
        } 
        setTimeout(() => { 
            input.focus() 
        }, 0) 
    } finally { 
        input.disabled = false 
    } 
} 
 
function createConversation(username) { 
    return http.post('/api/conversations', { username }) 
} 

在提交時(shí)，我們使用用戶名對(duì) /api/conversations 進(jìn)行 POST 請(qǐng)求，并重定向到 conversation 頁(yè)面（用于下一篇文章）。

對(duì)話列表

還是在這個(gè)文件中，我們將創(chuàng)建 homePage() 函數(shù)用來先異步加載對(duì)話。

export default async function homePage() { 
    const conversations = await getConversations().catch(err => { 
        console.error(err) 
        return [] 
    }) 
    /*...*/ 
} 
 
function getConversations() { 
    return http.get('/api/conversations') 
} 

然后，在標(biāo)記中添加一個(gè)列表來渲染對(duì)話。

<ol id="conversations"></ol> 

將其添加到當(dāng)前標(biāo)記的正下方。

const conversationsOList = page.getElementById('conversations') 
for (const conversation of conversations) { 
    conversationsOList.appendChild(renderConversation(conversation)) 
} 

因此，我們可以將每個(gè)對(duì)話添加到這個(gè)列表中。

import { avatar, escapeHTML } from '../shared.js' 
 
function renderConversation(conversation) { 
    const messageContent = escapeHTML(conversation.lastMessage.content) 
    const messageDate = new Date(conversation.lastMessage.createdAt).toLocaleString() 
 
    const li = document.createElement('li') 
    li.dataset['id'] = conversation.id 
    if (conversation.hasUnreadMessages) { 
        li.classList.add('has-unread-messages') 
    } 
    li.innerHTML = ` 
        <a href="/conversations/${conversation.id}"> 
            <div> 
                ${avatar(conversation.otherParticipant)} 
                <span>${conversation.otherParticipant.username}</span> 
            </div> 
            <div> 
                <p>${messageContent}</p> 
                <time>${messageDate}</time> 
            </div> 
        </a> 
    ` 
    return li 
} 

每個(gè)對(duì)話條目都包含一個(gè)指向?qū)υ掜?yè)面的鏈接，并顯示其他參與者信息和最后一條消息的預(yù)覽。另外，您可以使用 .hasUnreadMessages 向該條目添加一個(gè)類，并使用 CSS 進(jìn)行一些樣式設(shè)置。也許是粗體字體或強(qiáng)調(diào)顏色。

請(qǐng)注意，我們需要轉(zhuǎn)義信息的內(nèi)容。該函數(shù)來自于 static/shared.js 文件：

export function escapeHTML(str) { 
    return str 
        .replace(/&/g, '&') 
        .replace(/</g, '&lt;') 
        .replace(/>/g, '&gt;') 
        .replace(/"/g, '&quot;') 
        .replace(/'/g, '&#039;') 
} 

這會(huì)阻止將用戶編寫的消息顯示為 HTML。如果用戶碰巧編寫了類似以下內(nèi)容的代碼：

<script>alert('lololo')</script>

這將非常煩人，因?yàn)樵撃_本將被執(zhí)行😅。所以，永遠(yuǎn)記住要轉(zhuǎn)義來自不可信來源的內(nèi)容。

消息訂閱

最后但并非最不重要的一點(diǎn)，我想在這里訂閱消息流。

const unsubscribe = subscribeToMessages(onMessageArrive) 
page.addEventListener('disconnect', unsubscribe) 

在 homePage() 函數(shù)中添加這一行。

function subscribeToMessages(cb) { 
    return http.subscribe('/api/messages', cb) 
} 

函數(shù) subscribe() 返回一個(gè)函數(shù)，該函數(shù)一旦調(diào)用就會(huì)關(guān)閉底層連接。這就是為什么我把它傳遞給 “斷開連接”disconnect事件的原因；因此，當(dāng)用戶離開頁(yè)面時(shí)，事件流將被關(guān)閉。

async function onMessageArrive(message) { 
    const conversationLI = document.querySelector(`li[data-id="${message.conversationID}"]`) 
    if (conversationLI !== null) { 
        conversationLI.classList.add('has-unread-messages') 
        conversationLI.querySelector('a > div > p').textContent = message.content 
        conversationLI.querySelector('a > div > time').textContent = new Date(message.createdAt).toLocaleString() 
        return 
    } 
 
    let conversation 
    try { 
        conversation = await getConversation(message.conversationID) 
        conversation.lastMessage = message 
    } catch (err) { 
        console.error(err) 
        return 
    } 
 
    const conversationsOList = document.getElementById('conversations') 
    if (conversationsOList === null) { 
        return 
    } 
 
    conversationsOList.insertAdjacentElement('afterbegin', renderConversation(conversation)) 
} 
 
function getConversation(id) { 
    return http.get('/api/conversations/' + id) 
} 

每次有新消息到達(dá)時(shí)，我們都會(huì)在 DOM 中查詢會(huì)話條目。如果找到，我們會(huì)將 has-unread-messages 類添加到該條目中，并更新視圖。如果未找到，則表示該消息來自剛剛創(chuàng)建的新對(duì)話。我們?nèi)プ鲆粋€(gè)對(duì) /api/conversations/{conversationID} 的 GET 請(qǐng)求，以獲取在其中創(chuàng)建消息的對(duì)話，并將其放在對(duì)話列表的前面。

以上這些涵蓋了主頁(yè)的所有內(nèi)容 😊。 在下一篇文章中，我們將對(duì) conversation 頁(yè)面進(jìn)行編碼。

• 源代碼