欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JAVA 实现WebSocket推送数据到数据大屏页面

程序员文章站 2022-03-22 10:42:47
上篇文章,说到做一个大数据可视化的数据大屏,这里我用了开源的项目去进行二次开发,然后进行数据对接就好,不知道的可以看看数据大屏实例接下来,我们要考虑的是这么把数据进行对接的问题了,起初我是使用 jquery 的ajax进行数据对接,但是你会发现一个问题,就是数据更新的时候你这么处理?刷新页面再次请求服务端接口,这里我听到一个朋友说,他们之前开发的时候,前端是通过ajax轮询去调用服务端接口的,这样看似是解决问题了,其实是不可取的,对服务端很不又好,确却的说是错误的,然后他们就使用了WebSocket 进行...

上篇文章,说到做一个大数据可视化的数据大屏,这里我用了开源的项目去进行二次开发,然后进行数据对接就好,不知道的可以看看数据大屏实例
接下来,我们要考虑的是这么把数据进行对接的问题了,起初我是使用 jquery 的ajax进行数据对接,但是你会发现一个问题,就是数据更新的时候你这么处理?刷新页面再次请求服务端接口,这里我听到一个朋友说,他们之前开发的时候,前端是通过ajax轮询去调用服务端接口的,这样看似是解决问题了,其实是不可取的,对服务端很不又好,确却的说是错误的,然后他们就使用了WebSocket 进行长连接通信,首先我们来看看 html5对 WebSocket 的支持
JAVA 实现WebSocket推送数据到数据大屏页面
文档地址:https://www.runoob.com/html/html5-websocket.html
基本的浏览器的代码就是

 <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
                
               ws.onopen = function()
               {
                  // Web Socket 已连接上,使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data; //这里就是服务端发送过来的数据,拿到数据后渲染进浏览器上面就好了。
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>

这里我们看到了,浏览器html5 对websocket的支持和执行的方式以及代码接下来我们就来看看 服务端的代码吧,jdk 本身就对websocket进行支持,源码就在 javax.websocket下面
JAVA 实现WebSocket推送数据到数据大屏页面
最快的入门方式就是,找开源的教程和demo文件,先跑起来,然后很快就知道这么在项目中运用了,
教程地址 : https://how2j.cn/k/websocket/websocket-develop/1628.html
进入教程,下载项目和对应的jar包
JAVA 实现WebSocket推送数据到数据大屏页面
导入到eclipse工具中之后要注意的一点就是,由于这个demo的框架是 Struts
要特别注意设置,不然启动会访问不了
JAVA 实现WebSocket推送数据到数据大屏页面
这里要改成项目名字和 WebContent下面找class文件才能跑起来,跑起来之后我们就可以看到,数据在变化,这是因为,web socket的进行了长连接,并且后端一直在发送数据到前端
JAVA 实现WebSocket推送数据到数据大屏页面
代码就是在这里,开启一个线程独立去发送数据
JAVA 实现WebSocket推送数据到数据大屏页面
这就是关键的代码,从session中获取当前连接的用户,然后发送数据给用户
这个demo只要细心的去看应该就可以很好的理解,接下来我们就得把数据弄到项目中了,代码其实是一样的唯一不应该的就在于发送数据这里,这里发送的数据是json,因为我要进行数据统计等,所以我发送的可能就是集合 数组等,
然后我们看看 有没有什么其他的方法可以用,

JAVA 实现WebSocket推送数据到数据大屏页面
其实就是这个类,接受的是一个Object我们吧 sendText改成这个方法,然后进行改造一下就好了

但是在执行的时候会出现说类型转换不了的错误,解码不了的错误,这里是因为我们要把数据进行转换成 JSON字符串就好了
JAVA 实现WebSocket推送数据到数据大屏页面
然后前端接受到数据,进行渲染就好了,希望对家有帮助

本文地址:https://blog.csdn.net/qrn196789910/article/details/107484743