一个基于webSocket实现前后端通信的小demo

#sell
一般的web项目都是前台向后台发送消息，但是有些时候我们也需要从后端向前台发送消息，比如说zfb的回调信息，微信的模板推送消息等，下面通过Eclipse+Tomcat实现一个前后台通信的小demo；

先创建一个web项目  index.jsp写一个简单的页面来显示消息

```
<%@ page language="java" pageEncoding="UTF-8" %>
<html>
<head>
<title>Java后端WebSocket的Tomcat实现</title>
</head>
<body>
Welcome
<br />
<input id="text" type="text" />
<button onclick="send()">发送消息</button>
<hr />
<button onclick="closeWebSocket()">关闭WebSocket连接</button>
<hr />
<div id="message"></div>
<script>
var websocket = null;
if('WebSocket' in window){
websocket = new WebSocket("ws://127.0.0.1:8080/testWebSocket/websocket")
}else{
alert("当前浏览器不支持websocket")
}
websocket.onerror = function(){
setMessageInHtml("发送错误");
}
websocket.onopen = function(){
setMessageInHtml("建立连接")
}
websocket.onmessage  = function(event){
setMessageInHtml(event.data);
}
websocket.onclose = function(){
setMessageInHtml("关闭WebSocket连接")
}
window.onbeforeunload = function(){
closeWebsocket();
}
function setMessageInHtml(message){
document.getElementById('message').innerHTML += message+'</br>'
}
function closeWebsocket(){
websocket.colse();
}
function send(){
var msg = document.getElementById('text').value;
websocket.send(msg);
}
</script>
</body>
</html>