基於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>`

項目截圖