websocket搭建简单的网页聊天室框架【续1】

聊天室的连接已经失效！由于我部署了一个新的网站，欢迎你们访问mytodo.vip

---

在websocket搭建简单的网页聊天室框架这篇文章中，咱们简单实现了一个websocket聊天室，我又花了一些时间写了个稍微复杂一点点的，你们能够经过http://180.76.50.50/进入聊天室或访问GitHub。

---

进入这个聊天室后，输入名字和内容就能够发送消息了，其余全部链接了的客户端都能收到消息，而且支持头像显示（从设定的9张图片里选择），背景色区分是本身发的内容仍是别人发的内容（后端经过IP判断）。截图以下：

欢迎你们访问~

---

简单再说一下一些细节的及其实现：
1.当名字和内容有一个为空时，没法发送信息，对应的文本框outline颜色为红色（有内容则为蓝色），点击发送时焦点会回到空的文本框中，发送的信息字数超过200时，字数统计处颜色变红，且发送按钮变成disabled状态，这部分是经过AngularJS实现的。

2.点击姓名文本框左边的小头像弹出头像选择框如图，实际上这是一个隐藏了的<div>元素，点击图片后就设置为显示，点击对应的图片就设置了头像，也是经过AngularJS实现的。

3.本例中，发送一条信息后，服务器接受到了信息，并非经过websocket返回信息内容给全部客户端，而是服务器收到并保存了信息以后，发送一条不带数据的websocket消息给全部客户端，客户端收到这条消息再发送普通的http请求给服务器，要求返还最近一条保存的信息，服务器经过该http请求的IP判断客户端是不是发送信息的那个客户端，并给信息加上status属性（self或other)返回给客户端，客户端浏览器渲染时根据status给信息内容添加不一样的背景（绿色或灰色）。

---

2018年3月19日，增长回车发送消息的功能，并对js代码进行了压缩，GitHub可看源码。