适用于监控大屏的websocket

现在前后端分离已经成为主流，当大家都已经习惯在用前端的ajax或是axious去调用后段接口请求数据时，这里介绍一种新型的方式，它就是websocket，相比较传统的调用方式，它有哪些有点呢
1 首先，我们需要明确它的使用范围：
博主这里的项目是因为需要做一个实时监控交易数据，所以这里需要使用到长链接去实时的展示数据，避免常规的调用每次开启链接和关闭链接带来的额外的资源开销，实时性还达不到要求，如果不是这样，其实一直这样的开启一个长链接也是十分的占用资源的，所以，小伙伴们需要依据实际的业务场景来选择自己的实现方式哦
2 websocket的实现原理：
WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久连接的（长连接，循环连接的不算）首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解

另外Html5是指的一系列新的API，或者说新规范，新技术。Http协议本身只有1.0和1.1，而且跟Html本身没有直接关系。。
通俗来说，你可以用HTTP协议传输非Html数据，就是这样=。=
再简单来说，层级不一样

3 以下是腾讯云技术社区整理的 WebSocket原理说明 ——

众所周知，Web应用的通信过程通常是客户端通过浏览器发出一个请求，服务器端接收请求后进行处理并返回结果给客户端，客户端浏览器将信息呈现。这种机制对于信息变化不是特别频繁的应用可以良好支撑，但对于实时要求高、海量并发的应用来说显得捉襟见肘，尤其在当前业界移动互联网蓬勃发展的趋势下，高并发与用户实时响应是Web应用经常面临的问题，比如金融证券的实时信息、Web导航应用中的地理位置获取、社交网络的实时消息推送等。

传统的请求-响应模式的Web开发在处理此类业务场景时，通常采用实时通讯方案。比如常见的轮询方案，其原理简单易懂，就是客户端以一定的时间间隔频繁请求的方式向服务器发送请求，来保持客户端和服务器端的数据同步。其问题也很明显：当客户端以固定频率向服务器端发送请求时，服务器端的数据可能并没有更新，带来很多无谓请求，浪费带宽，效率低下。

基于Flash，AdobeFlash通过自己的Socket实现完成数据交换，再利用Flash暴露出相应的接口给JavaScript调用，从而达到实时传输目的。此方式比轮询要高效，且因为Flash安装率高，应用场景广泛。然而，移动互联网终端上Flash的支持并不好：IOS系统中无法支持Flash，Android虽然支持Flash但实际的使用效果差强人意，且对移动设备的硬件配置要求较高。2012年Adobe官方宣布不再支持Android4.1+系统，宣告了Flash在移动终端上的死亡。

传统的Web模式在处理高并发及实时性需求的时候，会遇到难以逾越的瓶颈，需要一种高效节能的双向通信机制来保证数据的实时传输。在此背景下，基于HTML5规范的、有Web TCP之称的 WebSocket应运而生。早期HTML5并没有形成业界统一的规范，各个浏览器和应用服务器厂商有着各异的类似实现，如IBM的MQTT、Comet开源框架等。直到2014年，HTML5终于尘埃落地，正式落实为实际标准规范，各个应用服务器及浏览器厂商逐步开始统一，在 JavaEE7中也实现了WebSocket协议。至此无论是客户端还是服务端的WebSocket都已完备。用户可以查阅HTML5规范，熟悉新的HTML协议规范及WebSocket支持。

4 那websocket区别与传统的请求方式是什么呢？
在讲Websocket之前，我就顺带着讲下 long poll 和 ajax轮询的原理。
首先是 ajax轮询，ajax轮询的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
long poll 其实原理跟 ajax轮询差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起

5 以下简要介绍一下WebSocket的原理及运行机制以及优点

WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。它与HTTP一样通过已建立的TCP连接来传输数据，但是它和HTTP最大不同是：

WebSocket是一种双向通信协议。在建立连接后，WebSocket服务器端和客户端都能主动向对方发送或接收数据，就像Socket一样；
WebSocket需要像TCP一样，先建立连接，连接成功后才能相互通信

相比HTTP长连接，WebSocket有以下特点：

是真正的全双工方式，建立连接后客户端与服务器端是完全平等的，可以互相主动请求。而HTTP长连接基于HTTP，是传统的客户端对服务器发起请求的模式。
HTTP长连接中，每次数据交换除了真正的数据部分外，服务器和客户端还要大量交换HTTP header，信息交换效率很低。Websocket协议通过第一个request建立了TCP连接之后，之后交换的数据都不需要发送 HTTP header就能交换数据，这显然和原有的HTTP协议有区别所以它需要对服务器和客户端都进行升级才能实现（主流浏览器都已支持HTML5）。此外还有 multiplexing、不同的URL可以复用同一个WebSocket连接等功能。这些都是HTTP长连接不能做到的。

6 前面文字太多了，接下来好好看看实际应用吧
1 首先我们在springboot项目中添加websocket 依赖包

  <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency>

2 添加一个websocket的组件

 @ServerEndpoint("/websocket")
