websocket/dwebsocket 实现前后端的实时通信

1.  用bottle框架,自己写一个服务端实现:

转载   : http://www.linuxyw.com/813.html

 

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

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

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

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

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

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

以下是A服务器的websocket servet的python代码:

 
#!/usr/bin/env python
#coding=utf-8
# __author__ = '戴儒锋'
# http://www.linuxyw.com
"""
    执行代码前需要安装
    pip install bottle
    pip install websocket-client
    pip install bottle-websocket
"""
from bottle import get, run
from bottle.ext.websocket import GeventWebSocketServer
from bottle.ext.websocket import websocket
users = set()   # 连接进来的websocket客户端集合
@get('/websocket/', apply=[websocket])
def chat(ws):
    users.add(ws)
    while True:
        msg = ws.receive()  # 接客户端的消息
        if msg:
            for u in users:
                u.send(msg) # 发送信息给所有的客户端
        else:
            break
    # 如果有客户端断开连接,则踢出users集合
    users.remove(ws)
run(host='0.0.0.0', port=8000, server=GeventWebSocketServer)

 

 

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

 

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

 <!DOCTYPE html>
<html>
<head>
</head>
    <style>
        #msg{
            width:400px; height:400px; overflow:auto; border:2px solid #000000;background-color:#000000;color:#ffffff;
    }
    </style>
</head>
<body>
    <p>实时日志</p>
    <div id="msg"></div>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
    $(document).ready(function() {
        /* !window.WebSocket、window.MozWebSocket检测浏览器对websocket的支持*/
        if (!window.WebSocket) {
            if (window.MozWebSocket) {
                window.WebSocket = window.MozWebSocket;
            } else {
                $('#msg').prepend("<p>你的浏览器不支持websocket</p>");
            }
        }
        /* ws = new WebSocket 创建WebSocket的实例  注意设置对以下的websocket的地址哦*/
        ws = new WebSocket('ws://192.168.1.221:8000/websocket/');
        /*
            ws.onopen  握手完成并创建TCP/IP通道,当浏览器和WebSocketServer连接成功后,会触发onopen消息
            ws.onmessage 接收到WebSocketServer发送过来的数据时,就会触发onmessage消息,参数evt中包含server传输过来的数据;
        */
        ws.onopen = function(evt) {
            $('#msg').append('<li>websocket连接成功</li>');
        }
        ws.onmessage = function(evt) {
            $('#msg').prepend('<li>' + evt.data + '</li>');
        }
    });
</script>
</body>
</html>

 

 

注意:WebSocket('ws://192.168.1.221:8000/websocket/');  这里的192.168.1.221一定要改成你的websocket服务端IP,切记!!!

到这里,就搞定浏览器连接到websocket服务端的场景了,现在要A服务器里写一段代码,去采集B服务器的实时信息了,其实采集原理很简单,就是使用shell中的tailf命令,实时显示最新的信息而已,我们在这段脚本中,使用subprocess.Popen()来远程查看日志信息:

python代码如下:

 

#!/usr/bin/python
# encoding=utf-8
import subprocess
import time
from websocket import create_connection
# 配置远程服务器的IP,帐号,密码,端口等,因我做了双机密钥信任,所以不需要密码
r_user = "root"
r_ip = "192.168.1.10"
r_port = 22
r_log = "/tmp/web_socket.log"   # 远程服务器要被采集的日志路径
# websocket服务端地址
ws_server = "ws://192.168.1.221:8000/websocket/"
# 执行的shell命令(使用ssh远程执行)
cmd = "/usr/bin/ssh -p {port} {user}@{ip} /usr/bin/tailf {log_path}".format(user=r_user,ip=r_ip,port=r_port,log_path=r_log)
def tailfLog():
    """获取远程服务器实时日志,并发送到websocket服务端"""
    popen = subprocess.Popen(cmd,stdout=subprocess.PIPE,stderr=subprocess.PIPE,shell=True)
    print('连接成功')
    ws = create_connection(ws_server)   # 创建websocket连接
    while True:
        line = popen.stdout.readline().strip()  #获取内容
        if line:
            ws.send(line)   #把内容发送到websocket服务端
        print time.time()
