客户端

技能分享网站的客户端部分由三个文件组成：微型 HTML 页面、样式表以及 JavaScript 文件。

HTML

在网络服务器提供文件服务时，有一种广为使用的约定是：当请求直接访问与目录对应的路径时，返回名为index.html的文件。我们使用的文件服务模块ecstatic就支持这种约定。当请求路径为/时，服务器会搜索文件./public/index.html（./public是我们赋予的根目录），若文件存在则返回文件。

因此，若我们希望浏览器指向我们服务器时展示某个特定页面，我们将其放在public/index.html中。这就是我们的index文件。

  1. <!doctype html>
  2. <meta charset="utf-8">
  3. <title>Skill Sharing</title>
  4. <link rel="stylesheet" href="skillsharing.css">
  6. <h1>Skill Sharing</h1>
  8. <script src="skillsharing_client.js"></script>

它定义了文档标题并包含一个样式表，除了其它东西，它定义了几种样式，确保对话之间有一定的空间。

最后，它在页面顶部添加标题，并加载包含客户端应用的脚本。

动作

应用状态由对话列表和用户名称组成，我们将它存储在一个{talks, user}对象中。 我们不允许用户界面直接操作状态或发送 HTTP 请求。 反之，它可能会触发动作，它描述用户正在尝试做什么。

  1. function handleAction(state, action) {
  2.   if (action.type == "setUser") {
  3.     localStorage.setItem("userName", action.user);
  4.     return Object.assign({}, state, {user: action.user});
  5.   } else if (action.type == "setTalks") {
  6.     return Object.assign({}, state, {talks: action.talks});
  7.   } else if (action.type == "newTalk") {
  8.     fetchOK(talkURL(action.title), {
  9.       method: "PUT",
  10.       headers: {"Content-Type": "application/json"},
  11.       body: JSON.stringify({
  12.         presenter: state.user,
  13.         summary: action.summary
  14.       })
  15.     }).catch(reportError);
  16.   } else if (action.type == "deleteTalk") {
  17.     fetchOK(talkURL(action.talk), {method: "DELETE"})
  18.       .catch(reportError);
  19.   } else if (action.type == "newComment") {
  20.     fetchOK(talkURL(action.talk) + "/comments", {
  21.       method: "POST",
  22.       headers: {"Content-Type": "application/json"},
  23.       body: JSON.stringify({
  24.         author: state.user,
  25.         message: action.message
  26.       })
  27.     }).catch(reportError);
  28.   }
  29.   return state;
  30. }

我们将用户的名字存储在localStorage中，以便在页面加载时恢复。

需要涉及服务器的操作使用fetch，将网络请求发送到前面描述的 HTTP 接口。 我们使用包装函数fetchOK，它确保当服务器返回错误代码时，拒绝返回的Promise。

  1. function fetchOK(url, options) {
  2.   return fetch(url, options).then(response => {
  3.     if (response.status < 400) return response;
  4.     else throw new Error(response.statusText);
  5.   });
  6. }

这个辅助函数用于为某个对话，使用给定标题建立 URL。

  1. function talkURL(title) {
  2.   return "talks/" + encodeURIComponent(title);
  3. }

当请求失败时，我们不希望我们的页面丝毫不变，不给予任何提示。因此我们定义一个函数，名为reportError，至少在发生错误时向用户展示一个对话框。

  1. function reportError(error) {
  2.   alert(String(error));
  3. }

渲染组件

我们将使用一个方法，类似于我们在第十九章中所见，将应用拆分为组件。 但由于某些组件不需要更新，或者在更新时总是完全重新绘制，所以我们不将它们定义为类，而是直接返回 DOM 节点的函数。 例如，下面是一个组件，显示用户可以向它输入名称的字段的：

  1. function renderUserField(name, dispatch) {
  2.   return elt("label", {}, "Your name: ", elt("input", {
  3.     type: "text",
  4.     value: name,
  5.     onchange(event) {
  6.       dispatch({type: "setUser", user: event.target.value});
  7.     }
  8.   }));
  9. }

用于构建 DOM 元素的elt函数是我们在第十九章中使用的函数。

类似的函数用于渲染对话，包括评论列表和添加新评论的表单。

  1. function renderTalk(talk, dispatch) {
  2.   return elt(
  3.     "section", {className: "talk"},
  4.     elt("h2", null, talk.title, " ", elt("button", {
  5.       type: "button",
  6.       onclick() {
  7.         dispatch({type: "deleteTalk", talk: talk.title});
  8.       }
  9.     }, "Delete")),
  10.     elt("div", null, "by ",
  11.         elt("strong", null, talk.presenter)),
  12.     elt("p", null, talk.summary),
  13.     ...talk.comments.map(renderComment),
  14.     elt("form", {
  15.       onsubmit(event) {
  16.         event.preventDefault();
  17.         let form = event.target;
  18.         dispatch({type: "newComment",
  19.                   talk: talk.title,
  20.                   message: form.elements.comment.value});
  21.         form.reset();
  22.       }
  23.     }, elt("input", {type: "text", name: "comment"}), " ",
  24.        elt("button", {type: "submit"}, "Add comment")));
  25. }

