html+css+js实现post简易聊天室

其他 2018-10-30 14:01:12 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。作者：沙师弟专栏 https://blog.csdn.net/u014597198/article/details/82994533

目录

1、简述

因为项目需求，就做了一个简易的聊天室，用户输入一句话，通过http-post请求简单的回复一些信息给用户。

2、效果图

在这里插入图片描述

3、核心代码讲解

A、把具体问题通过post请求上传到远程服务器

	function toChat2(enterpriseID,platform, query, source,userStatus,username){
		var url = "http://10.0.30.15:8092/SmartServer/robot/chat"; 
		xhr.onreadystatechange = toPostProcess;
		xhr.open("post", url, true);  
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
		xhr.send(JSON.stringify({
			"enterpriseID": enterpriseID,
			"platform": platform,
			"query": query,
			"source": source,
			"userStatus": userStatus,
			"username": username 
		})); 
		console.log("ok"); 
	}

文中的url是内网的ip地址，你们可以换成你们的url地址。
先设置好参数，参数作用：

参数 含义
enterpriseID 企业ID
platform 平台
query 具体问题
source 来源
userStatus 状态
username 名字

B、解析服务器返回的答复，并插入到聊天框

	function toPostProcess() {/*设置当获XHR对象获取到返回信息后执行以下代码*/ 
		if (xhr.readyState === 4) { 
			if (xhr.status === 200) {
				res = xhr.responseText;
				var obj = eval ("(" + res + ")");
				console.log("res ok:" +res); 
				try {   
					var textReply = obj.result.content; 
					str = '<div class="atalk"><span>' + textReply +'</span></div>';   
					// 将之前的内容与要发的内容拼接好 提交
					Words.innerHTML = Words.innerHTML + str; 
					// 置空
					TalkWords.value = "";
					// 滑动到最底部
					Words.scrollTop = Words.scrollHeight;
				} catch (e) {
					return handleError(xhr, e);
				}  
			} else {
				console.log("可能存在跨域问题，解决即可"); 
			}  
		} 
	}

通过Words.innerHTML的形式，将产生的回复信息< div >标签插入到聊天框种，并把输入框置空，然后把滑动条滑动到最下面。就完成了一个简单的聊天。

