Веб-интерфейс состояния портов коммутатора (PHP + jQuery)
07 Jul 2018
Микропроект веб-интерфейса для просмотра состояния портов коммутатора. Предполагается использование PHP и SNMP
SNMP (англ. Simple Network Management Protocol — простой протокол сетевого управления)
протокола для опроса состояния коммутатора. Опрос порта происходит в реальном времени при клике на изображение соответствующего порта. Изображения взяты из оригинального Web-интерфейса коммутатора Cisco Small Business SG200-26.
Для работы данного примера на сервере IIS необходимо включить расширение php_snmp.dll:
[PHP_SNMP]
extension=php_snmp.dll
Также необходимо добавить MIB файлы по пути в переменную PATH
или в каталог по умолчанию (в моем случае это - с:\usr\share\snmp\mibs
). MIB файлы можно взять в пакете Net-SNMP package.
Интерфейс
![]() |
Коммутатор: Cisco SG 200-26 26-Port Gigabit Smart Switch |
![]() Обновить
|
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
Детально
Исходники
index.html
```html
<style>
.smallPortArea200 {
position:absolute;
visibility: visible;
cursor: pointer;
height: 23px;
width: 22px;
}
.smallExtraPortArea52 {
position:absolute;
visibility: visible;
cursor: pointer;
height: 22px;
width: 28px;
}
.smallFiberPortArea28 {
position:absolute;
visibility: visible;
cursor: pointer;
height: 22px;
width: 25px;
}
#chassisDiv img {
vertical-align: unset;
}
</style>
<script src="/assets/js/jquery.min.js"></script>
<script type="text/javascript">
var swModel = "sg200-26";
function refreshAllState() {
for (var i = 49; i < 75; i++) {
clickOnActivePort(i);
}
$('#port-details').load('/examples/cisco-switch/get-snmp-system-descr.php');
}
function clickOnActivePort(port) {
var numPort = 0;
var sw_port = "";
if (swModel == "sg200-26") {
numPort = port - 48;
sw_port = port;
}
var json_url = '/examples/cisco-switch/get-snmp-port-status.php?port=' + sw_port;
$.getJSON(json_url, function (data) {
var strTitle = data.Description + "\n" + data.Label + "\n" + data.Status + "\n" + data.Speed + "\n" + data.Duplex;
$('#img_reg_' + port ).attr({
"title" : strTitle
});
$('#port-details').html(strTitle);
if (numPort < 13) {
if (data.Status == "up(1)") {
if (data.Speed == "1000 Mbps") {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_upper_both.gif');
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_upper_green.gif');
}
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_upper_off.gif');
}
} else if (numPort == 25) {
if (data.Status == "up(1)") {
if (data.Speed == "1000 Mbps") {
$('#img_ext_' + port).attr('src', '/assets/images/cisco/port_small_extra_upper_both.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_upper_both.gif');
} else {
$('#img_ext_' + port).attr('src', '/assets/images/cisco/port_small_extra_upper_green.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_upper_green.gif');
}
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_extra_upper_off.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_upper_off.gif');
}
} else if (numPort == 26) {
if (data.Status == "up(1)") {
if (data.Speed == "1000 Mbps") {
$('#img_ext_' + port).attr('src', '/assets/images/cisco/port_small_extra_downer_both.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_downer_both.gif');
} else {
$('#img_ext_' + port).attr('src', '/assets/images/cisco/port_small_extra_downer_green.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_downer_green.gif');
}
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_extra_downer_off.gif');
$('#img_fib_' + port).attr('src', '/assets/images/cisco/port_small_fiber_downer_off.gif');
}
} else {
if (data.Status == "up(1)") {
if (data.Speed == "1000 Mbps") {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_downer_both.gif');
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_downer_green.gif');
}
} else {
$('#img_reg_' + port).attr('src', '/assets/images/cisco/port_small_downer_off.gif');
}
}
}); //// End getJSON
}
</script>
<div id="chassisHolderDiv" style="width: 720px;">
<div id="chassisDiv" style="position: relative;">
<table width="100%">
<tbody>
<tr>
<td>
<img id="imgPanel_1" style="position:absolute;top:23px;left:0px;" name="zoomElement" src="/assets/images/cisco/SG200-26.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_49" style="top: 37px; left: 327px;" alt="GE1" onclick="clickOnActivePort(49)" title="GE1" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_61" style="top: 59px; left: 327px;" alt="GE13" onclick="clickOnActivePort(61)" title="GE13" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_50" style="top: 37px; left: 351px;" alt="GE2" onclick="clickOnActivePort(50)" title="GE2" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_62" style="top: 59px; left: 351px;" alt="GE14" onclick="clickOnActivePort(62)" title="GE14" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_51" style="top: 37px; left: 374px;" alt="GE3" onclick="clickOnActivePort(51)" title="GE3" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_63" style="top: 59px; left: 374px;" alt="GE15" onclick="clickOnActivePort(63)" title="GE15" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_52" style="top: 37px; left: 398px;" alt="GE4" onclick="clickOnActivePort(52)" title="GE4" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_64" style="top: 59px; left: 398px;" alt="GE16" onclick="clickOnActivePort(64)" title="GE16" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_53" style="top: 37px; left: 422px;" alt="GE5" onclick="clickOnActivePort(53)" title="GE5" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_65" style="top: 59px; left: 422px;" alt="GE17" onclick="clickOnActivePort(65)" title="GE17" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_54" style="top: 37px; left: 445px;" alt="GE6" onclick="clickOnActivePort(54)" title="GE6" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_66" style="top: 59px; left: 445px;" alt="GE18" onclick="clickOnActivePort(66)" title="GE18" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_55" style="top: 37px; left: 471px;" alt="GE7" onclick="clickOnActivePort(55)" title="GE7" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_67" style="top: 59px; left: 471px;" alt="GE19" onclick="clickOnActivePort(67)" title="GE19" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_56" style="top: 37px; left: 495px;" alt="GE8" onclick="clickOnActivePort(56)" title="GE8" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_68" style="top: 59px; left: 495px;" alt="GE20" onclick="clickOnActivePort(68)" title="GE20" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_57" style="top: 37px; left: 519px;" alt="GE9" onclick="clickOnActivePort(57)" title="GE9" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_69" style="top: 59px; left: 519px;" alt="GE21" onclick="clickOnActivePort(69)" title="GE21" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_58" style="top: 37px; left: 542px;" alt="GE10" onclick="clickOnActivePort(58)" title="GE10" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_70" style="top: 59px; left: 542px;" alt="GE22" onclick="clickOnActivePort(70)" title="GE22" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_59" style="top: 37px; left: 566px;" alt="GE11" onclick="clickOnActivePort(59)" title="GE11" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_71" style="top: 59px; left: 566px;" alt="GE23" onclick="clickOnActivePort(71)" title="GE23" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_60" style="top: 37px; left: 590px;" alt="GE12" onclick="clickOnActivePort(60)" title="GE12" src="/assets/images/cisco/port_small_upper_off.gif">
<img class="smallPortArea200" name="zoomElement" id="img_reg_72" style="top: 59px; left: 590px;" alt="GE24" onclick="clickOnActivePort(72)" title="GE24" src="/assets/images/cisco/port_small_downer_off.gif">
<img class="smallExtraPortArea52" name="zoomElement" id="img_ext_73" style="top: 38px; left: 651px;" alt="GE25" onclick="clickOnActivePort(73)" title="GE25" src="/assets/images/cisco/port_small_extra_upper_off.gif">
<img class="smallExtraPortArea52" name="zoomElement" id="img_ext_74" style="top: 60px; left: 651px;" alt="GE26" onclick="clickOnActivePort(74)" title="GE26" src="/assets/images/cisco/port_small_extra_downer_off.gif">
<img class="smallFiberPortArea28" name="zoomElement" id="img_fib_73" style="top: 38px; left: 685px;" alt="GE25" onclick="clickOnActivePort(73)" title="GE25" src="/assets/images/cisco/port_small_fiber_upper_off.gif">
<img class="smallFiberPortArea28" name="zoomElement" id="img_fib_74" style="top: 59px; left: 685px;" alt="GE26" onclick="clickOnActivePort(74)" title="GE26" src="/assets/images/cisco/port_small_fiber_downer_off.gif">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h5>Детально</h5>
<pre style="background-color: #C0D5D5; height: auto;">
<code>
<div id="port-details"></div>
</code>
</pre>
```
get-snmp-port-status.php
```php
<?php
$sw_port = "1";
$sw_addr = "192.168.1.253";
$sw_community = "public";
if (!empty($_GET['port'])) {
$sw_port = (trim($_GET['port']));
}
if (!empty($_GET['sw'])) {
$sw_addr = (trim($_GET['sw']));
}
$session = new SNMP(SNMP::VERSION_1, $sw_addr, $sw_community);
$str_oid_port_descr = "IF-MIB::ifDescr." . $sw_port;
$get_oid_port_descr = $session->get($str_oid_port_descr);
list ($oid_format_descr , $oid_value_descr) = split (': ' , $get_oid_port_descr);
//// Interface Label
$str_oid_port_label = ".1.3.6.1.2.1.31.1.1.1.18." . $sw_port;
$get_oid_port_label = $session->get($str_oid_port_label);
list ($oid_format_label , $oid_value_label) = split (': ' , $get_oid_port_label);
//// Interface Status
$str_oid_port_status = ".1.3.6.1.2.1.2.2.1.8." . $sw_port;
$get_oid_port_status = $session->get($str_oid_port_status);
list ($oid_format_status , $oid_value_status) = split (': ' , $get_oid_port_status);
//// Interface Speed
$str_oid_port_speed = ".1.3.6.1.2.1.2.2.1.5." . $sw_port;
$get_oid_port_speed = $session->get($str_oid_port_speed);
list ($oid_format_speed , $oid_value_speed) = split (': ' , $get_oid_port_speed);
$oid_value_speed = ($oid_value_speed / 1000000)." Mbps";
//// Interface Duplex
$str_oid_port_duplex = "EtherLike-MIB::dot3StatsDuplexStatus." . $sw_port;
$get_oid_port_duplex = $session->get($str_oid_port_duplex);
list ($oid_format_duplex , $oid_value_duplex) = split (': ' , $get_oid_port_duplex);
$json_port_out = '
{
"Description": "'.$oid_value_descr.'",
"Label": "'.$oid_value_label.'",
"Status": "'.$oid_value_status.'",
"Speed": "'.$oid_value_speed.'",
"Duplex": "'.$oid_value_duplex.'"
}';
echo $json_port_out;
?>
```
get-snmp-system-descr.php
```php
<?php
$sw_addr = "192.168.1.253";
$sw_community = "public";
if (!empty($_GET['sw'])) {
$sw_addr = (trim($_GET['sw']));
}
$session = new SNMP(SNMP::VERSION_1, $sw_addr, $sw_community);
$str_oid_system_descr = ".1.3.6.1.2.1.1.1.0";
$get_oid_system_descr = $session->get($str_oid_system_descr);
list ($oid_format_descr , $oid_value_descr) = split (': ' , $get_oid_system_descr);
$session->valueretrieval = SNMP_VALUE_PLAIN;
$ifDescr = $session->walk(".1.3.6.1.2.1.2.2.1.2", TRUE);
$session->valueretrieval = SNMP_VALUE_LIBRARY;
$ifType = $session->walk(".1.3.6.1.2.1.2.2.1.3", TRUE);
$result = array();
$jsonOut = '{ "SystemDescription": "'.$oid_value_descr.'", "ListOfInterfaces": [{';
foreach($ifDescr as $i => $n) {
$jsonOut = $jsonOut.'"'.$i.'": "'.$n.'", ';
$result[$n] = $ifType[$i];
}
$jsonOut = $jsonOut.'}]}';
echo $jsonOut;
?>
```
Полезные OID
- .1.3.6.1.2.1.1.5.0 - sysName
- .1.3.6.1.2.1.1.1.0 - sysDescr
- .1.3.6.1.2.1.1.4.0 - sysContact
- .1.3.6.1.2.1.1.6.0 - sysLocation
- .1.3.6.1.2.1.2.1.0 - число интерфейсов
- .1.3.6.1.2.1.2.2.1.2.
i
- описание интерфейсаi
- .1.3.6.1.2.1.2.2.1.3.
i
- тип интерфейсаi
- .1.3.6.1.2.1.2.2.1.1.
i
- ifIndex - .1.3.6.1.2.1.2.2.1.14.
i
- ifInErrors - .1.3.6.1.2.1.2.2.1.20.
i
- ifOutErrors - .1.3.6.1.2.1.2.2.1.10.
i
- ifInOctets - .1.3.6.1.2.1.2.2.1.16.
i
- ifOutOctets - .1.3.6.1.2.1.2.2.1.13.
i
- ifInDiscards - .1.3.6.1.2.1.2.2.1.19.
i
- ifOutDiscards - .1.3.6.1.2.1.2.2.1.11.
i
- ifInUcastPkts inbound unicast pkts - .1.3.6.1.2.1.2.2.1.17.
i
- ifOutUcastPkts - .1.3.6.1.2.1.2.2.1.12.
i
- ifInNUcastPkts inbound nonunicast pkts - .1.3.6.1.2.1.2.2.1.18.
i
- ifOutNUcastPkts - .1.3.6.1.2.1.2.2.1.15.
i
- ifInUnknownProtos - .1.3.6.1.2.1.2.2.1.21.
i
- ifOutQLen - .1.3.6.1.2.1.2.2.1.5.
i
- ifSpeed - .1.3.6.1.2.1.2.2.1.8.
i
- ifOperStatus (up(1), down(2), testing(3)) - .1.3.6.1.2.1.2.2.1.7.
i
- ifAdminStatus (up(1), down(2), testing(3)) - .1.3.6.1.2.1.2.2.1.8.
i
- ifOperHack (up(1), 0) - .1.3.6.1.2.1.2.2.1.7.
i
- ifAdminHack (up(1), 0)
Ссылки