beautyz-workerman
/
test1.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style: none;
			font-family: "微软雅黑";
		}
		#container{
			width: 450px;
			height: 680px;
			margin: 20px auto 0;
			background: #eee;
			position: relative;
			box-shadow: 20px 20px 55px #777;

		}
		.header{
			height: 40px;
			line-height: 34px;
			padding: 0 10px;
			font-size: 20px;
			color: #fff;
			background: #000;
		}
		.footer{
			width: 430px;
			height: 50px;
			background: #666;
			position: absolute;
			bottom: 0;
			padding: 0 10px;

		}
		.footer input{
			width: 275px;
			height: 45px;
			outline: none;
			font-size: 20px;
			text-indent: 10px;
			position: absolute;
			border-radius: 6px;
			right: 80px;

		}
		.footer span{
			display: inline-block;
			width: 62px;
			height: 48px;
			background: #ccc;
			font-weight: 900;
			line-height: 45px;
			cursor: pointer;
			text-align: center;
			position: absolute;
			right: 10px;
			border-radius: 6px;
		}
		.footer span:hover{
			color: #fff;
			background: #999;
		}
		img{
			width: 45px;
			height: 45px;
		}
		.content{
			font-size: 20px;
			width: 435px;
			height: 662px;
			overflow: auto;
			padding: 5px;
		}
		.content li{
			margin-top: 10px;
			padding-left: 10px;
			width: 412px;
			display: block;
			clear: both;
			overflow: hidden;
		}
		.content li img{

			float: left;
		}
		.content li span{
			background: #7cfc00;
			padding: 10px;
			border-radius: 10px;
			float: left;
			margin: 6px 10px 0 10px;
			max-width: 310px;
			border:1px solid #ccc;
			box-shadow: 0 0 3px #ccc;
		}
		.content li img.imgleft{
			float: left;
		}
		.content li img.imgright{
			float: right;
		}
		.content li span.spanleft{
			float: left;
			background: #fff;
		}
		.content li span.spanright{
			float: right;
			background: #7cfc00;
		}


	</style>
</head>
<body>
	<div id="container">
		<div class="header">
			<span style="float: left" >模拟聊天</span>
			<span style="float: right" class="time"></span>
		</div>

		<ul class="content">
			<li>
				<img src="static/img/01.jpg"  class="imgright" alt="张三"><span class="spanright">你好</span>
			</li>
			<li>
				<img src="static/img/02.jpg"  class="imgleft" alt="李四"><span class="spanleft">你好</span>
			</li>
		</ul>

		<div class="footer">
			<input id="text" type="text" placeholder="请输入......">
			<span id="btn">发送</span>
		</div>
	</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
	//获取时间
	function checkTime(i) {
		if (i < 10) {
			i = "0" + i;
		}
		return i;
	}
	function showTime() {
		var myDate = new Date();
		var h = myDate.getHours();
		var m = myDate.getMinutes();
		var s = myDate.getSeconds();
		h = checkTime(h);
		m = checkTime(m);
		s = checkTime(s);
		var timeStr = h + ":" + m + ":" + s;
		$(".time").text(timeStr);
	}

	setInterval("showTime()", 1000)
</script>
<script>
	var name = "张三";
	//实例化
	var ws = new WebSocket("ws://localhost:2345");
	//打开
	ws.onopen = function(){
		alert("正常连接");
	}
	//获得消息,服务端推送数据
	ws.onmessage  = function(msg){
		var msgObj = JSON.parse(msg.data);

		if( name == msgObj['name']){
			//显示
		$(".content").append('<li><img src="static/img/01.jpg" class="imgright" alt="'+msgObj['name']+'"><span class="spanright">'+msgObj['content']+'</span></li>');
		}else{
			//显示
		$(".content").append('<li><img src="static/img/02.jpg" class="imgleft" alt="'+msgObj['name']+'"><span class="spanleft">'+msgObj['content']+'</span></li>');
		}

	}

	$(function(){
		$("#btn").click(function(){
			var content = $("#text").val();
			//组装对象
		 	var msg = {
		 		'name':name,
		 		'content':content
		 	}
		 	//转成json
		 	var msgStr = JSON.stringify(msg);
			//发送
			ws.send(msgStr);

		})
	})
</script>