submit事件处理器调用form.reset，在创建"newComment"动作后清除表单的内容。

在创建适度复杂的 DOM 片段时，这种编程风格开始显得相当混乱。 有一个广泛使用的（非标准的）JavaScript 扩展叫做 JSX，它允许你直接在你的脚本中编写 HTML，这可以使这样的代码更漂亮（取决于你认为漂亮是什么）。 在实际运行这种代码之前，必须在脚本上运行一个程序，将伪 HTML 转换为 JavaScript 函数调用，就像我们在这里用的东西。

评论更容易渲染。

  1. function renderComment(comment) {
  2.   return elt("p", {className: "comment"},
  3.              elt("strong", null, comment.author),
  4.              ": ", comment.message);
  5. }

最后，用户可以使用表单创建新对话，它渲染为这样。

  1. function renderTalkForm(dispatch) {
  2.   let title = elt("input", {type: "text"});
  3.   let summary = elt("input", {type: "text"});
  4.   return elt("form", {
  5.     onsubmit(event) {
  6.       event.preventDefault();
  7.       dispatch({type: "newTalk",
  8.                 title: title.value,
  9.                 summary: summary.value});
  10.       event.target.reset();
  11.     }
  12.   }, elt("h3", null, "Submit a Talk"),
  13.      elt("label", null, "Title: ", title),
  14.      elt("label", null, "Summary: ", summary),
  15.      elt("button", {type: "submit"}, "Submit"));
  16. }

轮询

为了启动应用，我们需要对话的当前列表。 由于初始加载与长轮询过程密切相关 — 轮询时必须使用来自加载的ETag — 我们将编写一个函数来不断轮询服务器的/ talks，并且在新的对话集可用时，调用回调函数。

  1. async function pollTalks(update) {
  2.   let tag = undefined;
  3.   for (;;) {
  4.     let response;
  5.     try {
  6.       response = await fetchOK("/talks", {
  7.         headers: tag && {"If-None-Match": tag,
  8.                          "Prefer": "wait=90"}
  9.       });
  10.     } catch (e) {
  11.       console.log("Request failed: " + e);
  12.       await new Promise(resolve => setTimeout(resolve, 500));
  13.       continue;
  14.     }
  15.     if (response.status == 304) continue;
  16.     tag = response.headers.get("ETag");
  17.     update(await response.json());
  18.   }
  19. }

这是一个async函数，因此循环和等待请求更容易。 它运行一个无限循环，每次迭代中，通常检索对话列表。或者，如果这不是第一个请求，则带有使其成为长轮询请求的协议头。

当请求失败时，函数会等待一会儿，然后再次尝试。 这样，如果你的网络连接断了一段时间然后又恢复，应用可以恢复并继续更新。 通过setTimeout解析的Promise，是强制async函数等待的方法。

当服务器回复 304 响应时，这意味着长轮询请求超时，所以函数应该立即启动下一个请求。 如果响应是普通的 200 响应，它的正文将当做 JSON 而读取并传递给回调函数，并且它的ETag协议头的值为下一次迭代而存储。

应用

以下组件将整个用户界面结合在一起。

  1. class SkillShareApp {
  2.   constructor(state, dispatch) {
  3.     this.dispatch = dispatch;
  4.     this.talkDOM = elt("div", {className: "talks"});
  5.     this.dom = elt("div", null,
  6.                    renderUserField(state.user, dispatch),
  7.                    this.talkDOM,
  8.                    renderTalkForm(dispatch));
  9.     this.setState(state);
  10.   }
  12.   setState(state) {
  13.     if (state.talks != this.talks) {
  14.       this.talkDOM.textContent = "";
  15.       for (let talk of state.talks) {
  16.         this.talkDOM.appendChild(
  17.           renderTalk(talk, this.dispatch));
  18.       }
  19.       this.talks = state.talks;
  20.     }
  21.   }
  22. }

当对话改变时，这个组件重新绘制所有这些组件。 这很简单，但也是浪费。 我们将在练习中回顾一下。

我们可以像这样启动应用：

  1. function runApp() {
  2.   let user = localStorage.getItem("userName") || "Anon";
  3.   let state, app;
  4.   function dispatch(action) {
  5.     state = handleAction(state, action);
  6.     app.setState(state);
  7.   }
  9.   pollTalks(talks => {
  10.     if (!app) {
  11.       state = {user, talks};
  12.       app = new SkillShareApp(state, dispatch);
  13.       document.body.appendChild(app.dom);
  14.     } else {
  15.       dispatch({type: "setTalks", talks});
  16.     }
  17.   }).catch(reportError);
  18. }
  20. runApp();

若你执行服务器并同时为localhost:8000/打开两个浏览器窗口，你可以看到在一个窗口中执行动作时，另一个窗口中会立即做出反应。