基于VUE多人聊天項(xiàng)目

0xE7A38A 發(fā)布于2019-08-22 16:22 / 1374人閱讀

摘要：項(xiàng)目背景公司平臺(tái)要做一個(gè)通訊系統(tǒng)，本來是來做的后面改前端來做，所以就用來做這個(gè)了。

項(xiàng)目背景

公司平臺(tái)要做一個(gè)通訊系統(tǒng)，本來是java 來做的后面改前端+PHP來做，所以就用VUE來做這個(gè)了。

github

github地址
新人求star

技術(shù)棧

vue-axios
vuex
websocket
sass
css3
等...

已經(jīng)完成進(jìn)度

整體結(jié)構(gòu)已經(jīng)完成

好友列表完成

好友添加拒絕完成

好友列表發(fā)起聊天完成

聊天頁面點(diǎn)擊聊天完成

發(fā)送聊天完成

點(diǎn)擊聊天列表清除未讀消息完成

實(shí)時(shí)消息通知完成

好友動(dòng)態(tài)上下線完成

實(shí)時(shí)加好友通知完成

優(yōu)化發(fā)送文字長度

聊天記錄本地儲(chǔ)存如果頁面不刷新則不會(huì)丟失

與后端已經(jīng)聯(lián)調(diào)完成，一期已經(jīng)上線

部分代碼

添加好友代碼


 
 
    添加好友
    
        
        搜索
        {{statusMessage}}
    
    
       搜索結(jié)果  <查看推薦好友
       
           
               
               
                  {{list.nickname}} 
                  {{list.status === 0 ? "好友":"待驗(yàn)證"}}

公共彈窗代碼


 
   提示
   
      
        
        {{type === "del" ? "確定要移除 "+ delInfo.name +" 嗎？" : message[type]}}
      
      
        確定
        取消

好友模塊相關(guān)代碼

 
   
  
      
  
  
    
       
         好友申請(qǐng) [{{data[1].ApplyList.length}}]
       
       
          
            
               
                  
                    
                  
                  
                     
                        {{list.nickname}}
                     
                     
                        申請(qǐng)加我為好友
                     
                  
               
            
          
       
    
    
       
         我的好友 [{{data[0].onlineNum}}/{{data[0].friendsList.length}}]
       
       
          
            
               
                  
                  
                    
                    
                  
                  
                     
                        {{list.nickname}}

聊天模塊相關(guān)代碼



 
  
      
  
  
    
      
         
            
                
                  
                  
                    正在玩{{list.playing_game_info.name}}
                  
                
                
                   
                      {{list.nickname}}
                      {{list.message_count > 99 ? "99+": list.message_count}}
                   
                   
                      {{list.last_message}}
                      {{list.last_send_at}}
                   
                
            
         
      
    
  


`