@Component
public class WebSocketSender {private volatile static int onlineCount = 0;private static Map<String, WebSocketSender> clients = new ConcurrentHashMap<String, WebSocketSender>();private Session session;private String uuid;@OnOpenpublic void onOpen( Session session) throws IOException {this.session = session;//生成唯一IDthis.uuid = String.valueOf(UUID.randomUUID());addOnlineCount();clients.put(uuid, this);System.out.println("已连接：" + uuid);System.out.println("已连接客户端数："+onlineCount);//连接成功实时发送除交易详情之外数据FrontWebSocket frontWebSocket = (FrontWebSocket) BeanUtil.getBean("frontWebSocket");System.out.println(frontWebSocket);frontWebSocket.sendfirstToAllInfo(uuid);}@OnClosepublic void onClose() throws IOException {clients.remove(uuid);subOnlineCount();}@OnMessagepublic void onMessage(String message) throws IOException {System.out.println("收到客户端发送的消息:" + message);}@OnErrorpublic void onError(Session session, Throwable error) {error.printStackTrace();}/*** 给特定客户端发送数据* @param message* @param uuid* @throws IOException*/public void sendMessageTo(String message, String uuid) throws IOException {for (WebSocketSender item : clients.values()) {if (item.uuid.equals(uuid))item.session.getAsyncRemote().sendText(message);}}/*** 给所有连接客户端发送数据* @param message* @throws IOException*/public  void sendMessageAll(String message) throws IOException {for (WebSocketSender item : clients.values()) {item.session.getBasicRemote().sendText(message);//同步//item.session.getAsyncRemote().sendText(message);//异步}}public static synchronized int getOnlineCount() {return onlineCount;}public static synchronized void addOnlineCount() {WebSocketSender.onlineCount++;}public static synchronized void subOnlineCount() {WebSocketSender.onlineCount--;}public static synchronized Map<String, WebSocketSender> getClients() {return clients;}
}

3 添加完组件之后，我们就可以直接在接口层使用它啦，是不是很方便呢

 @Component
public class FrontWebSocket {Logger logger = LoggerFactory.getLogger(FrontWebSocket.class);@Autowiredprivate WebSocketSender webSocketSender;public void getDiagram(){Map<String, Object> map = monitorApiService.getDiagramInfo();try {webSocketSender.sendMessageAll(JSONObject.toJSONString(map));} catch (IOException e) {e.printStackTrace();}}}}

3 前端Vue如何链接呢，也很简单

     connWebsocket:function() {var wsurl = 'ws://127.0.0.1:7010/websocket';var websocket;var i = 0;if (window.WebSocket) {websocket = new WebSocket(wsurl);//连接建立websocket.onopen = function(evevt) {// alert("链接成功");}//收到消息websocket.onmessage = function(event) {//接收后台数据后转换为对象var receive = event.data;var map = JSON.parse(receive);}//发生错误websocket.onerror = function(event) {alert("发生错误！");}//连接关闭websocket.onclose = function(event) {alert("关闭连接！")}function send() {var msg = 123;try {websocket.send(JSON.stringify(msg));} catch (ex) {console.log(ex);}}//按下enter键发送消息$(window).keydown(function(event) {if (event.keyCode == 13) {console.log('user enter');send();}});//点发送按钮发送消息$('.send').bind('click', function() {send();});} else {alert('该浏览器不支持web socket');}}

适用于监控大屏的websocket相关推荐

HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-1快速上手
1 ECharts简介 ECharts是一款开源的基于JavaScript的数据可视化图表库,可以流畅地运行在PC和移动设备上,兼容当前绝大多数浏览器.它底层依赖矢量图形库ZRender,支持超过1 ...
别人家的防疫实时监控大屏是怎么做的？方法和技巧都在这里了
复工返学高峰季是疫情防控的要紧时期,引起了全国企业和高校的高度重视.不少公司和学校将信息化手段应用到了防疫工作中,数字大屏可以用做防疫数据监控的前端平台,也能通过数据展示警醒大家不可放松警惕,在防疫数 ...
推荐一款清爽的实时监控大屏附安装教程
点击▲关注 "爪哇妹" 给公众号标星置顶更多摄影技巧第一时间直达前言前段时间分享了一个支付监控大屏,好多小伙伴在问撸主是怎么实现的,所以花几分钟时间跟大家分享一下. 预览 ...
数据平台初试（产品篇）——监控大屏初露面
申明:文中涉及到的图片均为原创,未经授权,不得使用. 公众号原文链接: 数据平台初试(产品篇)--监控大屏初露面本文介绍在数据采集过程中不可或缺的一枚神器--数据采集监控大屏,如果想了解数据采集 ...
HTML+CSS+JavaScript+Ajax+ECharts实现疫情实时监控大屏-2设计与实现
疫情期间,各类应用系统.大数据系统为防疫抗疫带来了巨大助力.国家博物馆首次将代码列为藏品,那就是抗击疫情期间来自阿里程序员写的健康码第一行代码以及研发人员的签名.这展现了广大程序员在疫情面前,争当勇敢 ...
大促中为什么需要可视化监控大屏？
云妹导读: 大数据时代,我们最常听到的一句话就是"用数据说话".但数据本身都是冰冷的数字,它很难直接告诉我们哪些数据是有价值的信息.只有把相对复杂.抽象的数据通过可视的方式以人们更 ...
管理驾驶舱监控大屏展现
管理驾驶舱监控大屏展现给领导做一些综合性的专题分析,会有多种展示方式,有的通过单一的报表,单一的统计图, 下面的示例是做的综合管理驾驶舱,领导可以直观到各个宏观层面的数据,也可以做数据的钻取信息统 ...
Vue+Echarts监控大屏实例十五：智慧物流监控模板实例下
接上一篇:Vue+Echarts监控大屏实例十四:智慧物流监控模板实例上源码下载地址: Vue+Echarts监控大屏实例十二:智慧物流监控模板实例下载 4.8 员工监控界面展示数量分布. ...
Serverless 开发，基于 IoT物联网 + 表格存储DB + DataV 搭建实时环境监控大屏
今天给大家带来基于阿里云 IoT 物联网平台 + Tablestore 表格存储数据库 + DataV大屏三大云产品组合搭建实时环境监控大屏的开发实战. 少啰嗦,先看效果. 部署后效果 1.技 ...

适用于监控大屏的websocket

适用于监控大屏的websocket相关推荐

最新文章

热门文章