java websockt实现简易的聊天室效果

为了尽可能多的动手，提高自己的动手能力，巩固学习到的知识。在学习之后，就做一个简单的总结吧

先是记录一下WebSocket简介吧

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
（摘自菜鸟教程里的说明）

然后就是自己写一个简易的H5页面，然后学习借鉴别人的Js代码`

`

		<!-- 上部分 -->
		<div class="main">
			<div class="chattitle">
				<span>多人聊天室</span>
			</div>
			<div class="time">
				<img src="imgs/time.png" >
				<div id="">聊天记录</div>
			</div>
			<!-- 聊天记录输出框 -->
			<div id="outputmessage" class="outputmessage"></div>
		</div>
		
		<!-- 下部分 -->
		<div id="content" class="content">
			<!-- 改字体、发表情工具 -->
			<div class="content_tool">
				<div class="tool_font">
					<img src="imgs/A.png" >
				</div>
				<div class="tool_emjo">
					<img src="imgs/smiling.png" >
				</div>
			</div>
			<!-- 发送文字表单 -->
			<div class="inputmessage" id="inputmessage" contenteditable="true"></div>
			<!-- 按钮 -->
			<div class="buttons">
				<div class="bt_send" id="bt_send" style="float: right;" onclick="getMessage();">
					<button type="button">发送(S)</button>
				</div>
				<div class="bt_close" id="bt_close" style="float: right;">
					<button type="button">关闭(C)</button>
				</div>
			</div>
		</div>

	</div>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="js/dot.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//websocket 实现聊天室客户端需要实现的事情
		//1获取连接 new websocket()
		//服务端地址和请求类型
		var wsUrl="ws://localhost:8080/chat/chatRoomServer";
		//客户端与服务端建立连接，然后会发出一个ws.open事件
		var ws=new WebSocket(wsUrl);
		//连接成功后，提示浏览器客户端输入昵称
		ws.onopen=function(){
			var userName=prompt("请给自己取一个名字：");
			//发给服务端
			ws.send(userName);
		}
		//客户端收到服务器发送的消息 
        ws.onmessage = function(message) {
            //alert(message.data);
            //message.data
            //获取以后，在客户端显示
            outputMessage.innerHTML = outputMessage.innerHTML + message.data;
            //解决滚动条问题
            var msg = document.getElementById("outputmessage");
            //差值 溢出的高度减掉可视的高度
            var distance = msg.scrollHeight - msg.offsetHeight;
            //将差值赋给滚动条的高度
            msg.scrollTop = distance;
        }
		//客户端收到服务器发送的消息
		ws.onmessage=function(message){
			//获取以后在客户端显示
			outputmessage.innerHTML +=message.data;
		}
		//获取某个用户输入的聊天内容，并发送服务端，让服务端广播给所有人
		function getMessage(){
			var inputMessage=document.getElementById("inputmessage").innerText;
			//获取消息以后，要发送给服务端，然后广播给所有用户
			if(typeof(inputMessage)=="undefined"){
				alert("请输入您要发送的消息");
			}else{
				ws.send(inputMessage);
				document.getElementById("inputmessage").innerText="";
			}
		}
	 //获取某个用户输入的聊天内容，并发送服务端，让服务端广播给所有人
		function getMessage() {
		     var inputMessage = document.getElementById("inputmessage").innerText;
		     //alert(inputMessage);
		     if (typeof (inputMessage) == "undefined") {
		         alert("请输入您要发送的消息");
		         } else {
		            //获取消息以后，要发送给服务端，然后广播给所有用户
		            ws.send(inputMessage);
		            //清空文本框
		            document.getElementById("inputmessage").innerText ="";
		          }
		}
		//当关闭页面或者用户退出时,会执行一个ws.close()方法 
		window.onbeforeunload = function() {
		     ws.close();//该方法会触发后台的标注了OnClose的方法
		   }
		//按回车发送消息
		document.onkeyup = function(e) {
		if (e.keyCode == 13) {
		    getMessage();
		   }
        }
	</script>
</body>

然后下面是CSS

body{
   
	background-color: gray;
}
body img{
   
	width: 16px;
}
/* 上部分 */
.chatroom{
   
	width: 800px;
	height