当前位置： 移动技术网 > IT编程>开发语言>Java > JAVA 实现WebSocket推送数据到数据大屏页面

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

2020年07月22日  | 移动技术网IT编程  | 我要评论

上篇文章，说到做一个大数据可视化的数据大屏，这里我用了开源的项目去进行二次开发，然后进行数据对接就好，不知道的可以看看数据大屏实例
接下来，我们要考虑的是这么把数据进行对接的问题了，起初我是使用 jquery 的ajax进行数据对接，但是你会发现一个问题，就是数据更新的时候你这么处理？刷新页面再次请求服务端接口，这里我听到一个朋友说，他们之前开发的时候，前端是通过ajax轮询去调用服务端接口的，这样看似是解决问题了，其实是不可取的，对服务端很不又好，确却的说是错误的，然后他们就使用了WebSocket 进行长连接通信，首先我们来看看 html5对 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下面
在这里插入图片描述
最快的入门方式就是，找开源的教程和demo文件，先跑起来，然后很快就知道这么在项目中运用了，
教程地址 ： https://how2j.cn/k/websocket/websocket-develop/1628.html
进入教程，下载项目和对应的jar包
在这里插入图片描述
导入到eclipse工具中之后要注意的一点就是，由于这个demo的框架是 Struts
要特别注意设置，不然启动会访问不了
在这里插入图片描述
这里要改成项目名字和 WebContent下面找class文件才能跑起来，跑起来之后我们就可以看到，数据在变化，这是因为，web socket的进行了长连接，并且后端一直在发送数据到前端
在这里插入图片描述
代码就是在这里，开启一个线程独立去发送数据
在这里插入图片描述
这就是关键的代码，从session中获取当前连接的用户，然后发送数据给用户
这个demo只要细心的去看应该就可以很好的理解，接下来我们就得把数据弄到项目中了，代码其实是一样的唯一不应该的就在于发送数据这里，这里发送的数据是json，因为我要进行数据统计等，所以我发送的可能就是集合 数组等，
然后我们看看 有没有什么其他的方法可以用，

在这里插入图片描述
其实就是这个类，接受的是一个Object我们吧 sendText改成这个方法，然后进行改造一下就好了

但是在执行的时候会出现说类型转换不了的错误，解码不了的错误，这里是因为我们要把数据进行转换成 JSON字符串就好了
在这里插入图片描述
然后前端接受到数据，进行渲染就好了，希望对家有帮助

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网