if __name__ == '__main__':
    tailfLog()

 

文章最后再解析subprocess.Popen的原理和功能

执行websocket服务端脚本和上面这个websocket客户端采集脚本,再打开用浏览器打开上面的html5页面后,环境就基本部署好了,双websocket客户端连接到websocket服务端中

上面脚本指定的r_log = "/tmp/web_socket.log"日志路径,我们需要生成这个日志文件,并不停地往里面写入日志,这样才能在浏览器中实时显示效果(真实场景中,可以指定服务器某日志,如apache,nginx日志等)

我们在B服务器写一段python代码,然后每隔一秒就往r_log = "/tmp/web_socket.log"日志中写入内容:

python代码如下:

#!/usr/bin/env python
#coding=utf-8
import time
import random
log_path = '/tmp/web_socket.log'
while 1:
    with open(log_path,'a') as f:
        f.write('[%s]   %s \n' % (time.ctime(),random.random()))
    time.sleep(1)

 

2.  使用dwebsocket

实验环境: 

django 2.1

python 3.5

ansible 2.7

dwebsocket 0.5.5

 

参考:   https://www.cnblogs.com/huguodong/p/6611602.html 

 

安装:

pip install  dwebsocket

 

一些方法和属性:

1.request.is_websocket()

如果是个websocket请求返回True,如果是个普通的http请求返回False,可以用这个方法区分它们。

2.request.websocket

在一个websocket请求建立之后,这个请求将会有一个websocket属性,用来给客户端提供一个简单的api通讯,如果request.is_websocket()是False,这个属性将是None。

3.WebSocket.wait()

返回一个客户端发送的信息,在客户端关闭连接之前他不会返回任何值,这种情况下,方法将返回None

4.WebSocket.read()

 如果没有从客户端接收到新的消息,read方法会返回一个新的消息,如果没有,就不返回。这是一个替代wait的非阻塞方法

5.WebSocket.count_messages()

 返回消息队列数量

6.WebSocket.has_messages()

 如果有新消息返回True,否则返回False

7.WebSocket.send(message)

 向客户端发送消息

8.WebSocket.__iter__()

 websocket迭代器

 

 

客户端:

{% extends 'base.html' %}
{% load widget_tweaks %}
{% load staticfiles %}

{% block title %}
<title>游戏脚本上传</title>
{% endblock %}

{% block content_header %}
游戏脚本上传
{% endblock %}

{% block morejs %}
<script>
    $(function() {
        $('#id_log_start').click(function () {
            if (window.s) {
                window.s.close()
            }
            /*创建socket连接*/
            var socket = new WebSocket("ws://" + window.location.host + "/ansible/websocket/");
            socket.onopen = function () {
                console.log('WebSocket open');//成功连接上Websocket
            };
            socket.onmessage = function (e) {
                console.log('message: ' + e.data);//打印出服务端返回过来的数据
                $('#id_log').append( e.data + '\n');
                document.getElementById('id_log').scrollTop = document.getElementById('id_log').scrollHeight  //testarea自动向下滚动
            };
            // Call onopen directly if socket is already open
            if (socket.readyState == WebSocket.OPEN) socket.onopen();
            window.s = socket;
        });

        $('#id_log_stop').click(function () {
            if (window.s) {
                window.s.close();//关闭websocket
                console.log('websocket closed');
            }
        });

    });

</script>
{% endblock %}

{% block onload %}
onload="business_batch_update_dis()"
{% endblock %}


