微信小程序+gatewayworker+php+tp框架开发,websocke即时通讯三

这部分主要是小程序部分
websocket服务器配置
后端代码
小程序部分主要是一个websocket连接，然后是会话列表，和聊天界面

连接websocket

import Config from './config.js';
import Request from './request.js'
export default{
	//socket地址
	url:Config.wss,
	//连接状态
	IsOpen:false,
	//SocketTask
	SocketTask:false,
	//是否上线（会员id绑定客户端id 验证用户身份 通过则绑定）
	IsOnline:false,
	//当前聊天对象（进入聊天页面获取）
	CurrentToUser:{
		userid:0,//判断userid是否为0，当前用户处于什么场景下
		username:"",
		userpic:""
	},
	//连接
	Open(){
		if(this.IsOpen)return;//防止重复连接
		//连接
		this.SocketTask = uni.connectSocket({
			url:this.url,
			complete:(e)=>{
				console.log("正准备建立websocket中...");
			}
		});
		if(!this.SocketTask)return;
		//监听开启
		this.SocketTask.onOpen(()=>{
			//连接成功将连接状态设置为已连接
			this.IsOpen = true;
			console.log("WebSocket连接正常！");
		});
		//监听消息
		this.Message();
		//监听关闭
		this.SocketTask.onClose(()=>{
			this.IsOpen = false;
			this.SocketTask = false;
		});
		//监听错误
		this.SocketTask.onError((e)=>{
			this.IsOpen=false;
			this.SocketTask = false;
		})
	},
	//用户绑定
	async UserBind(client_id){
		let userinfo = uni.getStorageSync('userInfo');
		console.log(userinfo);
		await Request.httpTokenRequest({
				url: 'Chat/bind',
				method: 'POST',
			}, 
			{
				userid: uni.getStorageSync('userInfo').id,
				client_id:client_id
		}).then(res=>{
			if(res.code == 200){
				//成功处理
				return this.resultUserBind(res.data)
			}else{
				//错判断
				//绑定失败，断开连接
				uni.showToast({
				    title:res.msg,
				icon:"none"
				})
				this.SocketTask.close();
			}
		})
	},
	//监听 WebSocket 接受到服务器的消息事件
	Message(){
		this.SocketTask.onMessage((e)=>{
			//字符串转换json
			let res = JSON.parse(e.data);
			console.log(1,res);
			if(res.type=='bind') return this.UserBind(res.client_id);//服务器返回client-id下一步执行用户绑定
			if(res.type== 'ping') return;//接受的信息不是信息就return
			//全局通知接口
			uni.$emit('UserChat',res);
			// 总未读数+1 修改tabbar信息数
			// 当前聊天对象与from_id不同 未读数加1
			// 只要当前用户与某一用户没有处于聊天界面时执行未读书+1
			if(this.CurrentToUser.userid!==res.from_id){
				this.__UpdateNoReadNum({type:"add"})
			}
		})
		console.log('监听信息')
	},
	//通过 WebSocket 连接发送数据
	send(value){
		this.SocketTask.send({
			data: value,
			async success() {
				console.log("消息发送成功")
			}
		});
		
	},
	//用户绑定结果
	resultUserBind(res){
	    if(res.status && res.type=='bind'){
	        //该为上线状态
	        this.IsOnline = true;
	        //获取总未读数，并且渲染到tabbar的badge
	        //this.initTabbarBadge();
	        //获取未读信息
	        // this.getChatMessages();
	        return;
	    }
	    
	},
	//数组置顶
	__toFirst(arr,index){
	    if(index!=0){
	        arr.unshift(arr.splice(index,1)[0]);
	    }
	    return arr;
	},
	
	__format(data,options={}){
		switch(options.type){        
			case "chatdetail"://聊天详情记录
				 let list = options.olddata; //旧数据
				 let chattime = new Date().getTime();//获取当前时间
				 let length = list.length;
				 return {
					isme:options.isme,
					userpic:options.isme ? User.userinfo.userpic : data.from_userpic,
					type:data.type,
					data:data.data,
					time:chattime,
					gstime:chattime,
					//Time.gettime.getChatTime(chattime,(length)>0)?list[length-1].time:0)
				};
			break;
			case "chatlist"://新增会话
			     let obj = {
			         userid:data.from_id,
			         headUrl:data.user_pic,
			         username:data.user_name,
			         time:data.time,//最新消息时间戳
			         content:data.data,
			         countNoRead:0 ,//未读数
					 type: data.type
			     };
			     return obj;
			break;
			case "send":
			    return {
			        to_id:this.CurrentToUser.userid,
			        from_id:User.userinfo.id,
			        from_username:User.userinfo.username,
			        from_userpic:User.userinfo.userpic,
			        type:data.type,
			        time:new Date().getTime()
			    }
			break;
		}
	},
	//初始化tabber信息
	initTabbarBadge(){
		//获取总未读数
		console.log('初始化tabber未读数');
		let noreadnum = uni.getStorageSync('noreadnum'+User.userinfo.id);
		if(noreadnum && noreadnum>0){
			//设置tabber角标
			return uni.setTabBarBadge({
				index:Config.TabbarIndex,
			text:noreadnum>99?'99+':noreadnum.toString()
			});
		}
		return uni.removeTabBarBadge({
			index:Config.TabbarIndex
		})
	},
	__UpdateNoReadNum(options = {}){
	    //获取总未读数
		let userid = uni.getStorageSync('userInfo').id
	    let noreadnum = uni.getStorageSync('noreadnum_'+userid);
	    noreadnum = noreadnum || 0;
	    //接受信息增加
	    if(options.type == 'add'){
	        noreadnum++;
	        //响铃振动提示
	        //this.__Nofify();
	    }else{
	        noreadnum-=options.num;//读取信息减少 
	    }
	    noreadnum = noreadnum > 0 ? noreadnum : 0;
	    //修改tabbar信息数
	    this.__UpdateTabbarBadege(noreadnum);
	    //存储
	    uni.setStorage({
	        key:'noreadnum_'+userid,
			data:noreadnum
	    })
	},
	//将未读数渲染到tabbar
	__UpdateTabbarBadege(num){
	    if(num && num > 0){
	        return uni.setTabBarBadge({
	            index:Config.TabbarIndex,
				text:num > 99 ? '99+':num.toString()
	        });
	    }
	    return uni.removeTabBarBadge({
	        index:Config.TabbarIndex
	    })
	}
	
}

这里是将websocket封装，在main.js挂载全局

//引入websocket文件
import wsRequest from './lib/chat.js'
//挂载到全局
Vue.prototype.$socket = wsRequest

然后在用户登录成功后。调用this.$socket.Open()，进行websocket的连接
完整地址：https://gitee.com/zhumeng92/websocket