基于VUE多人聊天项目

项目背景

公司平台要做一个通讯系统，本来是java 来做的后面改前端+PHP来做，所以就用VUE来做这个了。

github

github地址
新人求star

技术栈

vue-axios
vuex
websocket
sass
css3
等...

已经完成进度

• 整体结构已经完成
• 好友列表完成
• 好友添加拒绝完成
• 好友列表发起聊天完成
• 聊天页面点击聊天完成
• 发送聊天完成
• 点击聊天列表清除未读消息完成
• 实时消息通知完成
• 好友动态上下线完成
• 实时加好友通知完成
• 优化发送文字长度
• 聊天记录本地储存 如果页面不刷新 则不会丢失
• 与后端已经联调完成，一期已经上线

部分代码

添加好友代码

<div class="AddContacts" id="AddContacts">
 <navBar></navBar>
 <div class="AddContactsBox">
    <h3>添加好友</h3>
    <div class="AddContactsSerchBox">
        <input type="text" placeholder="请输入用户名/好友昵称..." id="serchInput" @focus="delStatus" @keydown.13="enter($event)"/>
        <span @click="serchBtn">搜索</span>
        <p v-if="status">{{statusMessage}}</p>
    </div>
    <div class="AddContactsSerchListBox">
       <h4>搜索结果 <a href="javascript:;" v-if="false"> <查看推荐好友</a></h4>
       <ul>
           <li v-for="(list,index) in data.list" :id="list.aid" :ueraid="list.aid" v-if="(list.status != 2) && (list.aid != isselfAid)" :aa="isselfAid">
               <div class="imgHd"><img :src="list.avatar"/></div>
               <div class="userInfo">
                  <p>{{list.nickname}} <i :class="list.sex" v-if="false"></i></p>
                  <span :class="list.status === 0  ? 'addFriends':'addProving'" @click="addFriend(list.status,list.aid,index)"><img src="../images/addFriends.png" v-if="list.status === 0"/>{{list.status === 0 ? '好友':'待验证'}}</span>
               </div>
           </li>
       </ul>
    </div>
 </div>

公共弹窗代码

<div class="RulePop"  id="RulePop">
 <div class="pop">
   <h3>提示<span class="close" @click="$store.commit('rulestate',{type:'',status:false,data:{}})"></span></h3>
   <div class="cont">
      <div :class="['contMessage',type]">
        <i></i>
        <span>{{type === 'del' ? '确定要移除 '+ delInfo.name +' 吗？' : message[type]}}</span>
      </div>
      <div class="box" v-show="type === 'del'">
        <a href="javascript:;" @click="delFriends()">确定</a>
        <a href="javascript:;" @click="$store.commit('rulestate',{type:'',status:false,data:{}})">取消</a>
      </div>
   </div>
 </div>
 <div class="divMask"></div>
</div>

好友模块相关代码

 <div class="Contacts" id="Contacts">
  <div class="ContactsBox"> 
  <div class="ChatSerch">
      <input type="text" class="ChatSerchInput" placeholder="搜索..."/>
  </div>
  <div class="ChatList clearfix">
    <div class="addContacts">
       <div class="title addContactsTitle titleB" :data-num="data[1].ApplyList.length">
         好友申请&nbsp;[{{data[1].ApplyList.length}}]
       </div>
       <div class="addContactsList overflow" v-if="data[1].ApplyList.length">
          <div class="ulwrapper">
            <ul>
               <li v-for="(list,index) in data[1].ApplyList" @click="mFadd(list.aid,list.id,true)" :useraid="list.aid" :userid="list.id">
                  <div class="userHd">
                    <div class="userHdImg"><img :src="list.avatar"/></div>
                  </div>
                  <div class="userInfo">
                     <div class="userInfoA">
                        <span class="name textHidden">{{list.nickname}}</span>
                     </div>
                     <div class="userInfoB">
                        <span class="oneMessage textHidden">申请加我为好友</span>
                     </div>
                  </div>
               </li>
            </ul>
          </div>
       </div>
    </div>
    <div class="myFriends">
       <div class="title myFriendsTitle titleB" >
         我的好友&nbsp;[{{data[0].onlineNum}}/{{data[0].friendsList.length}}]
       </div>
       <div class="myFriendsList overflow">
          <div class="ulwrapper">
            <ul>
               <li v-for="(list,index) in data[0].friendsList" :key="index" :useraid="list.aid" :class="['',{'offline':list.is_online == 0}]" @contextmenu="showMenu(index)" :state="list.is_online" @click="mFadd(list.aid,list.id,false)">
                  <vue-context-menu :contextMenuData="contextMenuData" :transferIndex="transferIndex" @savedata="savedata(list.aid,list.id,false)" @newdata="newdata(list)"></vue-context-menu>
                  <div class="userHd">
                    <div class="userHdImg"><img :src="list.avatar"/></div>
                    <span class="onlineState online_game" v-if="false"></span>
                  </div>
                  <div class="userInfo">
                     <div class="userInfoA">
                        <span class="name textHidden">{{list.nickname}}</span>
                     </div>
                  </div>
               </li>
            </ul>
          </div>
       </div>
    </div>
  </div>
 </div>
 <ContactsView :currentData.sync="currentData" :type.sync="type" :isDefault.sync="isDefault"></ContactsView>
 </div>

聊天模块相关代码


<div class="Chat clearfix" id="Chat">
<div class="ChatBox"> 
  <div class="ChatSerch">
      <input type="text" class="ChatSerchInput" placeholder="搜索..."/>
  </div>
  <div class="ChatList clearfix">
    <div class="ulwrapper">
      <ul>
         <li v-for="(list,index) in data.offlinelist" :class="[list.current === 'current' ? 'current':'']" :index="index"  :current= "list.current" @click="adclick(list,index)" :useraid="list.aid" :sessionid="list.session_id" :id="list.aid">
            <div :class="[list.is_online == 0 ? 'offline':'']">
                <div class="userHd">
                  <div class="userHdImg"><img :src="list.avatar"/></div>
                  <span class="onlineState online_game" v-if="list.playing_status != 0">
                    <em><i></i>正在玩{{list.playing_game_info.name}}</em>
                  </span>
                </div>
                <div class="userInfo">
                   <div class="userInfoA">
                      <span class="name textHidden">{{list.nickname}}</span>
                      <span class="userMessageNum textHidden" v-if="list.message_count > 0" :num="list.message_count">{{list.message_count > 99 ? '99+': list.message_count}}</span>
                   </div>
                   <div class="userInfoB">
                      <span class="oneMessage textHidden">{{list.last_message}}</span>
                      <span class="userInfoTime textHidden">{{list.last_send_at}}</span>
                   </div>
                </div>
            </div>
         </li>
      </ul>
    </div>
  </div>
</div>
<ChatView :chatData.sync="chatData" :isDefault.sync="isDefault" :sendMsg.sync="sendMsg"></ChatView>
</div>`

项目截图