使用websocket技术实时输出系统日志到浏览器端，实现WebLog

boot-websocket-log：

spring boot系统中使用websocket技术实时输出系统日志到浏览器端，因为是实时输出，所有第一时间就想到了使用webSocket,而且在spring boot中，使用websocket超级方便，阅读本文，你会接触到以下关键词相关技术：

WebSocket（stopmp服务端）

stomp协议

sockjs.min.js

stomp.min.js（stomp客户端），

本文使用到的其实就是

使用spring boot自带的webSocket模块提供stomp的服务端，

前端使用stomp.min.js做stomp的客户端，

使用sockjs来链接，

前端订阅后端日志端点的消息，后端实时推送，达到日志实时输出到web页面的目的

此项目使用场景

  1. 集成到已有的项目中，实现项目日志文件web端浏览（第一个功能）

  2. 单独使用，指定已有项目的日志文件位置，实现项目日志web端浏览（第二个功能）

  3. 使用boot-websocket-log的stopmp服务推送日志其他的非web端消费

参考博文：https://gitee.com/kailing/boot-websocket-log

知识补充1：stomp协议：

STOMP即Simple (or Streaming) Text Orientated Messaging Protocol，面向消息的简单文本协议，它提供了一个可互操作的连接格式，允许STOMP客户端与任意STOMP消息代理（Broker）进行交互。STOMP协议由于设计简单，易于开发客户端，因此在多种语言和多种平台上得到广泛地应用。

STOMP协议的前身是TTMP协议（一个简单的基于文本的协议），专为消息中间件设计。

STOMP是一个非常简单和容易实现的协议，其设计灵感源自于HTTP的简单性。尽管STOMP协议在服务器端的实现可能有一定的难度，但客户端的实现却很容易。例如，可以使用Telnet登录到任何的STOMP代理，并与STOMP代理进行交互。

STOMP协议与HTTP协议很相似，它基于TCP协议，使用了以下命令：

CONNECT
SEND
SUBSCRIBE
UNSUBSCRIBE
BEGIN
COMMIT
ABORT
ACK
NACK
DISCONNECT

STOMP的客户端和服务器之间的通信是通过“帧”（Frame）实现的，每个帧由多“行”（Line）组成。
第一行包含了命令，然后紧跟键值对形式的Header内容。
第二行必须是空行。
第三行开始就是Body内容，末尾都以空字符结尾。

例： 
发送消息

SEND 
destination:/queue/trade 
content-type:application/json 
content-length:44 
{“action”:”BUY”,”ticker”:”MMM”,”shares”,44}^@

订阅消息

SUBSCRIBE 
id:sub-1 
destination:/topic/price.stock.* 
^@

服务器进行广播消息

MESSAGE 
message-id:nxahklf6-1 
subscription:sub-1 
destination:/topic/price.stock.MMM 
{“ticker”:”MMM”,”price”:129.45}^@

客户端 API

引入stomp.js

<script type="application/javascript" src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>

发起连接

客户端可以通过使用Stomp.js和sockjs-client连接

// 建立连接对象（还未发起连接）
var socket=new SockJS("/spring-websocket-portfolio/portfolio");

// 获取 STOMP 子协议的客户端对象
var stompClient = Stomp.over(socket);

// 向服务器发起websocket连接并发送CONNECT帧
stompClient.connect(
    {},
function connectCallback (frame) {
    // 连接成功时（服务器响应 CONNECTED 帧）的回调方法
        document.getElementById("state-info").innerHTML = "连接成功";
        console.log('已连接【' + frame + '】');
        stompClient.subscribe('/topic/getResponse', function (response) {
            showResponse(response.body);
        });
    },
function errorCallBack (error) {
    // 连接失败时（服务器响应 ERROR 帧）的回调方法
        document.getElementById("state-info").innerHTML = "连接失败";
        console.log('连接失败【' + error + '】');
    }
);

stompClient.connect()方法签名：

client.connect(headers, connectCallback, errorCallback);

其中 
headers表示客户端的认证信息，如：

var headers = {
  login: 'mylogin',
  passcode: 'mypasscode',
  // additional header
  'client-id': 'my-client-id'
};
若无需认证，直接使用空对象 “{}” 即可；

connectCallback 表示连接成功时（服务器响应 CONNECTED 帧）的回调方法； 
errorCallback 表示连接失败时（服务器响应 ERROR 帧）的回调方法，非必须；

断开连接

若要从客户端主动断开连接，可调用 disconnect() 方法

