構建一個即時消息應用之實現Home頁面

這篇文章主要介紹“構建一個即時消息應用之實現Home頁面”，在日常操作中，相信很多人在構建一個即時消息應用之實現Home頁面問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”構建一個即時消息應用之實現Home頁面”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

對話表單

轉到 static/ages/home-page.js 文件，在 HTML 視圖中添加一些標記。

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

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

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

現在我們可以監聽 “submit” 事件來創建對話了。

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 }) }

在提交時，我們使用用戶名對 /api/conversations 進行 POST 請求，并重定向到 conversation 頁面（用于下一篇文章）。

對話列表

還是在這個文件中，我們將創建 homePage() 函數用來先異步加載對話。

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

然后，在標記中添加一個列表來渲染對話。

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

將其添加到當前標記的正下方。

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

因此，我們可以將每個對話添加到這個列表中。

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 }

每個對話條目都包含一個指向對話頁面的鏈接，并顯示其他參與者信息和最后一條消息的預覽。另外，您可以使用 .hasUnreadMessages 向該條目添加一個類，并使用 CSS 進行一些樣式設置。也許是粗體字體或強調顏色。

請注意，我們需要轉義信息的內容。該函數來自于 static/shared.js 文件：

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

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

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

這將非常煩人，因為該腳本將被執行?。所以，永遠記住要轉義來自不可信來源的內容。

消息訂閱

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

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

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

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

函數 subscribe() 返回一個函數，該函數一旦調用就會關閉底層連接。這就是為什么我把它傳遞給 “斷開連接”disconnect事件的原因；因此，當用戶離開頁面時，事件流將被關閉。

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) }

每次有新消息到達時，我們都會在 DOM 中查詢會話條目。如果找到，我們會將 has-unread-messages 類添加到該條目中，并更新視圖。如果未找到，則表示該消息來自剛剛創建的新對話。我們去做一個對 /api/conversations/{conversationID} 的 GET 請求，以獲取在其中創建消息的對話，并將其放在對話列表的前面。

到此，關于“構建一個即時消息應用之實現Home頁面”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！