websocket 和 ansible配合Tomcat實時日志給前端展示

業務流程圖如下

效果圖展示

1.django安裝websocket模塊

pip install dwebsocket

2.shell腳本

用來傳遞不同的行號輸出不同的內容;
第一個參數為0的時候,默認輸出最后200行內容
第一個參數為其余數字時候,和總行數比較,取差值內容

#!/bin/bash
LOGDIR=/export/Instances/*/*/logs/
LineNum=$1
CatalinaLogFilename=`ls -lrt $LOGDIR | grep catalina.out | tail -1 | awk '{print $NF}'`
LocalhostLogFilename=`ls -lrt $LOGDIR | grep localhost | tail -1 | awk '{print $NF}'`

CatalinaLogFullFilename="${LOGDIR}${CatalinaLogFilename}"
LocalhostLogFullFilename="${LOGDIR}${LocalhostLogFilename}"

#echo $CatalinaLogFullFilename
#echo $LocalhostLogFullFilename
getLogContent(){
	wc -l ${CatalinaLogFullFilename} | awk '{print $1}'
	echo '###########################Catalina.out#######################################'
    /usr/bin/tail -200 ${CatalinaLogFullFilename}
}
if [ -z $LineNum ];then
	getLogContent
elif [ $LineNum -eq 0 ];then
	getLogContent
else
	totalNum=`wc -l ${CatalinaLogFullFilename} | awk '{print $1}'`
	let catNum=totalNum-LineNum
	if [ $catNum -ne 0 ];then
		echo $totalNum
		/usr/bin/tail -${catNum} ${CatalinaLogFullFilename}
	fi
fi

3.django后台試圖函數

views.py對應了/index/websocket_demo/函數處理
應用名字叫做app

from dwebsocket import require_websocket
os.environ.setdefault("DJANGO_SETTINGS_MODULE", "app.settings")

'''websokcet測試函數接收用戶發送過來的IP數'''
require_websocket
def websocket_demo(request):
    flag = True
    # num用作判斷是不是第一次請求,取最后200行內容的判斷
    num = 0
    line_num = 0
    while flag:
	    # read方法是非阻塞的方法,所以每3秒收集一次,防止前端掛掉
        message = request.websocket.read()
        # 客戶端發過來的是close的話關閉websocket連接
        if message == 'close':
                flag = False
	            # 關閉連接
                request.websocket.close()
                break
        #message = request.websocket.wait()
        # 如果客戶端沒發送數據,就是None,再判斷是否num 為1,為1代表第一次讀數據已讀過
        elif not message:
                if num != 1:
                        pass
                else:
                        print '捕獲更新日志開始'
                        from CeleryTasks import ansible_play
                        instance = ansible_play.Ansible_Playbook(3,[ip,])
                        print line_num
                        result = instance.script_shell('/export/App/DevOPS/Python_20160906/CeleryTasks/tomcatLog.sh %s'%line_num)
                        if result:
                                line_num = result.split('\n')[0].strip()
                                request.websocket.send(str(result))
                        else:
                                pass
                        print '捕獲更新日志結束'
        else:
		        # 第一次請求取最后200行內容,此時line_num為0
                num = 1
                ip = message
                print '捕獲初始日志開始'
                #request.websocket.send('return')
                from CeleryTasks import ansible_play
                instance = ansible_play.Ansible_Playbook(3,[ip,])
                print line_num
                result = instance.script_shell('/export/App/DevOPS/Python_20160906/CeleryTasks/tomcatLog.sh %s'%line_num)
#               print result.split('\n')
                line_num = result.split('\n')[0].strip()
#               #message = request.websocket.wait()
#               #print message
                request.websocket.send(str(result))
                print '捕獲初始日志結束'
#               time.sleep(5)
#               request.websocket.close()
#               break
        time.sleep(3)

4.前端頁面

