<!-- 一條聊天記錄  -->
<view class="chat-item" v-for="(item,index) in msg" :key="item.id">
    <!-- 時間  -->
	<view class="time" v-if="item.isShowTime">{{handleTime(item.time)}}</view>
	<!-- b - 對方的消息  -->
	<view class="content-wrapper-left" v-if="item.fromId !== uid" >
        <!-- 頭像 -->
		<image :src="item.imgUrl" class="avator avator-left"></image>
		<!-- 0 - 文字 -->
		<view class="chat-content-left" v-if="item.types === '0'">......</view>
		<!-- 1 - 圖片 -->
		<view class="chat-image-left" v-if="item.types === '1'">......</view>
		<!-- 2 - 語音 -->
		<view class="chat-voice-left" v-if="item.types === '2'">......</view>
		<!-- 3 - 位置信息 -->
		<view class="chat-site-left" v-if="item.types === '3'">......</view>	
	</view>
	<!--a - 自己的信息-->
	<view class="content-wrapper-right" v-if="item.fromId === uid">
		<!-- 0 - 文字 -->
		<view class="chat-content-right" v-if="item.types === '0'">......</view>
		<!-- 1 - 圖片 -->
		<view class="chat-image-right" v-if="item.types === '1'">......</view>
		<!-- 2 - 語音 -->
		<view class="chat-voice-right" v-if="item.types === '2'">......</view>
		<!-- 3 - 位置信息 -->
		<view class="chat-site chat-site-right">......</view>
		<!-- 頭像 -->
		<image :src="item.imgUrl" class="avator avator-right"></image>
	</view>
</view>

<scroll-view class="chat-main" 
 scroll-y="true" 
 :scroll-into-view="scrollToView"
 :scroll-with-animation="needScrollAnimation"
 :style="{height:paddingBottom}">
    <!-- 聊天記錄item --->
    <view class="chat-item" v-for="(item,index) in msg" :id="'msg' + item.id" :key="item.id" >
        ......
    </view>
</scroll-view>

this.$nextTick(function(){
	this.scrollToView = 'msg' + this.msg[this.msg.length - 1].id;
});

<view class="more-view" v-show="showMore">
	<swiper :indicator-dots="true">
		<swiper-item v-for="(swiper,index1) in moreArr" :key="index1">
			<view class="swiper-item" v-for="(list,index2) in swiper" :key="index2">
				<view class="item-wrapper" v-for="item in list" :key="item.id">
					<view class="pic-wrapper" :class="{hidePicWrapper:!item.pic}">
						<image :src="item.pic" @tap="handleMoreFunction(item.flag)"></image>
					</view>
					<view class="text-wrapper">{{item.text}}</view>
				</view>
			</view>
		</swiper-item>
	</swiper>
</view>
 
......
 
// 獲取指定選擇器元素的高度
getHeight(classNa){
	setTimeout(() => {
		const query = uni.createSelectorQuery().in(this);
		query.select(classNa).boundingClientRect(data => {
			this.$emit('heightChange',data.height);
		}).exec();
	},10);
},
// 切換菜單欄顯示隱藏
changeMode(){	
	if(this.showMore){
		this.showMore = !this.showMore;
		this.getHeight('.more-view');
	}
},
 

<scroll-view class="chat-main" 
 scroll-y="true" 
 :scroll-into-view="scrollToView"
 :scroll-with-animation="needScrollAnimation"
 @scrolltoupper="debounce"
 :style="{height:scrollViewHeight}"
></scroll-view>
 
...... 
 
// 彈出菜單欄修改scroll-view高度
handleHeightChange(height){
	this.scrollViewHeight= `calc(100vh - 208rpx - ${height}px - ${this.statusBarHeight}px)`;
	this.scrollToView = '';
	this.$nextTick(function(){		
		this.scrollToView = 'msg' + this.msg[this.msg.length - 1].id;
	})
}

const ws = new WebSocket('ws:localhost:8000');

;((doc,WebSocket) => {
 
    const msg = doc.querySelector('#msg');  // 獲取輸入框，需要發(fā)送的消息
    const send = doc.querySelector('#send');  // 發(fā)送按鈕
 
    // 創(chuàng)建websocket實例
    const ws = new WebSocket('ws:localhost:8000');
    
    // 初始化
    const init = () => {
        bindEvent();
    }
    
    // 綁定事件
    function bindEvent () {
        send.addEventListener('click',handleSendBtnClick,false);
        ws.addEventListener('open',handleOpen,false);
        ws.addEventListener('close',handleClose,false);
        ws.addEventListener('error',handleError,false);
        ws.addEventListener('message',handleMessage,false);
 
    }
 
    function handleSendBtnClick () {
        const message = msg.value;
        
        // 將數(shù)據(jù)發(fā)送給服務(wù)器
        ws.send(JSON.stringify({
            message:message
        }));
 
        msg.value = '';
    }
 
    function handleOpen () {
        console.log('open');
        // 當(dāng)連接建立時，一般做一些頁面初始化操作
    }
    
    function handleClose () {
        console.log('close');
        // 當(dāng)連接關(guān)閉時
    }
 
    function handleError () {
        console.log('error');
        // 當(dāng)連接出現(xiàn)異常時
    }
 
    function handleMessage (e) {
        // 在這里獲取后端廣播的數(shù)據(jù)，數(shù)據(jù)通過事件對象e活得，數(shù)據(jù)存放在e.data中
        const showMsg = JSON.parse(e.data);
    }
 
    init();
})(document,WebSocket)

