欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

gateway客户端聊天

程序员文章站 2024-03-22 15:04:52
...

因为项目需要，跟着教程做了个基于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>

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

上一篇： LeetCode 27.Remove Element

下一篇： LEETCODE 27.Remove Element

推荐阅读