$(function() {
    t=null;
    // connection全局,關閉彈窗作用,websocket關閉操作時候
    connection=null;
    // 連接成功后,置為true
    flag=false;
    // 關閉模態框調用的函數
    $('#myModal').on('hide.bs.modal',
    function() {
        //alert('嘿，我聽說您喜歡模態框...');
        if(t == null){
        }else{
                clearInterval(t); 
        }
        //clearInterval(t);
        $('.modal-footer').empty();
        if(connection == null){
        }else{
		        // 關閉websocket連接
                connection.send('close');
        }
        
    })
});

//pre標簽外部的div標簽,實現彈窗的滾輪一直在下面
function Setdeep(){
    $('.modal-body').scrollTop($('.modal-body')[0].scrollHeight);
}

/*
        下面定義一些函數,用做websocket的連接相關
*/
// 發送關閉websocket命令函數
function wsClose () {
        connection.send('close');
        console.log("Closed");
}
// 收到callback函數回調,插入內容
function wsMessage (event) {
                $('.modal-body').find('pre').append('<code class="avrasm">' + event.data + '</code>');
                Setdeep();
}
// 連接成功,調用函數回調,flag置為true
function wsOpen (event,ip) {
        flag = true;
        console.log('Connected to: ' + event.currentTarget.URL);
        //connection.send('10.187.109.116');
}
// websocket異常報錯console輸出
function wsError(event) {
        console.log("Error: " + event.data);
}

//Tomcat日志查看清理函數,彈窗
function tomcatLog(ths){
        //if( connection == null ){}else{connection.send('close');}
        $('#myModal').find('.modal-dialog').removeClass('modal-sm');
        $('#myModal').find('.modal-dialog').addClass('modal-lg');
        var ip = $(ths).parents('tr').find("td:first").text();
        $('#myModal').find('.modal-body').removeClass('hide');
        $('#myModal').find('.modal-body').empty();
        $('#myModal').find('.modal-body').css("height","750px");
        $('.modal-footer').empty();
        $('#myModal').find('.modal-body').append('<img src="/static/image/loading.gif"></img>');
        $('#myModalLabel').text(ip + ' Tomcat日志');
        $('.modal-body').append('<pre>' + '<code class="avrasm">' + '</code>' + '</pre>');
        // 建立websocket連接,ws是標簽協議,目前nginx上還沒更改;
        connection = new WebSocket('ws://10.187.196.225:65535/index/websocket_demo/');
        connection.onopen = wsOpen;
        connection.onclose = wsClose;
        connection.onmessage = wsMessage;
        connection.onerror = wsError;
        // 每2秒判斷一下是否成功連接上了
        setInterval(function(){
                if(flag){
                        $('.modal-body').find('img').remove();
                        connection.send(ip);
                        // 連接置位符置位false,防止頻繁發送數據給服務器,主要服務器推數據
                        flag = false;
                        $('.modal-footer').append('<button type="button" class="btn btn-danger" onclick="wsClose();buttonDisabled(this);">關閉實時刷新</button>')
                        $('.modal-footer').append('<button type="button" class="btn btn-default" onclick="dowlandTomcatLog(this);">下載日志文件</button>');
                }
        },2000);
}


//獲取pre標簽的中內容給用戶下載
function dowlandTomcatLog(ths){
        var tomcatLogContent = $('.modal-body').find('pre').first().text();
        var blob = stringToBlob(tomcatLogContent);
        //var blob = stringToBlob('hello jd.com\r\nhello baidu.com');
        download('tomcatLog.txt', blob);
}
/* fileName: 默認下載文件名
blob: 下載Blob對象
*/
function download(fileName, blob){
    var aLink = document.createElement('a');
    var evt = document.createEvent("MouseEvents");
    evt.initEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);
    aLink.dispatchEvent(evt);
}
 
/* 文本轉Blob對象 */
function stringToBlob(text) {
    var arr_text = text.split("\n");
    for (var i = 0;i<arr_text.length;i++){
                arr_text[i] = arr_text[i] + '\r\n';
    }
    var blob = new Blob([arr_text],{type : 'text/html'});
    return blob;
}