下面可以去准备一个演示 Websocket 功能用的页面 .. 先打开应用的路由 ... start .. routes.js ... 找个地方添加一条新的路由 ... 用一下 Route .. get .. 地址是 demo/ws ...

用一个回调，作为这个路由的处理方法 ... 方法可以渲染一个视图 .. 需要用到 view .. 先把它从 context 参数里解构出来 .. 然后让方法 return 一个 view.render .. 视图可以是 demo.ws ..

视图

再去创建需要的这个视图 .. 在 resources .. views .. demo 的下面，新建一个视图 .. 名字是 ws.edge ...

设置一下视图使用的布局 .. 用一下 layouts 下面的 main 这个布局 ... 这个布局里面有个 content 区域 ... 再设置一下这个区域里的内容 ..

调整一下编辑器的窗口的宽度 ..

回到浏览器 ... 现在访问的是用 browser-sync 创建的服务器，它会实时刷新项目的变化 .. 访问一下 demo/ws 这个页面 .. 再调整一下浏览器窗口的尺寸 ...

然后回到编辑器 ... 继续设置 content 区域里的内容 ...

一个 div .. 加上一个 row，添加一排内容 .. 里面包装一个 div ，加上 col-md-6，占用6 个网格的宽度 .. mx-auto ， 让它在页面上居中显示 ..

它里面先放一个大标题 .. 标题元素上添加一个 text-center 文字居中，text-uppercase ，文字大写 .. py-5 ，上下留点内边距 ..

标题文字可以有点变化，先用一个 span .. 添加一个 style 属性 .. 把 letter-spacing 设置成 13px .. 再让font-weight 等于 100 .. 文字是 Web ... 接着再用一个 span ... 一个 style 属性 .. 把 font-weight 设置成 300 ... 里面的文字是 socket ..

这个标题里面再添加一个标签 .. 一个 span .. 上面加上 badge .. badge-primary badge.pill ，再把 position 设置成 absolute .. 然后再用一个 style 属性 .. 把字号设置成 14px .. 标签上的文字是 Demo ..

状态标签

标题的下面是一个表示 Websocket 连接状态的标签 .. 可以用一个 div .. 上面加上 btn btn-light btn-sm ，再添加一个 connection-status ，等会在自定义脚本里面，会用到这个类定位到这个元素 ..

标签上的文字是 Disconnected .. 下面是个小图标 .. 一个 span ，加上 text-muted .. ml-1 ..

添加一个小图标 ... 小 i 标签，加上 fas .. fa-circle ..

页面上的这个表示连接状态的小标签上的文字还有里面的小图标的颜色，等会要使用 JavaScript ，根据连接的状态动态的修改一下它们 ..

为了定位到对应的元素，我们可以再去设置一下 .. 在文字的周围添加一组 span 标签 ... 加上一个 text 这个类 .. 用它包装一下标签上的文字 ..

然后在小图标的 span 标签上面，再添加一个 icon ...

最后再设置一下页面的大标题 .. 用一个 @set 标签 .. 设置一下 pageTitle ... 值就是页面的标题 ... 比如 Websocket demo ...