webSocket 如何实现服务器端 想页面推送实时数据? 动态数据?如何进行连接?
来源:互联网 发布:英语离线翻译软件 编辑:程序博客网 时间:2024/05/16 07:28
本次实现的功能是采用webSocket 实现客户端实时监控后台服务运行情况和日志信息的实时和动态展示。
共分为2步:
一:html页面
<!DOCTYPE html><html><head> <title>IoT日志监控</title></head><body> <!--Welcome<br/><input id="text" type="text"/>--> <!--<button onclick="send()">发送消息</button>--> <!--<hr/>--> <button onclick="closeWebSocket()">关闭WebSocket连接</button> <button onclick="clear()">清空</button> <hr/> <div id="message"></div></body><script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if ('WebSocket' in window) { websocket = new WebSocket("ws://localhost:8080/bonc_ioc_iot/webSocket/iotLog"); } else { alert('当前浏览器 Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function () { setMessageInnerHTML("WebSocket连接发生错误"); }; //连接成功建立的回调方法 websocket.onopen = function () {// setMessageInnerHTML("WebSocket连接成功"); websocket.send("测试消息"); } //接收到消息的回调方法 websocket.onmessage = function (event) { setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function () { setMessageInnerHTML("WebSocket连接关闭"); } //监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。 window.onbeforeunload = function () { closeWebSocket(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML) { document.getElementById('message').innerHTML += innerHTML + '<br/>'; } function closeWebSocket() { websocket.close(); } function clear(){ document.getElementById('message').innerHTML=""; } //发送消息 function send() { var message = document.getElementById('text').value; websocket.send(message); }</script></html>
二:webSocket服务端实现代码:
@ServerEndpoint("/webSocket/iotLog")public class WebSocketIotLog { // 与某个客户端的连接会话,需要通过它来给客户端发送数据 private Session session; // concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。若要实现服务端与单一客户端通信的话,可以使用Map来存放,其中Key可以为用户标识 private static CopyOnWriteArraySet<WebSocketIotLog> webSocketSet = new CopyOnWriteArraySet<WebSocketIotLog>(); /** * 连接建立成功调用的方法 * * @param session 可选的参数。session为与某个客户端的连接会话,需要通过它来给客户端发送数据 */ @OnOpen public void onOpen(Session session) { this.session = session; webSocketSet.add(this); //加入set中 } /** * 连接关闭调用的方法 */ @OnClose public void onClose() { webSocketSet.remove(this); //从set中删除 } /** * 收到客户端消息后调用的方法 * * @param message 客户端发送过来的消息 * @param session 可选的参数 */ @OnMessage public void onMessage(String message, Session session) {// if("SysLog".equalsIgnoreCase(message)){// //系统日志//// }else{// //服务解析日志//// } //群发消息 for (WebSocketIotLog item : webSocketSet) { try { item.sendMessage(message); } catch (IOException e) { e.printStackTrace(); continue; } } } /** * 发生错误时调用 * * @param session * @param error */ @OnError public void onError(Session session, Throwable error) {// System.out.println("发生错误");// error.printStackTrace(); } /** * 根据自己需要添加的方法。 * * @param message * @throws IOException */ public void sendMessage(String message) throws IOException { Logger root = Logger.getRootLogger(); PipedReader reader=null; try { Appender appender = root.getAppender("WriterAppender"); reader= new PipedReader(); Writer writer = new PipedWriter(reader); ((WriterAppender) appender).setWriter(writer); Scanner scanner = new Scanner(reader); while (scanner.hasNext()) { this.session.getBasicRemote().sendText(scanner.nextLine()); } Log4JUtil.makeLogData(); } catch (Exception e) {// TODO 用户Id } //this.session.getAsyncRemote().sendText(message); }}
总结:推送消息的方法需要自己去定义。
阅读全文
0 0
- webSocket 如何实现服务器端 想页面推送实时数据? 动态数据?如何进行连接?
- WebSocket和kafka实现数据实时推送到前端
- 如何在snap中利用socket.io及websocket来进行实时数据更新
- 前端如何接收 websocket 发送过来的实时数据
- beego + websocket 向页面推送数据(一)
- beego + websocket 向页面推送数据(二)
- spring websocket让页面实时获取数据
- WebSocket 实时更新mysql数据到页面
- android中的websocket 应用 websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送。 websocket 的实现的
- android中的websocket 应用 websocket 在实际的应用中不仅仅能做聊天应用,还可以利用websocket长连接保持数据的实时更新以及信息的推送。 websocket 的实现的
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端上显
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端上显
- RabbitMQ订阅发布的消息,通过WebSocket实现数据实时推送到前端
- 如何实现DataGridView实时更新数据
- 如何实现DataGridView实时更新数据
- 【Vertx】利用vertx实现websocket数据推送
- 如何实现从服务器端向页面动态加载JavaScript脚本?
- 如何实现从服务器端向页面动态加载JavaScript脚本?
- Neural Networks and Deep Learning 学习笔记
- top命令详解
- 桶排序
- 一切都是新的
- HDU 6237 A Simple Stone Game(CCPC 2017 哈理工)(素数分解+贪心)(好题)
- webSocket 如何实现服务器端 想页面推送实时数据? 动态数据?如何进行连接?
- js 图片 点击查看大图
- 用U盘制作并安装WIN10 64位原版系统的详细教程
- a类b类c类ip地址范围
- Android进阶-View系列(一)-坐标系和视图坐标系
- 1059. C语言竞赛(20)
- java11月13日
- 【转】inode缓存与dentry缓存
- 经典排序算法总结与实现