擊右上方紅色按鈕關注“web秀”，讓你真正秀起來

前言

感謝你再次點開了我，只能說明你是喜歡我的，對不對？哈哈，開個玩笑。

今天主要是把之前的聊天室界面美化一下，不至于太難看，同時也對代碼做了一些優化。具體細節請看詳細內容。

并且可以線上體驗了：Web IM - Nodejs + WebSocket + Vue聊天室

如果您還沒有看過之前的文字，請點擊下方鏈接查看！ 推薦文章：

《Nodejs + WebSocket簡單介紹及示例 - 第一章》

《Nodejs + WebSocket + Vue 實現多人聊天室WebIM功能 - 第二章》

《Nodejs + WebSocket + Vue 一對一、一對多聊天室 - 第三章》

《Node + WebSocket + Vue 一對一、一對多聊天室消息已讀未讀 - 第四章》

《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是用戶下線。

快速預覽效果

源碼地址：GitHub - javanf/web-im: Node + WebSocket + Vue WebIM 一對一、一對多 聊天

體驗地址：Web IM - Nodejs + WebSocket + Vue聊天室

公告

喜歡小編的點擊關注，了解更多知識！

源碼地址，可以點擊下方“了解更多”獲取！