Node+WebSocket+Vue聊天室: 界面美化，代碼優化

客戶端HTML代碼優化

頁面先分爲左右佈局，然後左/右裏面再分爲上中下佈局。

很自然，我們想到了flex佈局，Flex是Flexible Box的縮寫，意爲”彈性佈局”，用來爲盒狀模型提供最大的靈活性。

...
<div class="web-im">
  <div class="left">
    <div class="aside content">
      <div class="header">
       ...
      </div>
      <div class="body user-list">
        ...
      </div>
      <div class="footer">
        ...
      </div>
    </div>
  </div>
  <div class="right content">
    <div class="header">...</div>
    <div class="body im-record" id="im-record">
      ...
    </div>
    <div class="footer im-input">
      ...
    </div>
  </div>
</div>
...

css樣式是用stylus書寫的，有些初學的小夥伴應該有點點不是很明白，但是大致能懂，就是把嵌套的書寫，使其看起來更容易閱讀、維護。

如果對flex、和stylus不是很明白的小夥伴，可以留言區留言，後期看情況出更詳細的教程，這裏就不囉嗦了。

.web-im
  display flex
.left
  width 220px
.right
    flex 1
.content
  display: flex;
  flex-direction: row;
  flex: 1;
  box-sizing: border-box;
  min-width: 0;
  flex-direction: column;
  .header
    box-shadow 1px -1px 2px 2px #eee
    line-height 40px
    height 40px
    font-size 24px
    z-index 10
    background #fff
  .body
    flex 1
    overflow-y auto
    box-shadow 1px 1px 1px #eee
  .footer
    box-shadow 1px 1px 8px #eee
    height 60px

WebSocket客戶端JS

我們主要研究變的地方，沒有變的通過…表示。同時，如果您想看完整代碼，可以去文章最下方“瞭解更多”，來獲取源碼查看。

...
export default {
  ...
  mounted() {
    ...
    // 監聽頁面刷新，關閉事件，退出聊天室
    window.onbeforeunload = function (e) {
      vm.socket.send(JSON.stringify({
        uid: vm.uid,
        type: 2,
        nickname: vm.nickname,
        bridge: []
      }));
    }
  },
  computed: {
    // 當前展示的消息列表
    currentMessage() {
      let vm = this;
      let data = vm.messageList.filter(item=>{
        if(item.type === 1) {
          return item;
        } else if(this.groupId) {
          return item.groupId === this.groupId
        } else if(item.bridge.length){
          return item.bridge.sort().join(',') == vm.bridge.sort().join(',')
        }
      })
      data.map(item=>{
        item.status = 0
        return item;
      })
      return data;
    },
    // 當前羣組列表
    currentGroups() {
      let vm = this;
      vm.groups.map(group=>{
        // 找出羣組對應未讀消息
        group.unread = this.messageList.filter(item=>{
          return item.groupId === group.id && item.status === 1
        }).length
        return group;
      })
      return vm.groups;
    },
    // 羣組列表是否有未讀消息
    groupsUnRead(){
      return this.messageList.some(item=>{
        return item.groupId && item.status === 1
      })
    },
    // 聯繫人列表是否有未讀消息
    usersUnRead(){
      return this.messageList.some(item=>{
        return item.bridge.length && item.status === 1
      })
    },
    // 當前聯繫人列表
    currentUserList() {
      let vm = this;
      vm.users.map(user=>{
        // 找出聯繫人對應未讀消息
        user.unread = this.messageList.filter(item=>{
          return item.bridge.length && item.uid === user.uid && item.status === 1
        }).length
        return user;
      })
      return vm.users;
    }
  },
  methods: {
    ...
    conWebSocket(){
      let vm = this;
      if(window.WebSocket){
        ...
        socket.onmessage = function(e){
          ...
          // 消息列表滾動條始終在最底部
          vm.$nextTick(function(){
            var div = document.getElementById('im-record');
            div.scrollTop = div.scrollHeight;
          })
        }   
      }
    }
    ...
  }
}

這次代碼優化，主要是在計算屬性上面做了大的調整。之前都是用方法來獲取未讀已讀等，現在直接計算屬性先一步計算，然後渲染到頁面。

WebSocket服務端

...
// 註銷
case 2:
  delete conns[''+obj.uid+''];
  users.map((item, index)=>{
    if(item.uid === obj.uid){
      item.status = 0;
    }
    return item;
  })
  boardcast({
    type: 1,
    date: moment().format('YYYY-MM-DD HH:mm:ss'),
    msg: obj.nickname+'退出了聊天室',
    users: users,
    groups: groups,
    uid: obj.uid,
    nickname: obj.nickname,
    bridge: []
  });
  break;
...

服務端主要增加了一個註銷功能，用戶下線。
同時，之前type=2是發送消息，現在改成了100是發送消息，2是用戶下線。

快速預覽效果

最後，給大家推薦一個前端學習進階內推交流羣685910553（前端資料分享），不管你在地球哪個方位，
不管你參加工作幾年都歡迎你的入駐！（羣內會定期免費提供一些羣主收藏的免費學習書籍資料以及整理好的面試題和答案文檔！）

如果您對這個文章有任何異議，那麼請在文章評論處寫上你的評論。

如果您覺得這個文章有意思，那麼請分享並轉發，或者也可以關注一下表示您對我們文章的認可與鼓勵。

願大家都能在編程這條路，越走越遠。