WebSocket实现前台实时显示数据库数据

业务逻辑:
在浏览器和服务器之间建立WebSocket双工连接,启动一个线程,设置私有变量数据修改时间,循环读取数据库实时表中某个传感器的数据修改时间,与私有变量进行对比,如果相同则不做任何改动,若不同,则把查询到的时间赋值给私有变量,同时向浏览器发送推送消息,前端通过ajax发送请求更新数据。
添加依赖:
用之前 需查询依赖版本是否与spring版本兼容
WebSocket依赖:

 
      mysql
      mysql-connector-java
      5.1.38
    
    
      javax
      javaee-api
      7.0
      provided
    

日期比较依赖:

 
            joda-time
            joda-time
            2.9.2
        

前端功能代码及作用:

var websocket = null;
    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        //建立连接,这里的/websocket ,是Servlet中注解中的那个值
        websocket = new WebSocket("ws://localhost:8080/项目名/websocket");
    }
    else {
        alert('当前浏览器不支持WebSocket');
    }
    //连接发生错误的回调方法
    websocket.onerror = function () {
        //发生连接错误的处理代码
    };
    //连接成功建立的回调方法
    websocket.onopen = function () {
        //连接成功的处理代码
    }
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        console.log(event.data);
        if(event.data=="1"){
            //接收到消息的处理代码
        }
    }
    //连接关闭的回调方法
    websocket.onclose = function () {
        //连接关闭时的处理代码
    }
    //监听窗口关闭事件,当窗口关闭时,主动去关闭WebSocket连接,防止连接还没断开就关闭窗口,server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    }

后端功能代码及作用:

//在相对路径中发布端点websocket,注解中的路径要与前端代码对应“ websocket = new WebSocket("ws://localhost:8080/项目名/websocket");”
@ServerEndpoint("/websocket")
public class WebSocketServlet {
    MyThread thread1=new MyThread();
    Thread thread=new Thread(thread1);
    //用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet webSocketSet = new CopyOnWriteArraySet();
    private  javax.websocket.Session session=null;
    //开启连接
    @OnOpen
    public void onOpen(Session session) throws IOException{
        this.session=session;
        webSocketSet.add(this); 
        System.out.println(webSocketSet);
        //开启一个线程对数据库中的数据进行轮询
        thread.start();    
    }
    //关闭连接
    @OnClose
    public void onClose(){
        thread1.stopMe();
        webSocketSet.remove(this);
    }
    //给服务器发送消息告知数据库发生变化
    @OnMessage
    public void onMessage(int count) {    
        System.out.println("发生变化"+count);
        try {
            sendMessage();
        } catch (IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }
   //出错的操作
    @OnError
    public void onError(Throwable error){
        System.out.println(error);
        error.printStackTrace();
    }
    
    /**
     * 这个方法与上面几个方法不一样。没有用注解,是根据自己需要添加的方法。
     * @throws IOException
     * 发送自定义信号,“1”表示告诉前台,数据库发生改变了,需要刷新
     */
    public void sendMessage() throws IOException{
        //群发消息
        for(WebSocketServlet item: webSocketSet){
            item.session.getBasicRemote().sendText("1");
        }
    }
}

定义线程:

public class MyThread implements Runnable{
    private Date sum;
    private  Date new_sum;
    private boolean stopMe = true;  
    public void stopMe() {  
        stopMe = false;  
    }  
    public void run()  {
    //查询数据更新时间
        UrlDao urlDao=new UrlDao();
        new_sum=urlDao.selectTime();
        WebSocketServlet wbs=new WebSocketServlet();
        while(stopMe){
            new_sum=urlDao.selectCount();
            if(sameDate(sum, new_sum )){
                System.out.println("change");
                sum=new_sum;
                wbs.onMessage(sum);
            }
            try {
                Thread.sleep(1000);
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
    public static Boolean sameDate(Date dt1 , Date dt2 ){
	LocalDate ld1 = new LocalDate(new DateTime(dt1));
	LocalDate ld2 = new LocalDate(new DateTime(dt2));
	return ld1.equals( ld2 );
    }
}

你可能感兴趣的:(Socket编程)