JAVA 实现WebSocket推送数据到数据大屏页面
上篇文章,说到做一个大数据可视化的数据大屏,这里我用了开源的项目去进行二次开发,然后进行数据对接就好,不知道的可以看看数据大屏实例
接下来,我们要考虑的是这么把数据进行对接的问题了,起初我是使用 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
上一篇: C#中抽象类和接口的区别与使用
下一篇: Vant 移动端Vue组件库的使用