金沙官网线上:python websocket网页实时显示远程服

功能:用websocket技术,在运维工具的浏览器上实时显示远程服务器上的日志信息

前言:工作中在验证前端页面展示数据时,接触到websocket这一概念,这里粗略记录下关于websocket的理解和常用方式。

一般我们在运维工具部署环境的时候,需要实时展现部署过程中的信息,或者在浏览器中实时显示程序日志给开发人员看。你还在用ajax每隔段时间去获取服务器日志?out了,试试用websocket方式吧

(1)什么是websocket?

我用bottle框架,写了个websocket服务端,浏览器连接到websocket server,再用python subprocess获取远程服务器的日志信息,subprocess,就是用Popen调用shell的shell命令而已,这样可以获取到实时的日志了,然后再send到websocket server中,那连接到websocket server的浏览器,就会实时展现出来了

命名:看起来好像和socket有某种关系,但是根据查询了解到,WebSocket只是借用了这一概念,使用方面,完全两个东西,大概因为Socket早在它之前已经是一个深入人心的概念。

用二台服务器来实现这个场景,A服务器是websocket服务端,B服务器是日志端

官方解释:WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。--百度百科

A服务器是我浏览器本机,websocket服务端也是这台机,IP是:192.168.2.222

简单理解:WebSocket是一种为了满足浏览器与服务器端实时数据交互需要而制订的一种新的网络协议。

B服务器是要远程查看日志的服务器,我这里用:192.168.2.224

可以把WebSocket想象成HTTP,同为应用层协议,在与服务器通信过程扮演角色类似。但是WebSocket是基于TCP的应用层协议,只需要一次连接(握手),以后传输数据不需要重新建立连接,可以直接发送数据,这里就区分了和http协议的不同(每次都要重新请求,服务端返回数据后结束)。javascript中常用的ajax技术所做的工作也是完成前端和服务器的数据交互,但是Ajax技术需要客户端发起请求,而WebSocket服务器和客户端可以相互推送信息,更为灵活的支撑业务需要。

以下是在A服务器的操作(Python2)

(2)前端常用方式?

安装:

前端比较常用的是在javascript中使用WebSocket,建立与服务端WebSocket服务的通信,从而请求服务端或者监听服务端推送数据消息,达到实时数据交互的需要。

    pip install bottle

一个参考网上使用python+bottle+javascript的例子

    pip install websocket-client

前端:

    pip install bottle-websocket

websocket后端:

websocket servet的python代码:

(3)调试模拟websocket通信

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*-
 3 from bottle import get, run
 4 from bottle.ext.websocket import GeventWebSocketServer
 5 from bottle.ext.websocket import websocket
 6 users = set()   # 连接进来的websocket客户端集合
 7 @get('/websocket/', apply=[websocket])
 8 def chat(ws):
 9     users.add(ws)
10     while True:
11         msg = ws.receive()  # 接客户端的消息
12         if msg:
13             for u in users:
14                 u.send(msg) # 发送信息给所有的客户端
15         else:
16             break
17     # 如果有客户端断开连接,则踢出users集合
18     users.remove(ws)
19 run(host='0.0.0.0', port=8000, server=GeventWebSocketServer)

Chrome F12查看websocket数据交互过程:

 

$1$ 在你得知用到websocket的界面,进入调试模式,刷新界面,选择2-“Network->WS”后看到的1-Name下面一些会话就是正在通信的websocket连接;

记得安装bottle、websocket-client 、bottle-websocket 模块,服务端允许所有的IP访问其8000端口

$2$ 选择你的一个websocket会话可以在3-Frames中查看当前数据(Receive或者Send)

 

$3$ Headers里面是websocket请求的URL和头

金沙官网线上,websocket服务端除了用以上的方法外,还可以用这下面的方法实现:

(4)关于websocket自己摸索的一些可扩展的思路

 http://www.linuxyw.com/831.html

基于python脚本或者java代码的一个websocket后台服务+javascript或者python实现websocket客户端+shell脚本

在电脑桌面,写一个简单的HTML5  javascripts页面,随便命名了,如test.html,这个页面使用了websocket连接到websocket服务端:

一个简易查看后台日志的定制工具

 1  <!DOCTYPE html>
 2 <html>
 3 <head>
 4 </head>
 5     <style>
 6         #msg{
 7             width:400px; height:400px; overflow:auto; border:2px solid #000000;background-color:#000000;color:#ffffff;
 8     }
 9     </style>
10 </head>
11 <body>
12     <p>实时日志</p>
13     <div id="msg"></div>
14     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
15     <script>
16     $(document).ready(function() {
17         /* !window.WebSocket、window.MozWebSocket检测浏览器对websocket的支持*/
18         if (!window.WebSocket) {
19             if (window.MozWebSocket) {
20                 window.WebSocket = window.MozWebSocket;
21             } else {
22                 $('#msg').prepend("<p>你的浏览器不支持websocket</p>");
23             }
24         }
25         /* ws = new WebSocket 创建WebSocket的实例  注意设置对以下的websocket的地址哦*/
26         ws = new WebSocket('ws://192.168.2.222:8000/websocket/');
27         /*
28             ws.onopen  握手完成并创建TCP/IP通道,当浏览器和WebSocketServer连接成功后,会触发onopen消息
29             ws.onmessage 接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;
30         */
31         ws.onopen = function(evt) {
32             $('#msg').append('<li>websocket连接成功</li>');
33         }
34         ws.onmessage = function(evt) {
35             $('#msg').prepend('<li>' + evt.data + '</li>');
36         }
37     });
38 </script>
39 </body>
40 </html>

一个后台服务监控报警功能

本文由金沙官网线上发布于操作系统,转载请注明出处:金沙官网线上:python websocket网页实时显示远程服

您可能还会对下面的文章感兴趣: