基于VUE多人聊天项目

joywek 发布于2019-08-02 10:12 / 3447人阅读

摘要：项目背景公司平台要做一个通讯系统，本来是来做的后面改前端来做，所以就用来做这个了。

项目背景

公司平台要做一个通讯系统，本来是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多人聊天

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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