4、源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>简易聊天室</title>
    <style type="text/css">
        
		@media screen and (min-width: 320px) and (max-width: 1156px){
			.talk_con_mob{
				width:600px;
				height:500px;
				border:1px solid #666;
				margin:50px auto 0;
				background:#f9f9f9;
			}
			.talk_show_mob{
				width:580px;
				height:420px;
				border:1px solid #666;
				background:#fff;
				margin:10px auto 0;
				overflow:auto;
			}
			.talk_input_mob{
				width:580px;
				margin:10px auto 0;
			}
			.talk_word_mob{
				width:420px;
				height:26px;
				padding:0px;
				float:left;
				margin-left:10px;
				outline:none;
				text-indent:10px;
			}  
		}
			.talk_con{
				width:600px;
				height:500px;
				border:1px solid #666;
				margin:50px auto 0;
				background:#f9f9f9;
			}
			.talk_show{
				width:580px;
				height:420px;
				border:1px solid #666;
				background:#fff;
				margin:10px auto 0;
				overflow:auto;
			}
			.talk_input{
				width:580px;
				margin:10px auto 0;
			}
			.whotalk{
				width:80px;
				height:30px;
				float:left;
				outline:none;
			}
			.talk_word{
				width:420px;
				height:26px;
				padding:0px;
				float:left;
				margin-left:10px;
				outline:none;
				text-indent:10px;
			}         
			.talk_sub{
				width:56px;
				height:30px;
				float:right;
				margin-right:10px;
			}
			.atalk{
			   margin:10px; 
			}
			.atalk span{
				display:inline-block;
				background:#0181cc;
				border-radius:10px;
				color:#fff;
				padding:5px 10px;
			}
			.btalk{
				margin:10px;
				text-align:right;
			}
			.btalk span{
				display:inline-block;
				background:#ef8201;
				border-radius:10px;
				color:#fff;
				padding:5px 10px;
			} 
    </style>
    <script type="text/javascript">   
		var Words;
		var TalkWords;
        var TalkSub;
		var xhr;
		
		function InputPress() {
			if (event.keyCode == 13) { 
				chatRoom();
			}	
		} 
		
		function chatRoom(){
			//定义空字符串
			var str = "";
			if(TalkWords.value == ""){
				 // 消息为空时弹窗
				alert("消息不能为空");
				return;
			}
			str = '<div class="btalk"><span>' + TalkWords.value +'</span></div>' ;  
			
			toChat2("10000000051", "inner", TalkWords.value , "wx", "", "oXFEUwvf_exNy6VLr9nGrxrvAPxQ");
			
			// 将之前的内容与要发的内容拼接好 提交
			Words.innerHTML = Words.innerHTML + str;
		}
		
		function toChat2(enterpriseID,platform, query, source,userStatus,username){
			var url = "http://10.0.30.15:8092/SmartServer/robot/chat"; 
			xhr.onreadystatechange = toPostProcess;
			xhr.open("post", url, true);  
			xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
			xhr.send(JSON.stringify({
				"enterpriseID": enterpriseID,
				"platform": platform,
				"query": query,
				"source": source,
				"userStatus": userStatus,
				"username": username 
			})); 
			console.log("ok"); 
		} 
		
		function toPostProcess() {/*设置当获XHR对象获取到返回信息后执行以下代码*/ 
			if (xhr.readyState === 4) { 
				if (xhr.status === 200) {
					res = xhr.responseText;
					var obj = eval ("(" + res + ")");
					console.log("res ok:" +res); 
					try {   
						var textReply = obj.result.content; 
						str = '<div class="atalk"><span>' + textReply +'</span></div>';   
						// 将之前的内容与要发的内容拼接好 提交
						Words.innerHTML = Words.innerHTML + str; 
						
						// 置空
						TalkWords.value = "";
						// 滑动到最底部
						Words.scrollTop = Words.scrollHeight;
					} catch (e) {
						return handleError(xhr, e);
					}  
				} else {
					console.log("可能存在跨域问题，解决即可"); 
				}  
			} 
		}		
		
		function GetXmlHttpObject() {
			var xmlHttp=null; 
			try {
				// Firefox, Opera 8.0+, Safari
				console.log("XMLHttpRequest"); 
				 xmlHttp=new XMLHttpRequest();
			} catch (e) {
				// Internet Explorer
				try {
					console.log("Msxml2"); 
					xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				} catch (e) {
					console.log("Microsoft"); 
					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			return xmlHttp;
		}
		
		
		//is moblie
		var sUserAgent = navigator.userAgent.toLowerCase();
		var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
		var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
		var bIsMidp = sUserAgent.match(/midp/i) == "midp";
		var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
		var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
		var bIsAndroid = sUserAgent.match(/android/i) == "android";
		var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
		var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

		
		
        window.onload = function(){  
			Words = document.getElementById("words"); 
			TalkWords = document.getElementById("talkwords");
			TalkSub = document.getElementById("talksub"); 
			xhr = new GetXmlHttpObject(); 
            TalkSub.onclick = function(){ 
				chatRoom();			
            }   
			//is mobile
			if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
				console.log("手机");  
				document.getElementById('talk_con_id').className = 'talk_con_mob';		
				document.getElementById('words').className = 'talk_show_mob';	
				document.getElementById('talk_input_id').className = 'talk_input_mob';	
				document.getElementById('talkwords').className = 'talk_word_mob';	
			} else {
				console.log("电脑"); 
				document.getElementById('talk_con_id').className = 'talk_con';
				document.getElementById('words').className = 'talk_show';	
				document.getElementById('talk_input_id').className = 'talk_input';	
				document.getElementById('talkwords').className = 'talk_word';	
			}
        }
    </script>
</head>
<body>
    <div class="talk_con" id="talk_con_id">
        <div class="talk_show" id="words">
            <div class="atalk"><span id="asay">欢迎进入模拟客户聊天</span></div>
            <!--- div class="btalk"><span id="bsay">用户说：还没呢，你呢？</span></div --->
        </div>
        <div class="talk_input"  id="talk_input_id">>
            <input type="text" class="talk_word" id="talkwords" onkeypress="InputPress()">
            <input type="button" value="发送" class="talk_sub" id="talksub" >
        </div>
    </div>
</body>
</html>

读者可自行修改样式，把这个简易的聊天室做的更完美。

猜你喜欢

转载自blog.csdn.net/u014597198/article/details/82994533
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022