SSM + WebSocket 实现监测数据库实时更新并在前端页面提示

这篇文章是记录一下遇到的问题和有待优化的地方，上一周有一个需求：数据库更新时就需要反馈到前端页面，一开始尝试js.setInterval()类的的页面定时刷新，不久就发现并不符合需求，几秒页面闪一次使用起来并不是很友好，所以采用WebSocket的双向长连接.

 

1.WebSocket简单认识

WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

为什么传统的HTTP协议不能做到WebSocket实现的功能？这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的，符合实时性需求。

 

2.需求

能实时监控数据库的增加，并给提示客户端进行页面刷新

 

3.开发环境

Jdk1.8

Tomcat 8.5

Idea 2019

mysql 5.5

所需jar包：SSM必备jar包 此处spring版本4.24

额外jar包：javaee-api-7.0(或者javax.websocket.api-1.1.jar在tomcat-lib文件夹自带有)

maven Jar包(全)

4.思路

要时间数据库的实时监控，就要对数据库的某个属性进行监控，这里我对特定需要的表记录数进行了监控，如果查询所得记录数发生了变化，就向WebSocket已创建的长连接发送数据库已发生变化的信息，以及相应的一些其他需求操作。（这里也可以监控数据库日志、数据库更改时间属性等等按需实现）

5.实现

5.1客户端

我们先来看前端页面的代码(jsp):

<script type="text/javascript">
        var websocket = null;

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            //建立连接，这里的/websocket ，是Servlet中注解中的那个值
            //替换成自己的项目名
            websocket = new WebSocket("ws://localhost:8080/项目名/websocket");
        } else {
            alert('当前浏览器 Not support websocket');
        }
        //连接发生错误的回调方法
        websocket.onerror = function () {
            console.log("WebSocket连