client.disconnect(function () {alert("See you next time!");
};

该方法为异步进行，因此包含了回调参数，操作完成时自动回调；

心跳机制

若使用STOMP 1.1 版本，默认开启了心跳检测机制，可通过client对象的heartbeat field进行配置（默认值都是10000 ms）：

client.heartbeat.outgoing = 20000;  // client will send heartbeats every 20000ms
client.heartbeat.incoming = 0;      // client does not want to receive heartbeats from the server
// The heart-beating is using window.setInterval() to regularly send heart-beats and/or check server heart-beats

发送信息
连接成功后，客户端可使用 send() 方法向服务器发送信息：

client.send(destination url[, headers[, body]]);

其中 
destination url 为服务器 controller中 @MessageMapping 中匹配的URL，字符串，必须参数； 
headers 为发送信息的header，JavaScript 对象，可选参数； 
body 为发送信息的 body，字符串，可选参数；

例：

client.send("/queue/test", {priority: 9}, "Hello, STOMP");
client.send("/queue/test", {}, "Hello, STOMP");

订阅、接收信息

STOMP 客户端要想接收来自服务器推送的消息，必须先订阅相应的URL，即发送一个 SUBSCRIBE 帧，然后才能不断接收来自服务器的推送消息； 
订阅和接收消息通过 subscribe() 方法实现：

subscribe(destination url, callback[, headers])

其中 
destination url 为服务器 @SendTo 匹配的 URL，字符串； 
callback 为每次收到服务器推送的消息时的回调方法，该方法包含参数 message； 
headers 为附加的headers，JavaScript 对象；什么作用？ 
该方法返回一个包含了id属性的 JavaScript 对象，可作为 unsubscribe() 方法的参数；

例：var headers = {ack: 'client', 'selector': "location = 'Europe'"};
var  callback = function(message) {
  if (message.body) {
    alert("got message with body " + message.body)
  } else {
    alert("got empty message");
  }
});
var subscription = client.subscribe("/queue/test", callback, headers);

取消订阅
var subscription = client.subscribe(...);

subscription.unsubscribe();
JSON 支持
STOMP 帧的 body 必须是 string 类型，若希望接收/发送 json 对象，可通过 JSON.stringify() and JSON.parse() 实现； 
例：

var quote = {symbol: 'APPL', value: 195.46};
client.send("/topic/stocks", {}, JSON.stringify(quote));

client.subcribe("/topic/stocks", function(message) {
var quote = JSON.parse(message.body);
alert(quote.symbol + " is at " + quote.value);
});

事务支持

STOMP 客户端支持在发送消息时用事务进行处理： 
举例说明：

// start the transaction
// 该方法返回一个包含了事务 id、commit()、abort() 的JavaScript 对象
var tx = client.begin();
// send the message in a transaction
// 最关键的在于要在 headers 对象中加入事务 id，若没有添加，则会直接发送消息，不会以事务进行处理
client.send("/queue/test", {transaction: tx.id}, "message in a transaction");
// commit the transaction to effectively send the message
tx.commit();
// tx.abort();

Debug 信息

STOMP 客户端默认将传输过程中的所有 debug 信息以 console.log() 形式输出到客户端浏览器中，也可通过以下方式输出到 DOM 中：

client.debug = function(str) {
    // str 参数即为 debug 信息
// append the debug log to a #debug div somewhere in the page using JQuery:
$("#debug").append(str + "\n");
};

认证

这一部分内容看的不是很理解，因此直接将原文放在这里了，待补充。 
By default, STOMP messages will be automatically acknowledged by the server before the message is delivered to the client.

The client can chose instead to handle message acknowledgement by subscribing to a destination and specify a ack header set to client or client-individual.

In that case, the client must use the message.ack() method to inform the server that it has acknowledge the message.

var subscription = client.subscribe("/queue/test",
  function(message) {
    // do something with the message
    ...
    // and acknowledge it
    message.ack();
  },
  {ack: 'client'}
);
The ack() method accepts a headers argument for additional headers to acknowledge the message. For example, it is possible to acknowledge a message as part of a transaction and ask for a receipt when the ACK STOMP frame has effectively be processed by the broker: 
var tx = client.begin(); 
message.ack({ transaction: tx.id, receipt: ‘my-receipt’ }); 
tx.commit(); 
The nack() method can also be used to inform STOMP 1.1 brokers that the client did not consume the message. It takes the same arguments than the ack() method.

参考博文：https://blog.csdn.net/jqsad/article/details/77745379

同 HTTP 在 TCP 套接字上添加请求-响应模型层一样，STOMP 在 WebSocket 之上提供了一个基于帧的线路格式层，用来定义消息语义；

补充知识2：websocket：

首先HTTP有1.1和1.0之说，也就是所谓的keep-alive，把多个HTTP请求合并为一个，但是Websocket其实是一个新协议，跟HTTP协议基本没有关系，只是为了兼容现有浏览器的握手规范而已，也就是说它是HTTP协议上的一种补充可以通过这样一张图理解：

重点：两个关键（主动推送信息，持久连接）

二、Websocket是什么样的协议，具体有什么优点
首先，Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说。
简单的举个例子吧，用目前应用比较广泛的PHP生命周期来解释。
1) HTTP的生命周期通过Request来界定，也就是一个Request 一个Response，那么在HTTP1.0中，这次HTTP请求就结束了。
在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。
但是请记住 Request = Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。

教练，你BB了这么多，跟Websocket有什么关系呢？
_(:з」∠)_好吧，我正准备说Websocket呢。。
首先Websocket是基于HTTP协议的，或者说借用了HTTP的协议来完成一部分握手。
在握手阶段是一样的
-------以下涉及专业技术内容，不想看的可以跳过lol:，或者只看加黑内容--------
首先我们来看个典型的Websocket握手（借用Wikipedia的。。）

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

熟悉HTTP的童鞋可能发现了，这段类似HTTP协议的握手请求中，多了几个东西。
我会顺便讲解下作用。

Upgrade: websocket
Connection: Upgrade

这个就是Websocket的核心了，告诉Apache、Nginx等服务器：注意啦，窝发起的是Websocket协议，快点帮我找到对应的助理处理~不是那个老土的HTTP。

Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

首先，Sec-WebSocket-Key 是一个Base64 encode的值，这个是浏览器随机生成的，告诉服务器：泥煤，不要忽悠窝，我要验证尼是不是真的是Websocket助理。
然后，Sec_WebSocket-Protocol 是一个用户定义的字符串，用来区分同URL下，不同的服务所需要的协议。简单理解：今晚我要服务A，别搞错啦~
最后，Sec-WebSocket-Version 是告诉服务器所使用的Websocket Draft（协议版本），在最初的时候，Websocket协议还在 Draft 阶段，各种奇奇怪怪的协议都有，而且还有很多期奇奇怪怪不同的东西，什么Firefox和Chrome用的不是一个版本之类的，当初Websocket协议太多可是一个大难题。。不过现在还好，已经定下来啦~大家都使用的一个东西~ 脱水：服务员，我要的是13岁的噢→_→

然后服务器会返回下列东西，表示已经接受到请求， 成功建立Websocket啦！

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat

这里开始就是HTTP最后负责的区域了，告诉客户，我已经成功切换协议啦~

Upgrade: websocket
Connection: Upgrade

依然是固定的，告诉客户端即将升级的是Websocket协议，而不是mozillasocket，lurnarsocket或者shitsocket。
然后，Sec-WebSocket-Accept 这个则是经过服务器确认，并且加密过后的 Sec-WebSocket-Key。服务器：好啦好啦，知道啦，给你看我的ID CARD来证明行了吧。。
后面的，Sec-WebSocket-Protocol 则是表示最终使用的协议。

至此，HTTP已经完成它所有工作了，接下来就是完全按照Websocket协议进行了。
具体的协议就不在这阐述了。

你TMD又BBB了这么久，那到底Websocket有什么鬼用，http long poll，或者ajax轮询不都可以实现实时信息传递么。

好好好，年轻人，那我们来讲一讲Websocket有什么用。
来给你吃点胡（苏）萝（丹）卜（红）

三、Websocket的作用
在讲Websocket之前，我就顺带着讲下 long poll 和 ajax轮询 的原理。
首先是 ajax轮询 ，ajax轮询 的原理非常简单，让浏览器隔个几秒就发送一次请求，询问服务器是否有新信息。
场景再现：
客户端：啦啦啦，有没有新信息(Request)
服务端：没有（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：没有。。（Response）
客户端：啦啦啦，有没有新信息(Request)
服务端：你好烦啊，没有啊。。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：好啦好啦，有啦给你。（Response）
客户端：啦啦啦，有没有新消息（Request）
服务端：。。。。。没。。。。没。。。没有（Response） ---- loop（一直循环）

