日志是开发过程中必不可少的一环。特别是一些关键业务日志,或者是生产日志,能够快速帮开发人员定位问题。混合开发也有日志,相对生产上的日志会好处理一些,因为很多时候它是本地日志。本文将重点讨论一下,混合开发中的获取实时日志问题。
Log4js
首先,从零开始写一个日志库显然不合适,这里我们在Github上找了一个用的比较多的日志库: Log4js
配置也很简单,参考官方示例如下:
const log4js = require("log4js");
log4js.configure({
appenders: {
cheese: {
type: "file", filename: "cheese.log" } },
categories: {
default: {
appenders: ["cheese"], level: "error" } }
});
const logger = log4js.getLogger("cheese");
logger.trace("Entering cheese testing");
logger.debug("Got cheese.");
logger.info("Cheese is Comté.");
logger.warn("Cheese is quite smelly.");
logger.error("Cheese is too ripe!");
logger.fatal("Cheese was breeding ground for listeria.");
OK,配置好日志后,然后打日志,把日志文件都输出到cheese.log中,剩下的事情就比较简单了,就是把cheese.log中的日志实时展示到前端,这样方便实时查看运行情况。
WebSocket方案
这种高频率传输的场景最适合用Socket了,因为它不仅可以请求服务端消息,服务端还可以主动向客户端发消息。Socket长连接相对于Http来说更适合这种显示日志的场景。
Socket客户端
OK不多说,下面看实现。首先,我们在前端创建一个WebSocket客户端,标准的Web Api接口中提供了Socket的API,所以直接调用就行,具体实现代码如下:
./WebSocketUtil.js
import {
socketPort} from './config/common.js';
export default class WebSocketUtil{
constructor() {
this.client = null;
}
start() {
const client = new WebSocket(`ws://localhost:${
socketPort}/`, 'echo-protocol');
client.onerror = function() {
console.log('Connection Error');
};
client.onopen = function() {
console.log('WebSocket Client Connected');
};
client.onclose = function() {
console.log('echo-protocol Client Closed');
}