uni-app小程序实现微信在线聊天功能(私聊/群聊)

<!-- 一条聊天记录  -->
<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');  // 获取输入框，需要发送的消息
    const send = doc.querySelector('#send');  // 发送按钮
 
    // 创建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;
        
        // 将数据发送给服务器
        ws.send(JSON.stringify({
            message:message
        }));
 
        msg.value = '';
    }
 
    function handleOpen () {
        console.log('open');
        // 当连接建立时，一般做一些页面初始化操作
    }
    
    function handleClose () {
        console.log('close');
        // 当连接关闭时
    }
 
    function handleError () {
        console.log('error');
        // 当连接出现异常时
    }
 
    function handleMessage (e) {
        // 在这里获取后端广播的数据，数据通过事件对象e活得，数据存放在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);
  else  next();
});

export default {
	data() {
		return {
			uid:'',  // 当前用户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];
        }
    });
});

// 发送聊天数据
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);
	}
},

// 引入数据库文件
let dataBase= require("./dataBase");
// 1对1消息发送
socket.on('msg',(msg,fromId,toId) => {
    console.log('服务器收到用户' + fromId + '发送给' + toId + '的消息')
    console.log('发送的消息是：',msg);
    // 修改好友最后通讯时间
    dataBase.updateLastMsgTime(fromId,toId);
    dataBase.updateLastMsgTime(toId,fromId);
    // 添加消息
    dataBase.insertMsg(fromId,toId,msg.message,msg.types);
    console.log('数据库插入成功');
    
    // 将获取的消息发送给好友，users[toId]就是好友的socket.id
    if(connectedUsers[toId]){
        console.log('将消息发送给',toId,'成功');
        socket.to(connectedUsers[toId]).emit('backMsg',msg,fromId,0);
    }   
});

this.socket.on('backMsg',(msg,fromId,type) => {
	// 如果是1对1消息fromId是当前聊天窗口的好友id时执行
	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">
            <!-- 未读消息数 -->
			<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') {
                    // 获取有新消息的好友在整个好友数组中的索引下标
				    index = this.friends.findIndex((item) => {
				    	return item.id === fromId
				    });
		    	}
		    	// 修改未读消息数 
		    	this.getUnreadMsg(this.friends[index]);
                // 修改最后聊天时间
		    	this.friends[index].lastTime = msg.time;
                // 修改最后聊天信息
		    	this.friends[index].lastMsg = msg.message;
                // 修改最后聊天信息的类型
		    	this.friends[index].lastMsgType = msg.types;
                
                // 删除当前item,将其插入到数组的首部，即展示在列表最上方
	    		const tempItem = this.friends[index];
	    		this.friends.splice(index,1);
	    		this.friends.unshift(tempItem);
	    	}
    	});
    },
}
 

// 获取当前用户的群消息
getGroup(){
	uni.request({
		url:`${this.baseUrl}/index/getGroupList`,
		method:'POST',
		data:{
			uid:this.uid,  // 用户id
		},
		success: (res) => {
			let data = res.data.result;
            // 遍历当前用户的群列表
			for (var i = 0; i < data.length; i++) {
				......
                // 触发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);
    });
}

// 发送聊天数据
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);
	}
},

// 引入数据库文件
let dataBase = require("./dataBase");
// 接收群消息
socket.on('gmsg',(msg,fromId,groupId) => {
    console.log('服务器接收到来自群',groupId,'的用户',fromId,'的消息',msg);
    // 修改群的最后通信时间
    dataBase.updateGroupLastTime(groupId);
    // 添加群消息
    dataBase.insertGroupMsg(fromId,groupId,msg.message,msg.types);
    //将所有成员的未读消息数加一
    dataBase.changeGroupUnreadMsgNum(groupId);
    console.log('消息',msg.message,'插入数据库成功')
    // 获取当前用户的名字和头像
    dataBase.userDetails(fromId).then((data) => {
        console.log('查询发送者用户名成功，用户名是：',data[0]);
        console.log('正在将信息',msg.message,'发送至群',groupId,'内');
        // 群内广播消息
        socket.to(groupId).emit('groupMsg',msg,fromId,0,data[0].name,groupId);
    });
});

this.socket.on('groupMsg',(msg,fromId,type,friendName,groupId) => {
	// 判断当前打开的群id和接收消息的群id是否一致，防止消息错误显示
	if(fromId !== this.uid && groupId === this.fid){
		......
		// 模拟服务器数据
		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   // 群需显示发送消息用户的名字
		};
		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;
		});
		......
	}	
});