long poll
long poll 其实原理跟 ajax轮询 差不多，都是采用轮询的方式，不过采取的是阻塞模型（一直打电话，没收到就不挂电话），也就是说，客户端发起连接后，如果没消息，就一直不返回Response给客户端。直到有消息才返回，返回完之后，客户端再次建立连接，周而复始。
场景再现
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request）
服务端：额。。 等待到有消息的时候。。来 给你（Response）
客户端：啦啦啦，有没有新信息，没有的话就等有了才返回给我吧（Request） -loop

从上面可以看出其实这两种方式，都是在不断地建立HTTP连接，然后等待服务端处理，可以体现HTTP协议的另外一个特点，被动性。
何为被动性呢，其实就是，服务端不能主动联系客户端，只能有客户端发起。
简单地说就是，服务器是一个很懒的冰箱（这是个梗）（不会、不能主动发起连接），但是上司有命令，如果有客户来，不管多么累都要好好接待。说完这个，我们再来说一说上面的缺陷（原谅我废话这么多吧OAQ）
从上面很容易看出来，不管怎么样，上面这两种都是非常消耗资源的。
ajax轮询 需要服务器有很快的处理速度和资源。（速度）
long poll 需要有很高的并发，也就是说同时接待客户的能力。（场地大小）
所以ajax轮询 和long poll 都有可能发生这种情况。
客户端：啦啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
客户端：。。。。好吧，啦啦啦，有新信息么？
服务端：月线正忙，请稍后再试（503 Server Unavailable）
然后服务端在一旁忙的要死：冰箱，我要更多的冰箱！更多。。更多。。（我错了。。这又是梗。。）

言归正传，我们来说Websocket吧
通过上面这个例子，我们可以看出，这两种方式都不是最好的方式，需要很多资源。
一种需要更快的速度，一种需要更多的'电话'。这两种都会导致'电话'的需求越来越高。
哦对了，忘记说了HTTP还是一个无状态协议。（感谢评论区的各位指出OAQ）
通俗的说就是，服务器因为每天要接待太多客户了，是个健忘鬼，你一挂电话，他就把你的东西全忘光了，把你的东西全丢掉了。你第二次还得再告诉服务器一遍。

所以在这种情况下出现了，Websocket出现了。
他解决了HTTP的这几个难题。
首先，被动性，当服务器完成协议升级后（HTTP->Websocket），服务端就可以主动推送信息给客户端啦。
所以上面的情景可以做如下修改。
客户端：啦啦啦，我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）
服务端：ok，确认，已升级为Websocket协议（HTTP Protocols Switched）
客户端：麻烦你有信息的时候推送给我噢。。
服务端：ok，有的时候会告诉你的。
服务端：balabalabalabala
服务端：balabalabalabala
服务端：哈哈哈哈哈啊哈哈哈哈
服务端：笑死我了哈哈哈哈哈哈哈

就变成了这样，只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你）
这样的协议解决了上面同步有延迟，而且还非常消耗资源的这种情况。

那么为什么他会解决服务器上消耗资源的问题呢？
其实我们所用的程序是要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，然后再传送给相应的Handler（PHP等）来处理。
简单地说，我们有一个非常快速的接线员（Nginx），他负责把问题转交给相应的客服（Handler）处理器。
本身接线员基本上速度是足够的，但是每次都卡在客服（Handler）了，老有客服处理速度太慢。，导致客服不够。
Websocket就解决了这样一个难题，建立后，可以直接跟接线员建立持久连接，有信息的时候客服想办法通知接线员，然后接线员在统一转交给客户。
这样就可以解决客服处理速度过慢的问题了。

同时，在传统的方式上，要不断的建立，关闭HTTP协议，由于HTTP是非状态性的，每次都要重新传输identity info（鉴别信息），来告诉服务端你是谁。
虽然接线员很快速，但是每次都要听这么一堆，效率也会有所下降的，同时还得不断把这些信息转交给客服，不但浪费客服的处理时间，而且还会在网路传输中消耗过多的流量/时间。
但是Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求，这样就解决了接线员要反复解析HTTP协议，还要查看identity info的信息。
同时由客户主动询问，转换为服务器（推送）有信息的时候就发送（当然客户端还是等主动发送信息过来的。。），没有信息的时候就交给接线员（Nginx），不需要占用本身速度就慢的客服（Handler）了

参考：https://www.zhihu.com/question/20215561

补充3：stomp.js客户端（Stomp Over Webscoket）

