Messenger
+ Access with GitHub +` + +export default function accessPage() { + return template.content +} +``` + +Because the router intercepts all the link clicks to do its navigation, we must prevent the event propagation for this link in particular. + +Clicking on that link will redirect us to the backend, then to GitHub, then to the backend and then to the frontend again; to the callback page. + +### Callback Page + +Create the file `static/pages/callback-page.js` with the following content: + +``` +import http from '../http.js' +import { navigate } from '../router.js' + +export default async function callbackPage() { + const url = new URL(location.toString()) + const token = url.searchParams.get('token') + const expiresAt = url.searchParams.get('expires_at') + + try { + if (token === null || expiresAt === null) { + throw new Error('Invalid URL') + } + + const authUser = await getAuthUser(token) + + localStorage.setItem('auth_user', JSON.stringify(authUser)) + localStorage.setItem('token', token) + localStorage.setItem('expires_at', expiresAt) + } catch (err) { + alert(err.message) + } finally { + navigate('/', true) + } +} + +function getAuthUser(token) { + return http.get('/api/auth_user', { authorization: `Bearer ${token}` }) +} +``` + +The callback page doesn’t render anything. It’s an async function that does a GET request to `/api/auth_user` using the token from the URL query string and saves all the data to localStorage. Then it redirects to `/`. + +### HTTP + +There is an HTTP module. Create a `static/http.js` file with the following content: + +``` +import { isAuthenticated } from './auth.js' + +async function handleResponse(res) { + const body = await res.clone().json().catch(() => res.text()) + + if (res.status === 401) { + localStorage.removeItem('auth_user') + localStorage.removeItem('token') + localStorage.removeItem('expires_at') + } + + if (!res.ok) { + const message = typeof body === 'object' && body !== null && 'message' in body + ? body.message + : typeof body === 'string' && body !== '' + ? body + : res.statusText + throw Object.assign(new Error(message), { + url: res.url, + statusCode: res.status, + statusText: res.statusText, + headers: res.headers, + body, + }) + } + + return body +} + +function getAuthHeader() { + return isAuthenticated() + ? { authorization: `Bearer ${localStorage.getItem('token')}` } + : {} +} + +export default { + get(url, headers) { + return fetch(url, { + headers: Object.assign(getAuthHeader(), headers), + }).then(handleResponse) + }, + + post(url, body, headers) { + const init = { + method: 'POST', + headers: getAuthHeader(), + } + if (typeof body === 'object' && body !== null) { + init.body = JSON.stringify(body) + init.headers['content-type'] = 'application/json; charset=utf-8' + } + Object.assign(init.headers, headers) + return fetch(url, init).then(handleResponse) + }, + + subscribe(url, callback) { + const urlWithToken = new URL(url, location.origin) + if (isAuthenticated()) { + urlWithToken.searchParams.set('token', localStorage.getItem('token')) + } + const eventSource = new EventSource(urlWithToken.toString()) + eventSource.onmessage = ev => { + let data + try { + data = JSON.parse(ev.data) + } catch (err) { + console.error('could not parse message data as JSON:', err) + return + } + callback(data) + } + const unsubscribe = () => { + eventSource.close() + } + return unsubscribe + }, +} +``` + +This module is a wrapper around the [fetch][10] and [EventSource][11] APIs. The most important part is that it adds the JSON web token to the requests. + +### Home Page + +![home page screenshot][12] + +So, when the user login, the home page will be shown. Create a `static/pages/home-page.js` file with the following content: + +``` +import { getAuthUser } from '../auth.js' +import { avatar } from '../shared.js' + +export default function homePage() { + const authUser = getAuthUser() + const template = document.createElement('template') + template.innerHTML = ` +
+
+
+
+ `
+ const page = template.content
+ page.getElementById('logout-button').onclick = onLogoutClick
+ return page
+}
+
+function onLogoutClick() {
+ localStorage.clear()
+ location.reload()
+}
+```
+
+For this post, this is the only content we render on the home page. We show the current authenticated user and a logout button.
+
+When the user clicks to logout, we clear all inside localStorage and do a reload of the page.
+
+### Avatar
+
+That `avatar()` function is to show the user’s avatar. Because it’s used in more than one place, I moved it to a `shared.js` file. Create the file `static/shared.js` with the following content:
+
+```
+export function avatar(user) {
+ return user.avatarUrl === null
+ ? `
+ ${avatar(authUser)}
+ ${authUser.username}
+
+
+ Messenger
+ + Access with GitHub +` + +export default function accessPage() { + const page = template.content.cloneNode(true) + page.getElementById('login-form').onsubmit = onLoginSubmit + return page +} + +async function onLoginSubmit(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 payload = await login(input.value) + input.value = '' + + localStorage.setItem('auth_user', JSON.stringify(payload.authUser)) + localStorage.setItem('token', payload.token) + localStorage.setItem('expires_at', payload.expiresAt) + + location.reload() + } catch (err) { + alert(err.message) + setTimeout(() => { + input.focus() + }, 0) + } finally { + input.disabled = false + submitButton.disabled = false + } +} + +function login(username) { + return http.post('/api/login', { username }) +} +``` + +I added a login form. When the user submits the form. It does a POST requets to `/api/login` with the username. Saves all the data to localStorage and reloads the page. + +Remember to remove this form once you are done with the frontend. + +* * * + +That’s all for this post. In the next one, we’ll continue with the home page to add a form to start conversations and display a list with the latest ones. + +[Souce Code][14] + +-------------------------------------------------------------------------------- + +via: https://nicolasparada.netlify.com/posts/go-messenger-access-page/ + +作者：[Nicolás Parada][a] +选题：[lujun9972][b] +译者：[译者ID](https://github.com/译者ID) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://nicolasparada.netlify.com/ +[b]: https://github.com/lujun9972 +[1]: https://nicolasparada.netlify.com/posts/go-messenger-schema/ +[2]: https://nicolasparada.netlify.com/posts/go-messenger-oauth/ +[3]: https://nicolasparada.netlify.com/posts/go-messenger-conversations/ +[4]: https://nicolasparada.netlify.com/posts/go-messenger-messages/ +[5]: https://nicolasparada.netlify.com/posts/go-messenger-realtime-messages/ +[6]: https://nicolasparada.netlify.com/posts/go-messenger-dev-login/ +[7]: https://nicolasparada.netlify.com/posts/js-router/ +[8]: https://unpkg.com/@nicolasparada/router +[9]: https://nicolasparada.netlify.com/img/go-messenger-access-page/access-page.png +[10]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API +[11]: https://developer.mozilla.org/en-US/docs/Web/API/EventSource +[12]: https://nicolasparada.netlify.com/img/go-messenger-access-page/home-page.png +[13]: https://nicolasparada.netlify.com/img/go-messenger-access-page/access-page-v2.png +[14]: https://github.com/nicolasparada/go-messenger-demo diff --git a/sources/tech/20180719 Building a Messenger App- Home Page.md b/sources/tech/20180719 Building a Messenger App- Home Page.md new file mode 100644 index 0000000000..ddec2c180f --- /dev/null +++ b/sources/tech/20180719 Building a Messenger App- Home Page.md @@ -0,0 +1,255 @@ +[#]: collector: (lujun9972) +[#]: translator: ( ) +[#]: reviewer: ( ) +[#]: publisher: ( ) +[#]: url: ( ) +[#]: subject: (Building a Messenger App: Home Page) +[#]: via: (https://nicolasparada.netlify.com/posts/go-messenger-home-page/) +[#]: author: (Nicolás Parada https://nicolasparada.netlify.com/) + +Building a Messenger App: Home Page +====== + +This post is the 8th on a series: + + * [Part 1: Schema][1] + * [Part 2: OAuth][2] + * [Part 3: Conversations][3] + * [Part 4: Messages][4] + * [Part 5: Realtime Messages][5] + * [Part 6: Development Login][6] + * [Part 7: Access Page][7] + + + +Continuing the frontend, let’s finish the home page in this post. We’ll add a form to start conversations and a list with the latest ones. + +### Conversation Form + +![conversation form screenshot][8] + +In the `static/pages/home-page.js` file add some markup in the HTML view. + +``` + +``` + +Add that form just below the section in which we displayed the auth user and logout button. + +``` +page.getElementById('conversation-form').onsubmit = onConversationSubmit +``` + +Now we can listen to the “submit” event to create the conversation. + +``` +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 }) +} +``` + +On submit we do a POST request to `/api/conversations` with the username and redirect to the conversation page (for the next post). + +### Conversation List + +![conversation list screenshot][9] + +In the same file, we are going to make the `homePage()` function async to load the conversations first. + +``` +export default async function homePage() { + const conversations = await getConversations().catch(err => { + console.error(err) + return [] + }) + /*...*/ +} + +function getConversations() { + return http.get('/api/conversations') +} +``` + +Then, add a list in the markup to render conversations there. + +``` +
+ ${avatar(conversation.otherParticipant)}
+ ${conversation.otherParticipant.username}
+
+
+
+
+ `
+ return li
+}
+```
+
+Each conversation item contains a link to the conversation page and displays the other participant info and a preview of the last message. Also, you can use `.hasUnreadMessages` to add a class to the item and do some styling with CSS. Maybe a bolder font or accent the color.
+
+Note that we’re escaping the message content. That function comes from `static/shared.js`:
+
+```
+export function escapeHTML(str) {
+ return str
+ .replace(/&/g, '&')
+ .replace(//g, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''')
+}
+```
+
+That prevents displaying as HTML the message the user wrote. If the user happens to write something like:
+
+```
+
+```
+
+It would be very annoying because that script will be executed 😅
+So yeah, always remember to escape content from untrusted sources.
+
+### Messages Subscription
+
+Last but not least, I want to subscribe to the message stream here.
+
+```
+const unsubscribe = subscribeToMessages(onMessageArrive)
+page.addEventListener('disconnect', unsubscribe)
+```
+
+Add that line in the `homePage()` function.
+
+```
+function subscribeToMessages(cb) {
+ return http.subscribe('/api/messages', cb)
+}
+```
+
+The `subscribe()` function returns a function that once called it closes the underlying connection. That’s why I passed it to the “disconnect” event; so when the user leaves the page, the event stream will be closed.
+
+```
+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)
+}
+```
+
+Every time a new message arrives, we go and query for the conversation item in the DOM. If found, we add the `has-unread-messages` class to the item, and update the view. If not found, it means the message is from a new conversation created just now. We go and do a GET request to `/api/conversations/{conversationID}` to get the conversation in which the message was created and prepend it to the conversation list.
+
+* * *
+
+That covers the home page 😊
+On the next post we’ll code the conversation page.
+
+[Souce Code][10]
+
+--------------------------------------------------------------------------------
+
+via: https://nicolasparada.netlify.com/posts/go-messenger-home-page/
+
+作者：[Nicolás Parada][a]
+选题：[lujun9972][b]
+译者：[译者ID](https://github.com/译者ID)
+校对：[校对者ID](https://github.com/校对者ID)
+
+本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
+
+[a]: https://nicolasparada.netlify.com/
+[b]: https://github.com/lujun9972
+[1]: https://nicolasparada.netlify.com/posts/go-messenger-schema/
+[2]: https://nicolasparada.netlify.com/posts/go-messenger-oauth/
+[3]: https://nicolasparada.netlify.com/posts/go-messenger-conversations/
+[4]: https://nicolasparada.netlify.com/posts/go-messenger-messages/
+[5]: https://nicolasparada.netlify.com/posts/go-messenger-realtime-messages/
+[6]: https://nicolasparada.netlify.com/posts/go-messenger-dev-login/
+[7]: https://nicolasparada.netlify.com/posts/go-messenger-access-page/
+[8]: https://nicolasparada.netlify.com/img/go-messenger-home-page/conversation-form.png
+[9]: https://nicolasparada.netlify.com/img/go-messenger-home-page/conversation-list.png
+[10]: https://github.com/nicolasparada/go-messenger-demo
diff --git a/sources/tech/20180720 Building a Messenger App- Conversation Page.md b/sources/tech/20180720 Building a Messenger App- Conversation Page.md
new file mode 100644
index 0000000000..c721b48161
--- /dev/null
+++ b/sources/tech/20180720 Building a Messenger App- Conversation Page.md
@@ -0,0 +1,269 @@
+[#]: collector: (lujun9972)
+[#]: translator: ( )
+[#]: reviewer: ( )
+[#]: publisher: ( )
+[#]: url: ( )
+[#]: subject: (Building a Messenger App: Conversation Page)
+[#]: via: (https://nicolasparada.netlify.com/posts/go-messenger-conversation-page/)
+[#]: author: (Nicolás Parada https://nicolasparada.netlify.com/)
+
+Building a Messenger App: Conversation Page
+======
+
+This post is the 9th and last in a series:
+
+ * [Part 1: Schema][1]
+ * [Part 2: OAuth][2]
+ * [Part 3: Conversations][3]
+ * [Part 4: Messages][4]
+ * [Part 5: Realtime Messages][5]
+ * [Part 6: Development Login][6]
+ * [Part 7: Access Page][7]
+ * [Part 8: Home Page][8]
+
+
+
+In this post we’ll code the conversation page. This page is the chat between the two users. At the top we’ll show info about the other participant, below, a list of the latest messages and a message form at the bottom.
+
+### Chat heading
+
+![chat heading screenshot][9]
+
+Let’s start by creating the file `static/pages/conversation-page.js` with the following content:
+
+```
+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 = `
+ ${messageContent}
+ +
+ ← Back
+ ${avatar(conversation.otherParticipant)}
+ ${conversation.otherParticipant.username}
+
+
+
+ `
+ const page = template.content
+ return page
+}
+
+function getConversation(id) {
+ return http.get('/api/conversations/' + id)
+}
+```
+
+This page receives the conversation ID the router extracted from the URL.
+
+First it does a GET request to `/api/conversations/{conversationID}` to get info about the conversation. In case of error, we show it and redirect back to `/`. Then we render info about the other participant.
+
+### Conversation List
+
+![chat heading screenshot][10]
+
+We’ll fetch the latest messages too to display them.
+
+```
+let conversation, messages
+try {
+ [conversation, messages] = await Promise.all([
+ getConversation(conversationID),
+ getMessages(conversationID),
+ ])
+}
+```
+
+Update the `conversationPage()` function to fetch the messages too. We use `Promise.all()` to do both request at the same time.
+
+```
+function getMessages(conversationID) {
+ return http.get(`/api/conversations/${conversationID}/messages`)
+}
+```
+
+A GET request to `/api/conversations/{conversationID}/messages` gets the latest messages of the conversation.
+
+```
+${messageContent}
+ + ` + return li +} +``` + +Each message item displays the message content itself with its timestamp. Using `.mine` we can append a different class to the item so maybe you can show the message to the right. + +### Message Form + +![chat heading screenshot][11] + +``` + +``` + +Add that form to the current markup. + +``` +page.getElementById('message-form').onsubmit = messageSubmitter(conversationID) +``` + +Attach an event listener to the “submit” event. + +``` +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 }) +} +``` + +We make use of [partial application][12] to have the conversation ID in the “submit” event handler. It takes the message content from the input and does a POST request to `/api/conversations/{conversationID}/messages` with it. Then prepends the newly created message to the list. + +### Messages Subscription + +To make it realtime we’ll subscribe to the message stream in this page also. + +``` +page.addEventListener('disconnect', subscribeToMessages(messageArriver(conversationID))) +``` + +Add that line in the `conversationPage()` function. + +``` +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`) +} +``` + +We also make use of partial application to have the conversation ID here. +When a new message arrives, first we check if it’s from this conversation. If it is, we go a prepend a message item to the list and do a POST request to `/api/conversations/{conversationID}/read_messages` to updated the last time the participant read messages. + +* * * + +That concludes this series. The messenger app is now functional. + +~~I’ll add pagination on the conversation and message list, also user searching before sharing the source code. I’ll updated once it’s ready along with a hosted demo 👨💻~~ + +[Souce Code][13] • [Demo][14] + +-------------------------------------------------------------------------------- + +via: https://nicolasparada.netlify.com/posts/go-messenger-conversation-page/ + +作者：[Nicolás Parada][a] +选题：[lujun9972][b] +译者：[译者ID](https://github.com/译者ID) +校对：[校对者ID](https://github.com/校对者ID) + +本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出 + +[a]: https://nicolasparada.netlify.com/ +[b]: https://github.com/lujun9972 +[1]: https://nicolasparada.netlify.com/posts/go-messenger-schema/ +[2]: https://nicolasparada.netlify.com/posts/go-messenger-oauth/ +[3]: https://nicolasparada.netlify.com/posts/go-messenger-conversations/ +[4]: https://nicolasparada.netlify.com/posts/go-messenger-messages/ +[5]: https://nicolasparada.netlify.com/posts/go-messenger-realtime-messages/ +[6]: https://nicolasparada.netlify.com/posts/go-messenger-dev-login/ +[7]: https://nicolasparada.netlify.com/posts/go-messenger-access-page/ +[8]: https://nicolasparada.netlify.com/posts/go-messenger-home-page/ +[9]: https://nicolasparada.netlify.com/img/go-messenger-conversation-page/heading.png +[10]: https://nicolasparada.netlify.com/img/go-messenger-conversation-page/list.png +[11]: https://nicolasparada.netlify.com/img/go-messenger-conversation-page/form.png +[12]: https://en.wikipedia.org/wiki/Partial_application +[13]: https://github.com/nicolasparada/go-messenger-demo +[14]: https://go-messenger-demo.herokuapp.com/ diff --git a/sources/tech/20181228 2018- Year in review.md b/sources/tech/20181228 2018- Year in review.md deleted file mode 100644 index 91099492ac..0000000000 --- a/sources/tech/20181228 2018- Year in review.md +++ /dev/null @@ -1,173 +0,0 @@ -[#]: collector: (lujun9972) -[#]: translator: ( ) -[#]: reviewer: ( ) -[#]: publisher: ( ) -[#]: url: ( ) -[#]: subject: (2018: Year in review) -[#]: via: (https://jvns.ca/blog/2018/12/23/2018--year-in-review/) -[#]: author: (Julia Evans https://jvns.ca/) - -2018: Year in review -====== - -I wrote these in [2015][1] and [2016][2] and [2017][3] and it’s always interesting to look back at them, so here’s a summary of what went on in my side projects in 2018. - -### ruby profiler! - -At the beginning of this year I wrote [rbspy][4] (docs: