gateway客户端聊天

最新推荐文章于 2024-12-30 16:26:53 发布

原创最新推荐文章于 2024-12-30 16:26:53 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

JS&jquery 专栏收录该内容

3 篇文章

订阅专栏

因为项目需要，跟着教程做了个基于gateway的一对一聊天demo，已经实现了图片、文本聊天功能，和tinkphp5.0框架结合的。

客户端代码：

<!doctype html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>聊天界面</title>
		<link rel="stylesheet" type="text/css" href="chat.css" />

		<script src="js/jquery.min.js"></script>
		<script src="js/flexible.js"></script>
	</head>

	<body>
		<header class="header">
			<a class="back" href="javascript:history.go(-1)"></a>
			<h5 class="tit"></h5>
			<div class="right"></div>
		</header>
		<div class="message" id="message">

			<!-- <div class="send">
				<div class="time">05/22 06:30</div>
				<div class="msg">
					<img src="images/touxiang.png" alt="" />
					<p><i class="msg_input"></i>你好在不在呀，妹子！</p>
				</div>
			</div>
			<div class="show">
				<div class="time">05/22 06:30</div>
				<div class="msg">
					<img src="images/touxiangm.png" alt="" />
					<p><i clas="msg_input"></i>你好你好你好</p>
				</div>
			</div> -->
			

		</div>

		<div class="footer">
			<img src="images/jia.jpg" id="img-up" alt="" />
			<input type="file" name="file" id="file" style="display:none">
			<img src="images/xiaolian.png"  alt="" />
			<input type="text"  />
			<p>发送</p>
		</div>
	<script src="js/chat.js" type="text/javascript" charset="utf-8"></script>
	<script>
		var token 		= getUrlParam(window.location.href,'token');
		var demand_id	= getUrlParam(window.location.href,'demand_id');
		var accept_id	= getUrlParam(window.location.href,'accept_id');


		var client_id	= null;
		var user 		= null;
		var ip 			= null;
		var host 		= "http://xxxxxxx.com";

		//通讯交互
		var ws = new WebSocket('ws://0.0.0.0:8282');
		ws.onmessage = function(e){
			var info = eval('('+e.data+')');
			console.log(info)
			switch(info.type){
				case 'init':
				client_id = info.data;
				ip        = info.ip;
				break;
				case 'text':
				//检测 非当前两人通讯不连接
				if(info.fromid == user.to_id){
					send(user.to_avatar,info.data);
					updateRead();
				}
				break;
				case 'img':
				//检测 非当前两人通讯不连接
				if(info.fromid == user.to_id){
					sendImg(user.to_avatar,host+info.data);
					updateRead();
				}
				break;
			}
		}



		//初始化请求数据
		$.get(host+url,{token:token,demand_id:demand_id,accept_id:accept_id},function(data){
			

			user = data.data;

			$('.tit').text(user.to_name)

			if(data.code == 1){
				//绑定UID
				ws.send('{"type":"bind","client_id":"'+client_id+'","uid":"'+user.from_id+'"}');
				//获取聊天记录
				getLoad();

			}else{
				alert(data.msg)
			}
		})


		//获取聊天记录
		function getLoad()
		{
			$.post(host+url,{token:token,demand_id:demand_id,accept_id:accept_id},function(data){

				if(data.code == 0){
					return false;
				}
				
				
				var list = data.data.list;
				for(var i=0;i<list.length;i++){

					if(list[i].fromid==user.from_id){

						if(list[i].type==1){
							//文本
							show(user.from_avatar,list[i].content);
						}else if(list[i].type==2){
							//图片
							showImg(user.from_avatar,host+list[i].content);
						}

					}else{
						
						if(list[i].type==1){
							//文本
							send(user.to_avatar,list[i].content);
						}else if(list[i].type==2){
							//图片
							sendImg(user.to_avatar,host+list[i].content);
						}

					}
				}
				
			})
		}


		
		//发送数据
		$('.footer p').click(function(){
			var msg = $(this).prev().val();

			if(msg == ''){
				return false;
			}
			show(user.from_avatar,msg);
			var str = '{"type":"say","data":"'+msg+'","fromid":"'+user.from_id+'","toid":"'+user.to_id+'"}';

			//保存记录
			saveRecord(msg,1);

			ws.send(str);

			$(this).prev().val('');
			$(this).css('background','#ddd').prop('disabled',false);
		})

		//消息记录持久化
		function saveRecord(str,type)
		{
			var arr = {};
			arr.token     	= token;
			arr.demand_id 	= demand_id;
			arr.accept_id 	= accept_id;
			arr.content 	= str;
			arr.toid 		= user.to_id;
			arr.fromid 		= user.from_id;
			arr.type        = type;

			$.post(host+url,arr,function(data){
				if(data.code==0){
					console.log(data.msg)
				}
			})
			
		}

		//触发选择图片
		$('#img-up').click(function(){
			$('#file').click();
		})

		$('#file').change(function(){

			var formData = new FormData();
			formData.append('token',token);
			formData.append('file',$('#file')[0].files[0]);
			//上传图片
			$.ajax({
				url:host+url,
				type:'post',
				cache:false,
				data:formData,
				dataType:'json',
				processData:false,
				contentType:false,
				success:function(data){
					
					if(data.code==1){
						url = host+data.data.url;
						showImg(user.from_avatar,url);
						var str = '{"type":"img","data":"'+data.data.url+'","fromid":"'+user.from_id+'","toid":"'+user.to_id+'"}';

						//保存记录
						saveRecord(data.data.url,2);

						ws.send(str);
					}else{
						alert(data.msg)
					}
				}
			})
		})


		/**
		 * 消息记录数据更新
		 */
		function updateRead()
		{
			$.get(host+url,{token:token,demand_id:demand_id,accept_id:accept_id},function(data){
				console.log(data)
			})
		}


	</script>
	</body>

</html>

抽空再加上心跳监测，接下来要搞群组聊天功能。