使用springboot来实现WebLog相关推荐

  1. SpringBoot集成AOP管理日志

    写在前面 如何将所有的通过url的请求参数以及返回结果都输出到日志中? 如果在controller的类中每个方法名都写一个log输出肯定是不明智的选择.使用Spring的AOP功能即可完成. AOP ...

  2. SpringBoot和FreeMarker整合

    目录 使用工具 环境搭建 代码示例 java目录 WebLogAspect.java DruidDBConfig.java UserMapper.java User.java UserServiceI ...

  3. SpringBoot中使用AOP打印接口日志的方法（转载）

    前言 AOP 是 Aspect Oriented Program (面向切面)的编程的缩写.他是和面向对象编程相对的一个概念.在面向对象的编程中,我们倾向于采用封装.继承.多态等概念,将一个个的功能在 ...

  4. 【SpringBoot】SpingBoot整合AOP

    说起spring,我们知道其最核心的两个功能就是AOP(面向切面)和IOC(控制反转),这边文章来总结一下SpringBoot如何整合使用AOP. 一.示例应用场景:对所有的web请求做切面来记录日志 ...

  5. java mvc返回js_Java的学习（39）springboot

    使用Spring boot ,可以轻松的创建独立运行的程序,非常容易构建独立的服务组件,是实现分布式架构.微服务架构利器. Spring boot简化了第三方包的引用,通过提供的starter,简化了 ...

  6. springboot开启debug日志_SpringBoot 如何优雅的打印日志？

    一.打印日志注意事项 1.使用 Slf4j 注解 这个代码相信大家都很熟悉,你是否曾经看到或者自己因 copy 而 没有改变"当前类名"? 如果你们项目用到 lombok ,可以在 ...

  7. SpringBoot 使用AOP功能

    RPC,AOP都会用到代理,代理的技术有jdk的Proxy代理(必须实现接口),cglib(可以不实现接口,直接实现类),Javassist(jboss )而Spring boot本身也在方方面面使用 ...

  8. SpringBoot—集成AOP详解（面向切面编程Aspect）

    关注微信公众号:CodingTechWork,一起学习进步. AOP介绍 AOP概述   AOP是Aspect-Oriented Programming,即为面向(切面)方面编程.在维基百科中的解释: ...

  9. springboot+aop切点记录请求和响应信息

    本篇主要分享的是springboot中结合aop方式来记录请求参数和响应的数据信息:这里主要讲解两种切入点方式,一种方法切入,一种注解切入:首先创建个springboot测试工程并通过maven添加如 ...

最新文章

  1. 拼多多二面：Mybatis是如何执行一条SQL命令的？
  2. Python----Day1
  3. Wireshark如何选择多行
  4. 乌班图好玩的命令_乌班图必须知道的60个命令
  5. SpringBoot实现注册时头像上传与下载
  6. Oracle数据库基本概念理解（1）
  7. 对PostgreSQL cmin和cmax的理解
  8. 24口光纤配线架 cad块_光纤配线架cad画法
  9. 华为9x升级鸿蒙,荣耀9X升级鸿蒙2.0系统截图曝光：4G内存流畅度照样起飞！
  10. python中shuffle是什么意思_选择vs.Shuffle，Python
  11. 当U盘内的文件夹都成了1KB的快捷方式的解决方法
  12. springboot flink结果输入到hbase_Flink流处理
  13. MRI脑影像分析从哲学到技术：一文搞懂VBM预处理基本原理（全网最详细解析）
  14. 节后上班 北京车辆尾号限行2日轮换
  15. dell笔记本安装win7.ios
  16. 互联网思维——用户思维
  17. excel保存快捷键_实例演示：Excel表格数据很少但文件很大，教你如何瘦身缩小...
  18. Vue3.0中Watch的几个问题
  19. 【斯坦福21秋（李沐）】实用机器学习（学习笔记）——1.1课程介绍
  20. 2021-08-12硬盘介绍和磁盘管理

热门文章

  1. Java枚举getDeclaringClass（）方法与示例
  2. Java LineNumberReader getLineNumber（）方法及示例
  3. expm1_Java Math类静态double expm1（double d）及其示例
  4. 再有人问你MySql的隔离级别，直接把这篇文章发给他！
  5. Zookeeper 的 5 大核心知识点！
  6. mysql集群搭建（使用docker 一主一从）
  7. html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
  8. java 对象流传输socket_Java Socket（二）使用TCP传输对象
  9. java编写通信录管理系统_Java 实现通讯录管理系统教程
  10. mysql 主从备份问题_我遇到的mysql主从同步的问题