npm i socket.io@2.3.0 --save
npm i express@4.17.1 --save
npm i weapp.socket.io@2.1.0 --save

import io from './socket/weapp.socket.io.js'
Vue.prototype.socket = io('http://localhost:8000');

const express = require('express');
const app = express();
let server = app.listen(8000);
let io = require('socket.io').listen(server);
 
io.on('connection',(socket) => {   
    console.log("socket.io連接成功");
});

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1')
  if(req.method=="OPTIONS") res.send(200);/*讓options請求快速返回*/
  else  next();
});

export default {
	data() {
		return {
			uid:'',  // 當(dāng)前用戶id
	},
    onLoad() {
		this.getStroage();
        this.addUserToSocket(this.uid);
    },
    methods:{
        // 獲取本地存儲
        getStroage(){
			const value = uni.getStorageSync('user');
			if(value){
			    this.uid = value.id;
			} else {
				uni.navigateTo({
					 url:'/pages/login/login'
				})
			}
	    },
        // 添加連接的用戶
        addUserToSocket(uid){
		    this.socket.emit('login',uid);
		},
    }
}

let connectedUsers = {}; 
io.on('connection',(socket) => {   
    
    console.log("socket.io連接成功");
    // console.log(socket);
    // 用戶進入主頁時獲取用戶id保存
    socket.on('login',(id) => {
        console.log("socket.id:" + socket.id);
        socket.name = id;
        connectedUsers [id] = socket.id;
    });
 
    // 用戶離開
    socket.on('disconnecting',() => {
        console.log('leave：' + socket.id);
        if(users.hasOwnProperty(socket.name)){
            delete connectedUsers [socket.name];
        }
    });
});

// 發(fā)送聊天數(shù)據(jù)
sendSocket(msg){
	if(this.type === '0'){
		// 1對1聊天
		this.socket.emit('msg',msg,this.uid,this.fid);
	} else {
		// 群消息
		this.socket.emit('gmsg',msg,this.uid,this.fid);
	}
},

// 引入數(shù)據(jù)庫文件
let dataBase= require("./dataBase");
// 1對1消息發(fā)送
socket.on('msg',(msg,fromId,toId) => {
    console.log('服務(wù)器收到用戶' + fromId + '發(fā)送給' + toId + '的消息')
    console.log('發(fā)送的消息是：',msg);
    // 修改好友最后通訊時間
    dataBase.updateLastMsgTime(fromId,toId);
    dataBase.updateLastMsgTime(toId,fromId);
    // 添加消息
    dataBase.insertMsg(fromId,toId,msg.message,msg.types);
    console.log('數(shù)據(jù)庫插入成功');
    
    // 將獲取的消息發(fā)送給好友，users[toId]就是好友的socket.id
    if(connectedUsers[toId]){
        console.log('將消息發(fā)送給',toId,'成功');
        socket.to(connectedUsers[toId]).emit('backMsg',msg,fromId,0);
    }   
});

this.socket.on('backMsg',(msg,fromId,type) => {
	// 如果是1對1消息fromId是當(dāng)前聊天窗口的好友id時執(zhí)行
	if(fromId === this.fid && type === 0){
		......
		// 一條聊天記錄
		let newMsg = {
			fromId:fromId,
			id:msg.id,
			imgUrl:msg.imgUrl,
			message:msg.message,
			types:msg.types,  // 0 - 文字信息，1 - 圖片信息, 2 - 音頻
			time:new Date(),
			isFirstPlay:true,
		};
		this.msg.push(newMsg);  
		// 如果消息是圖片
		if(msg.types === '1') {
			this.msgImage.push(msg.message)
		}
		this.$nextTick(function(){
			this.scrollToView = 'msg' + this.msg[this.msg.length - 1].id;
		});
		......
	}	
});

<view class="fl-wrapper">
	<view class="friend-list" v-for="(item,index) in friends" :key="index" @tap="toChatInterface(item)">
        <!-- 用戶頭像 -->
		<view class="avator">
            <!-- 未讀消息數(shù) -->
			<view class="new-message-number" v-show="item.unreadMsg">{{item.unreadMsg}}</view>
			<image :src="item.imgUrl" class="img" ></image>
		</view>
		<view class="wrapper-right">
			<view class="wrapper-right-left">
                <!-- 好友名 最后聊天時間 -->
				<view class="text">
					<view class="name">{{item.nickName}}</view>
					<view class="time">{{getTime(item.lastTime)}}</view>
				</view>
                <!-- 最后聊天消息 -->
				<view class="message" v-if="item.lastMsgType==='0'">{{item.lastMsgUsername ? item.lastMsgUsername : ''}}{{item.lastMsg}}</view>
				<view class="message" v-if="item.lastMsgType==='1'">{{item.lastMsgUsername ? item.lastMsgUsername : ''}}[圖片]</view>
				<view class="message" v-if="item.lastMsgType==='2'">{{item.lastMsgUsername ? item.lastMsgUsername : ''}}[語音]</view>
				<view class="message" v-if="item.lastMsgType==='3'">{{item.lastMsgUsername ? item.lastMsgUsername : ''}}[位置]</view>
			</view>						
		</view>					
	</view>
</view>
 
......
 
onLoad() {
    this.receiveSocket('backMsg');
}
methods:{
    // 接收個人/群聊天信息
    receiveSocket(eventName){
	    this.socket.on(eventName,(msg,fromId,type) => {
		    if(type === 0){
			    let index;
			    if(eventName == 'backMsg') {
                    // 獲取有新消息的好友在整個好友數(shù)組中的索引下標(biāo)
				    index = this.friends.findIndex((item) => {
				    	return item.id === fromId
				    });
		    	}
		    	// 修改未讀消息數(shù) 
		    	this.getUnreadMsg(this.friends[index]);
                // 修改最后聊天時間
		    	this.friends[index].lastTime = msg.time;
                // 修改最后聊天信息
		    	this.friends[index].lastMsg = msg.message;
                // 修改最后聊天信息的類型
		    	this.friends[index].lastMsgType = msg.types;
                
                // 刪除當(dāng)前item,將其插入到數(shù)組的首部，即展示在列表最上方
	    		const tempItem = this.friends[index];
	    		this.friends.splice(index,1);
	    		this.friends.unshift(tempItem);
	    	}
    	});
    },
}
 

// 獲取當(dāng)前用戶的群消息
getGroup(){
	uni.request({
		url:`${this.baseUrl}/index/getGroupList`,
		method:'POST',
		data:{
			uid:this.uid,  // 用戶id
		},
		success: (res) => {
			let data = res.data.result;
            // 遍歷當(dāng)前用戶的群列表
			for (var i = 0; i < data.length; i++) {
				......
                // 觸發(fā)addGroup事件，攜帶群id，加入房間
				this.socket.emit('addGroup',data[i].id);
			}            
            ......
		}
	});
},

io.on('connection',(socket) => { 
    // 加入群
    socket.on('addGroup',(groupId) => {
        console.log('用戶',socket.id,'加入了groupId為',groupId,'的群聊');
        socket.join(groupId);
    });
}

// 發(fā)送聊天數(shù)據(jù)
sendSocket(msg){
	if(this.type === '0'){
		// 1對1聊天
		this.socket.emit('msg',msg,this.uid,this.fid);
	} else {
		// 群消息
		this.socket.emit('gmsg',msg,this.uid,this.fid);
	}
},

// 引入數(shù)據(jù)庫文件
let dataBase = require("./dataBase");
// 接收群消息
socket.on('gmsg',(msg,fromId,groupId) => {
    console.log('服務(wù)器接收到來自群',groupId,'的用戶',fromId,'的消息',msg);
    // 修改群的最后通信時間
    dataBase.updateGroupLastTime(groupId);
    // 添加群消息
    dataBase.insertGroupMsg(fromId,groupId,msg.message,msg.types);
    //將所有成員的未讀消息數(shù)加一
    dataBase.changeGroupUnreadMsgNum(groupId);
    console.log('消息',msg.message,'插入數(shù)據(jù)庫成功')
    // 獲取當(dāng)前用戶的名字和頭像
    dataBase.userDetails(fromId).then((data) => {
        console.log('查詢發(fā)送者用戶名成功，用戶名是：',data[0]);
        console.log('正在將信息',msg.message,'發(fā)送至群',groupId,'內(nèi)');
        // 群內(nèi)廣播消息
        socket.to(groupId).emit('groupMsg',msg,fromId,0,data[0].name,groupId);
    });
});

this.socket.on('groupMsg',(msg,fromId,type,friendName,groupId) => {
	// 判斷當(dāng)前打開的群id和接收消息的群id是否一致，防止消息錯誤顯示
	if(fromId !== this.uid && groupId === this.fid){
		......
		// 模擬服務(wù)器數(shù)據(jù)
		let newMsg = {
			fromId:fromId,
			id:msg.id,
			imgUrl:msg.imgUrl,
			message:msg.message,
			types:msg.types,  // 0 - 文字信息，1 - 圖片信息, 2 - 音頻
			time:new Date(),
			isFirstPlay:true,
			friendName:friendName   // 群需顯示發(fā)送消息用戶的名字
		};
		this.msg.push(newMsg);
		// 如果消息是圖片
		if(msg.types === '1') {
			this.msgImage.push(msg.message)
		}
		this.$nextTick(function(){
			this.scrollToView = 'msg' + this.msg[this.msg.length - 1].id;
		});
		......
	}	
});