{% block content %}
<section class="content">
  <div class="row">
    <div class="col-xs-12">
      <div class="box">
          <div class="box-header">
            <div class="row">
               <form action="" method="post" class="form-horizontal">
                {% csrf_token %}
                    <div>
                        <div class="col-md-2">
                            <select class="form-control" name="name_game" id="id_game" οnchange="getcenter('{% url 'business:getcenter' %}','{{csrf_token}}')" >
                                <option value="" selected="selected">--选择游戏--</option>
                                {% for i in game %}
                                <option value="{{i.id}}">{{i}}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>

                    <div>
                        <div class="col-md-2">
                            <select class="form-control" name="name_center" id="id_center" οnchange="getarea('{% url 'business:getarea' %}','{{csrf_token}}')" >
                                <option value="" selected="selected">--选择中心--</option>
                            </select>
                        </div>
                    </div>

                    <div>
                        <div class="col-md-2">
                            <select class="form-control"  name="name_area" id="id_area" οnchange="getserver('{% url 'business:getserver' %}','{{csrf_token}}')" >
                                <option value="" selected="selected">--选择大区--</option>
                            </select>
                        </div>
                    </div>

                </form>
            </div>
            <br/>
            <br/>

            <div class="row">
              <div class="col-md-2">
                  <form class="form-horizontal" id="id_batch_update" method="post" action="" οnsubmit="return update_version_check()">
                        {% csrf_token %}
                        <div >
                            <select class="form-control" size="27" id="id_server" name="name_server" multiple="multiple" >
                        </select>

                        </div>
                    </form>
                </div>

                <div class="col-md-10">

                    <div class="row">
                        <label class="col-md-2 " >参数配置:</label>
                    </div>

                    <div class="row form-horizontal">
                        <div class="col-md-3 ">
                            <input name="name_script" type="text" class="form-control" placeholder="src:源文件" required="required">
                        </div>

                        <div class="col-md-3">
                            <input name="name_path" type="text" class="form-control" placeholder="dest:目标路径" required="required">
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-success" type="button" id="id_submit_upload" οnclick="script_upload_check('{{csrf_token}}')">上传</button>
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-success" type="button" id="id_log_start" >查看日志</button>
                        </div>

                        <div class="col-md-2">
                            <button class="btn btn-success" type="button" id="id_log_stop" >停止查看</button>
                        </div>

                    </div>


                    <br/>
                    <br/>

                    <div class="row">
                        <label class="col-md-2 " >执行结果:</label>
                    </div>

                    <div class="row">
                        <div class="col-md-12">

                            <textarea name="content" id="id_result" rows="19" cols="60" class="form-control">
                            </textarea>
                        </div>
                    </div>
                    <br/>
                    <br/>

                    <div class="row">
                        <label class="col-md-2 " >Ansible日志:</label>
                    </div>

                    <div class="row">
                        <div class="col-md-12">
                            <textarea name="content" id="id_log" rows="19" cols="60" class="form-control">
                            </textarea>
                        </div>
                    </div>
                </div>



                </div>

                </div>

            </div>



          </div>

        <div class="box-body">
          <div class="dataTables_wrapper form-inline dt-bootstrap" id="example2_wrapper">

          </div>
        </div>
        <!-- /.box-body --></div>
      <!-- /.box -->
      <!-- /.box --></div>
    <!-- /.col --></div>
  <!-- /.row --></section>
{% endblock %}

 

app 的views

from dwebsocket import  accept_websocket
import subprocess

@accept_websocket
def an_websocket(request):
    if request.is_websocket():
        print('ssssssssssssssssssssssssss')
        print ('socket..............')
        r_log = "/tmp/ansible.log"  # 远程服务器要被采集的日志路径
        # 执行的shell命令(使用ssh远程执行)
        cmd = "/usr/bin/tail -f {log_path}".format(log_path=r_log)
        popen = subprocess.Popen(cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, shell=True)
        while True:
            line = popen.stdout.readline().strip()  #获取内容
            print (line)
            if line:
                # print('进入发送流程.........')
                # for i in line:
                request.websocket.send(line)

            print (time.time())
        # request.websocket.send('a')

    else:
        return HttpResponse('点个赞')

 

app 的urls.py

 url(r'^websocket/$', an_websocket, name="an_websocket"),u

用的是namespaace+name的方式.

 

出现的问题:

1. 上面查看日志用的是  tail -f 命令。  在 客户端关闭后发现 socket 连接是  CLOSE_WAIT  状态。并且 tail -f 的任务也没有结束。估计的等待 CLOSE_WAIT  状态释放(有待考证).

 

转载于:https://www.cnblogs.com/yitianyouyitian/p/9914056.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值