我尽量长话短说，大家能理解中心思想即可。

事件背景

  公司有国际业务，现有数据中心在UCLOUD 香港，国内和香港的网络掉包严重。所以考虑换数据中心，于是要测现有国内外服务器和供选择的新数据中心的网络情况。主要测试网络时延和丢包情况。这可能有现有工具（如果你们知道请评论留言）1是我懒得去弄zabbix，zabbix应该是可以通过UserParams来收集各个节点到指定IP的网络情况。2主要是我想练一下django，试一下highchart怎么用。因为我本身web前端都不在行，平常都弄运维了。所以就有自己写这件事情。

 

技术思路

  各个节点的服务器运行一个agent.py进行网络情况的收集，并把数据通过web api POST到web服务器上。Web服务器使用django，提供一个收集数据的api，另外提供一个简单的查询页面，把取出的数据用highchart画图。  这个逻辑很简单。最终画出的图是这样的：

随手写个网络通讯情况监控“微系统”_第1张图片

开发前的环境部署：

  Server： ubuntu,django 1.8 ,python 2.7 


技术关键点

  我们从agent到web数据收集，到图形展示的顺序来讲：

   1、agent数据收集，上传。2、服务器接口设计  3、服务器页面展示  4、nginx+uwsgi部署


1、  agent收集&上传数据

   数据收集策略：通过ping –n –c 60  ip 然后获取最终的数据，min/max/avg  loss , ping 60个包约1分钟。即客户端1分钟取一个数据点，并上传给服务端。

以下是agent.py的内容（很粗略，Python刚入门）

import re,urllib2,urllib,datetime

import subprocess,json,time,sys

sourceip = "localip"

dest = sys.argv[1]

postapi = http://serverip/getping

#获取ping的数据并把数据post到指定的服务器api里面，主要通过urllib2来实现。

def Curlpost(web,data):

values =urllib.urlencode(data)

req =urllib2.Request(web,values)

response =urllib2.urlopen(req)

result =response.read()

 

#通过ping来获取具体的网络监测情况。Subprocess的作用是新建一个进程来执行我们提供的命令。然后把进行的输出重定向到PIPE,具体的建议大家自己到网络上去搜。然后从获取的输出out中读取我们需要的东西。这个步骤通过re(正则)模块来完成，具体的功能同样建议到网络搜索。主要功能是通过正则表达式来匹配出我们需要的内容如匹配数字123.123 \d+\.\d+ ,我比较少使用正则一些复杂的不会使用。（如果有人有去测试的话，有比较好的匹配方法，请留言）


def getpingdata():

try:

ping = subprocess.Popen(["ping", "-n", "-c60", dest], stdout=subprocess.PIPE, stderr=subprocess.PIPE)

out, error = ping.communicate()

if out:

data={}

#通过re，正则来匹配出我们想要的内容。以后的data[]=m[x] 就是取出具体的哪些数据。

m=re.findall(r"\d+\.\d+",out)

a=re.findall(r"\d+\%",out)

data['min']=m[-4]

data['avg']=m[-3]

data['max']=m[-2]

data['loss']=a[0].split('%')[0]

#此处获取当时的时间搓，并通过time生成当天的日期和时间，这三个数据都会存放在服务器上。

t=time.time()

data['time']=t

data['day']=time.strftime("%Y-%m-%d",time.localtime(t))

data['hour']=time.strftime("%H:%M:%S",time.localtime(t))

#存储源IP和目标IP

data['destip']=dest

data['sourceip']=sourceip

#所有需要的数据都装到data{}里面了。

returndata

else:

print 'Noping'

except:

print "no data"

#无限循环来进行获取，提交数据。

while 1:

data = getpingdata()

Curlpost(postapi,data)


2、  服务器接口设计

服务器端通过django实现，数据存在MySQL中。

2.1环境准备

#apt-get install python-dev python-MysqlDB  django

 

#wget https://www.djangoproject.com/download/1.8.7/tarball/

