• 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运行结果

  • 相关阅读:
    C# GetHashCode 部分冲突列表 数字字符串版本
    Amazon Dynamo DB
    SCTP 一句话介绍
    SystemTap 使用以及安装
    Windows Azure Service Disruption on Feb 29th
    发布ASP.NET MVC3网站
    SQLServer数据集合的交、并、差集运算
    DataTable的几个函数
    oracle创建表空间以及用户的语句
    asp.net mvc3及odp.net资料下载地址
  • 原文地址:https://www.cnblogs.com/jpfss/p/8777528.html
Copyright © 2020-2023  润新知