最近在項目中實現了一個實時聊天的功能，在這總結一下心得。首先我用到了vue全家桶和websocket，vue是什么我就不說了。不知道的同學自行百度。我先說一下websoket。
一、websocket
1、什么是websoket？
websoket是一種網絡通信協議，websoket是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。瀏覽器和服務器只需要完成一次握手，兩者之間就直接可以創建持久性的連接，並進行雙向數據傳輸。
2、websocket事件
| open | Socket.onopen | 連接建立時觸發 |
| message | Socket.onmessage | 客戶端接收服務端數據時觸發 |
| error | Socket.onerror | 通信發生錯誤時觸發 |
| close | Socket.onclose | 連接關閉時觸發 |
3、websocket方法
| Socket.send() | 使用連接發送數據 |
| Socket.close() | 關閉連接 |
二、實現思路
1、首先將好友列表和聊天框兩個組件用keep-alive包裹起來，保證當用戶點擊好友跳轉到聊天框時websoket服務不會被斷開。
2、當好友列表頁面加載時會服務器發送一個請求，用來與服務器連接websocket服務。
3、當websocket服務創建成功后，就可以使用onmessage事件，用來獲取所需要的信息，數據會通過event.data返回，當我們拿到這個數據時就可以進行渲染好友列表了。代碼如下：
4 、點擊切換到聊天框時，必須保證websocket服務不能斷開連接。並且獲取聊天記錄需要想后端發送一個websocket請求。因為必須保證在發送消息時連接的websocket服務和此時創建的websocket是同一個，哪怕在你發送消息時重新創建websocket服務，地址什么都一樣，也不行，所以在這里創建websocket服務是我用了一個全局變量（暫時還沒想到什么好辦法，如果大家有好方法歡迎分享），這樣就可以獲取到數據了，然后我們可以通過處理數據來得到自己想要顯示在頁面上的數據。代碼如下：
5、發送信息時只要通過send方法將輸入框內容發送給后端就可以了。代碼如下：
6、發送完消息后讓滾動條始終保持在頁面的最底部
