构建一个即时消息应用之实现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 请求,以获取有关对话的信息。 如果出现错误,我们会将其显示,并重定向回 /
。然后我们呈现有关其他参与者的信息。
对话列表
我们也会获取最新的消息并显示它们。
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 类附加到条目,这样您就可以将消息显示在右侧。
消息表单
将该表单添加到当前标记中。
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 一个请求,以更新参与者上次阅读消息的时间。
感谢各位的阅读,以上就是“构建一个即时消息应用之实现Conversation页面”的内容了,经过本文的学习后,相信大家对构建一个即时消息应用之实现Conversation页面这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文标题:构建一个即时消息应用之实现Conversation页面
网址分享:http://scyanting.com/article/gghssp.html