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可看源碼。