基于VUE多人聊天項目

joywek 發布于2019-08-02 10:12 / 3448人閱讀

摘要：項目背景公司平臺要做一個通訊系統，本來是來做的后面改前端來做，所以就用來做這個了。

項目背景

公司平臺要做一個通訊系統，本來是java 來做的后面改前端+PHP來做，所以就用VUE來做這個了。

github

github地址
新人求star

技術棧

vue-axios
vuex
websocket
sass
css3
等...

已經完成進度

整體結構已經完成

好友列表完成

好友添加拒絕完成

好友列表發起聊天完成

聊天頁面點擊聊天完成

發送聊天完成

點擊聊天列表清除未讀消息完成

實時消息通知完成

好友動態上下線完成

實時加好友通知完成

優化發送文字長度

聊天記錄本地儲存如果頁面不刷新則不會丟失

與后端已經聯調完成，一期已經上線

部分代碼

添加好友代碼


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

公共彈窗代碼


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

好友模塊相關代碼

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

聊天模塊相關代碼



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


`

項目截圖

GPU云服務器云服務器基于webrtc的多人視頻聊天服務實例多人語音聊天 webrtc多人聊天 rtc多人聊天

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52199.html

基于VUE多人聊天項目

摘要：項目背景公司平臺要做一個通訊系統，本來是來做的后面改前端來做，所以就用來做這個了。項目背景公司平臺要做一個通訊系統，本來是java 來做的后面改前端+PHP來做，所以就用VUE來做這個了。 github github地址新人求star 技術棧 vue-axios vuex websocket sass css3 等... 已經完成進度整體結構已經完成 ...

0xE7A38A 2019-08-22 16:22 評論0 收藏0
用NodeJS打造多人在線聊天室（NodeJS & SocketIO & Expre

摘要：技術棧項目背景這個項目主要是為了玩玩，項目的方向大概是做出類似的在線聊天系統。項目使用進行部署和管理，功能在不斷的迭代開發中。首頁用戶列表用戶中心注冊登陸注銷用戶資料指定聊天室開始安裝使用之前，請在中修改的安裝路徑。技術棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項目背景這個項目主要是為了玩玩NodeJS，項目的方向大概...

codecook 2019-08-20 16:56 評論0 收藏0
用NodeJS打造多人在線聊天室（NodeJS & SocketIO & Expre

摘要：技術棧項目背景這個項目主要是為了玩玩，項目的方向大概是做出類似的在線聊天系統。項目使用進行部署和管理，功能在不斷的迭代開發中。首頁用戶列表用戶中心注冊登陸注銷用戶資料指定聊天室開始安裝使用之前，請在中修改的安裝路徑。技術棧：NodeJS & SocketIO & Express & EJS & MongoDB & Gulp 項目背景這個項目主要是為了玩玩NodeJS，項目的方向大概...

Astrian 2019-06-26 17:17 評論0 收藏0
Vue2 全家桶仿微信App 項目，支持多人在線聊天和機器人聊天

摘要：前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用，整個項目包含個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。前言這個項目是利用工作之余寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續頁面還是開發中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用，利用socket.io實現實時聊...

iliyaku 2019-08-20 17:21 評論0 收藏0
Vue2 + Nodejs + WebSocket 完成你畫我猜多人在線游戲

摘要：使用即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用實現了你畫我猜這個游戲。可以修改畫筆顏色，粗細，進行撤銷，恢復，清空等操作。第一個猜完后，游戲時間縮短為秒。使用 websocket + vue2 即可完成一個很有意思的在線游戲作品。你畫我猜，相信大家對這個游戲都很熟悉。我用Vue2 + mint-ui + nodejs + websocket ...

XanaHopper 2019-08-20 14:29 評論0 收藏0