# tar –zxvf  Django-1.8.7.tar.gz

#cd  django-1.8.7

#pythonsetup.py install

#可能需要安装setuptools


#Python

> import django  #测试django已经安装完成

#说明这里django我是跟着官文一步一步跟着学习，实践它本身的例子。所以这里的app和官文一样用polls，我也懒得换。

#创建djnago项目

#cd /data

#django-admin startproject dos  #会帮我们自动穿件一个dos目录。

#创建app

#django-adminstartapp polls

接下来要做的步骤是，设置数据库连接参数，同步数据库，测试django是否可以运行，在setting配置静态模模板template路劲，激活polls app 。

#设置数据库连接  编辑setting.py

#在INSTALLED_APPS 添加polls

静态模板设置：

随手写个网络通讯情况监控“微系统”_第2张图片

数据库设置：

随手写个网络通讯情况监控“微系统”_第3张图片

#进行数据库同步

#cd /data/dos/

#python manage.py makemigrations

#python manage.py migrate

#以上两部完成后django会自动帮我们创建出相应的一些初始化的表，可以在库中看到。

以上基本的环境准备完毕，开始设计我们的数据存储的表（model）和我们具体的接口（view）

#如果大家对django不熟悉，就阅读下文档。https://docs.djangoproject.com/en/1.8/  这个有几个part，总的6的看完就可以写。


2.2 服务端接受数据的接口设计：

数据表model.py 

#这些字段都很好理解，IP，ping的数据，agent数据的采集时间点。（分为日期，时间，时间戳）具体出现的datatime，time大家自行实践都能明白。

class PingData(models.Model):

   sourceip = models.IPAddressField(null=True)

   destip = models.IPAddressField(null=True)

   min = models.FloatField(default=1)

   max = models.FloatField(default=1)

   avg = models.FloatField(default=1)

   loss = models.IntegerField(default=0)

   day = models.CharField(null=True,max_length=50,default=datetime.datetime.now().strftime("%Y-%m-%d"))

   hour =models.CharField(null=True,max_length=50,default=datetime.datetime.now().strftime("%H:%M:%S"))

   time = models.FloatField(null=True,default=time.time())

 


接受数据的接口views.py，这样我们的客户端上传上来的数据就已经能够存到数据库中了。

@csrf_exempt

def getpingdata(request):

  if request.method == 'POST':

   data=request.POST

   datamode =PingData(min=float(data['min']),max=float(data['max']),avg=float(data['avg']),sourceip=str(data['sourceip']),destip=str(data['destip']),loss=int(data['loss']),day=str(data['day']),hour=str(data['hour']),time=float(data['time']))

   datamode.save()

 return HttpResponse("OK")



3、服务器页面展示

 

前端页面用bootstrap简单的做了个，通过ajax来请求后端web的接口然后在前端页面进行highchart画图。


3.1 jquery获取前端页面的数据，通过ajax POST给后端的api接口，其中我用了一个bootstrap的时间插件，这个插件用法可以自行查看文档。http://www.htmleaf.com/jQuery/Calendar-Date-Time-picker/201503041458.html

wKioL1ZX70ySNeL5AAAlVLz3mzc447.png

设定时间插件的显示格式

   


3.2 通过jQuery+ajax+highcha来完成前端页面数据的获取提交，并从服务端请求数据，完成highchart的展示

timejs.html：

 

     

     

 

 

      Dest IP

     

 

 

   

   

   

   

   

 

 

   

   

   

   

   

 

 


   

   

 

#  定义两个highchart对象.

Highchart的话请参考此链接http://blog.csdn.net/splendid_java/article/details/9186681


#当我们按查询的时候会触发这段js代码：（js代码更是现搜现用，忘大家帮改善）

 


 

基本上到此所有的功能就基本上都实现了。

4、部署Nginx+uwsgi

参考http://uwsgi-docs.readthedocs.org/en/latest/WSGIquickstart.html官网

或者自强学堂的部署文档也是很详尽简单，再次不多累述