回到项目 .. 再去处理一下服务端的广播信息 .. 打开 WsDemo 控制器 .. 在它的 constructor 里面，可以把 auth 解构出来 .. 因为我需要广播的信息里面带着登录用户的名字 ..

这里想使用 auth，还得在 wsKernel 里面添加两个中间件 .. 先打开 kernel.js ... 复制一下 Session .. 还有 AuthInit 这两个全局中间件 ..

然后打开 wsKernel.js ... 在它的 globalMiddleware 里面，把复制的那两个中间件粘贴过来 ..

另外还需要一个 namedMiddleware ... 回到 kernel.js ... 复制一下这个 auth ... 把它粘贴到 wsKernel 的 namedMiddleware 里面 ..

回到 WsDemo 控制器 .. 在这个 constructor 方法里面，可以再添加一个 this.user .. 让它等于 auth.user ... 或者 .. 可以是一个对象 .. 里面添加一个 username ... 名字是 Anonymous ... 如果用户没登录，它的用户名就会是这个 Anonymous ..

在编辑一下 onMessage ... const ... username ... 它的值是在 this.user 里面 ..

const content ... 从 message 里面把 content 拿出来 ..

重新再修改一下广播的信息 ... 一个对象 ... 里面添加一个 username ... 用户名 .. 还有一个 content .. 信息的具体的内容 ..

客户端

打开 ws.edge 这个视图 ... 在这个视图里面，找到一个信息项目的代码结构 ... 可以复制一下 ..

再打开 ws-demo.js ...

先在上面，添加一个 messages .. 找到页面上带 .messages 这个类的元素 ...

然后找到 subscribeToChannel 这个方法 .. 它里面，我们监听了 demo 频道上的 message 事件 .. 发生这个事件的时候 .. 可以在页面上显示一个新的信息项目 ..

用一下 messages ... append ... 一个字符模板 ... 把复制的信息项目的代码结构粘贴到里面 ..

在这里绑定一下信息里的用户名 ... message.username ...

这个元素上可以再添加一个 style 属性 ... 把 white-space 属性的值设置成 nowrap ...

再绑定输出一下信息里的具体的内容 ... message 里的 content ...

我希望信息窗口一直滚动到底部位置 ... 这样就会一直显示最新发的聊天信息 .. 用一下 messages.animate ... 一个对象 ... 添加一个 scrollTop ... 值可以是 messages.height ... 加上 messages.scrollTop 的值 ... 动画的时长设置成 slow ....

试验

下面我们再去试一下这个聊天功能 ... 这里我准备了三个浏览器窗口 ... 这个窗口用的是 王皓 这个用户登录的 ..

右边这个是用的小雪这个用户登录的 .. 还有一个没有登录 ...

先在左边这个窗口上输入一条信息 .. 按一下回车 .. 发送一下 ..

这样在所有浏览窗口上，都会收到这条信息 .. 下面我们再多发送几条信息 ...