WebSocket 实时更新mysql数据到页面

使用websocket的初衷是，要实时更新mysql中的报警信息到web页面显示
没怎么碰过web，代码写的是真烂，不过也算是功能实现了，放在这里也是鞭策自己，web也要多下些功夫

准备

引入依赖

    <dependency>      <groupId>mysql</groupId>      <artifactId>mysql-connector-java</artifactId>      <version>5.1.38</version>    </dependency>    <dependency>      <groupId>javax</groupId>      <artifactId>javaee-api</artifactId>      <version>7.0</version>      <scope>provided</scope>    </dependency>

先看看mysql中数据的格式

数据封装

public class AlarmMessage {    private String fanNo;    private String time;    private String description;    public AlarmMessage(String fanNo, String time, String description) {        this.fanNo = fanNo;        this.time = time;        this.description = description;    }    public String getFanNo() {        return fanNo;    }    public String getTime() {        return time;    }    public String getDescription() {        return description;    }}

jdbc从数据库中读取数据

public class DBUtil {    public List<AlarmMessage> getFromDB() throws SQLException, ClassNotFoundException, IllegalAccessException, InstantiationException {        List<AlarmMessage> list=new ArrayList<AlarmMessage>();        String dirver="com.mysql.jdbc.Driver";        String user="root";        String psd="root";        String database="streamingproblem";        String tablename="problem";        String url="jdbc:mysql://172.17.11.120:3306/"+database+"?user="+user+"&password="+psd;        Class.forName(dirver).newInstance();        Connection conn= DriverManager.getConnection(url);        Statement stat=conn.createStatement();        String sql="select * from "+tablename;        ResultSet rs=stat.executeQuery(sql);        while (rs.next()){            AlarmMessage alarmMessage=new AlarmMessage(rs.getString(2),rs.getString(3),rs.getString(4));            list.add(alarmMessage);        }        rs.close();        stat.close();        conn.close();        return list;    }}

开始写websocket

写一个线程用于发送新数据到页面，run中开启无限循环，用一个变量 currentIndex 记录当前数据量，当有新数据时，发送新数据

import javax.websocket.Session;public class OneThread extends Thread {    private Session session;    private List<AlarmMessage> currentMessage;    private DBUtil dbUtil;    private int currentIndex;    public OneThread(Session session) {        this.session = session;        currentMessage = new ArrayList<AlarmMessage>();        dbUtil = new DBUtil();        currentIndex = 0;//此时是0条消息    }    @Override    public void run() {        while (true) {            List<AlarmMessage> list = null;            try {                try {                    list = dbUtil.getFromDB();                } catch (ClassNotFoundException e) {                    e.printStackTrace();                } catch (IllegalAccessException e) {                    e.printStackTrace();                } catch (InstantiationException e) {                    e.printStackTrace();                }            } catch (SQLException e) {                e.printStackTrace();            }            if (list != null && currentIndex < list.size()) {                for (int i = currentIndex; i < list.size(); i++) {                    try {                        session.getBasicRemote().sendText(list.get(i).getFanNo()                                + "," + list.get(i).getTime()                                + "," + list.get(i).getDescription());//                            session.getBasicRemote().sendObject(list.get(i)); //No encoder specified for object of class [class AlarmMessage]                    } catch (IOException e) {                        e.printStackTrace();                    }                }                currentIndex = list.size();            }            try {                //一秒刷新一次                Thread.sleep(1000);            } catch (InterruptedException e) {                e.printStackTrace();            }        }    }}

在onopen中启动发送数据线程

import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.ServerEndpoint;@ServerEndpoint("/websocket")public class websocket {    @OnOpen    public void onOpen(Session session){        OneThread thread =null;        thread=new OneThread(session);        thread.start();    }}

js实现websocket客户端

<%@ page import="java.sql.*" %><html><head>    <script type="text/javascript">        //先检验能不能运行起来，能不能连上，自动推送数据，先不做数据显示        //客户端就会与服务器进行连接        var webSocket = new WebSocket("ws://localhost:8081/websocket");        //这里只是调试用        //连接失败时回调        webSocket.onerror = function (event) {            makeDataOnWeb("error");        };        //这里只是调试用        //连接成功时回调，真的会执行括号中的代码！        webSocket.onopen = function (event) {            makeDataOnWeb("conn success");        };        webSocket.onmessage = function (event) {            makeDataOnWeb(event.data);        };        //这里只是调试用        webSocket.onclose = function (event) {            makeDataOnWeb("conn close");        };        function makeDataOnWeb(data) {            var a = data;            var divNode = document.getElementById("view");            var liNode = document.createElement("li");            liNode.innerHTML = a;            divNode.appendChild(liNode);//            divNode.insertBefore(liNode, divNode.children[0]);            //不能用insertAfter，好像不是这么用的            //            var divNode = document.getElementById("view");//            var trNode = document.createElement("tr");//            var td1 = document.createElement("td");//            var td2 = document.createElement("td");//            var td3 = document.createElement("td");//            td1.innerHTML = a;//            td2.innerHTML = a;//            td3.innerHTML = a;//            trNode.appendChild(td1)//            trNode.appendChild(td2)//            trNode.appendChild(td3)            //            var head = document.getElementById("head");//            document.write(a+"<br>");//直接写//            document.getElementsById("a").innerHTML="fadfadfa";//不输出任何内容        };    </script></head><body><%@page contentType="text/html; utf8" %><%@page language="java" %><%@page import="java.sql.*" %><%@page pageEncoding="UTF-8" %><!--解决中文乱码--><div id="view"></div></body></html>

web运行结果