最近工作在公司有这么一个需求:在公司车间有多台电脑运行着视觉检测程序,我们在办公室的时候需要清楚车间程序的运行状态(比如NG率等等)。
需求分析:多台电脑的数据上传到一台电脑,那么需要一台服务器,上传的数据可以被多个人看到,最好是以网页的形式,谁都可以访问。这个貌似涉及到服务器(后台)、网站(前端),虽然自己平时的工作也算是大杂烩,但是涉及面比较广,还是挺有难度的。
最后得出的方案:在办公室使用一台电脑作为服务器,车间电脑使用http协议上传数据到服务器。然后再写一个简单的网页,访问服务器,返回JSON数据,显示出来。这个网站架设在服务器电脑上,使用Windows自带的IIS。
(一)、IIS设置
进入【控制面板】-【程序】,选中《打开或关闭Windows功能》
打开之后,选中其中两项(红色方框)
点击确定之后,等待几分钟,在C盘目录下生成inetpub文件夹,点击进去,有5个文件夹
等下写好的html文件就放在 wwwroot文件夹下,这时候可以在浏览器中输入自己的IP(或者localhost)来访问,,比如直接输入109.17.86.100回车即可出现网页
注意:第一步我们把网站架设好了,网站内容待会解释哈。
(二)服务器
http服务器可以使用Java编写,但是Windows下.NET平台编写很方便
http服务器作用:保存上传的数据,提供网站访问(我监听了2个端口)
直接贴代码:
<span style="font-size:14px;">using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Windows.Forms;
using System.Net;
using System.Net.Sockets;
using System.IO;
using System.Threading;
namespace Vision_Server
{
public partial class Form1 : Form
{
String[] NGString=new String[39];
String[] FailString = new String[39];
String[] TimeString = new String[39];
Thread uploadThread;
Thread downloadThread;
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
for (int i = 0; i < 39; i++)
{
NGString[i] = "*";
FailString[i] = "*";
TimeString[i] = "*";
}
for (int i = 1; i < 40; i++)
{
dataGridView_AAM.Rows.Add(i.ToString() + "#", "*", "*", "*", "*");
}
//上传数据服务
uploadThread = new Thread(new ThreadStart(uploadPro));
uploadThread.Start();
//下载数据服务
downloadThread = new Thread(new ThreadStart(downloadPro));
downloadThread.Start();
}
private void uploadPro()
{
using (HttpListener listerner = new HttpListener())
{
listerner.AuthenticationSchemes = AuthenticationSchemes.Anonymous;//指定身份验证 Anonymous匿名访问
listerner.Prefixes.Add("http://109.17.86.92:8080/server/");
listerner.Start();
while (true)
{
//等待请求连接
//没有请求则GetContext处于阻塞状态
HttpListenerContext ctx = listerner.GetContext();
ctx.Response.StatusCode = 200;//设置返回给客服端http状态代码
try
{
string pro = ctx.Request.QueryString["pro"];
string line = ctx.Request.QueryString["line"];
string NG = ctx.Request.QueryString["NG"];
string fail = ctx.Request.QueryString["fail"];
printLog(" pro=" + pro + " line=" + line + " NG=" + NG + " Fail=" + fail);
if (pro == "AAM")
{
int lineIndex = int.Parse(line) - 1;
dataGridView_AAM.Rows[lineIndex].Cells[1].Value = NG;
dataGridView_AAM.Rows[lineIndex].Cells[2].Value = fail;
dataGridView_AAM.Rows[lineIndex].Cells[3].Value = DateTime.Now.ToString();
NGString[lineIndex] = NG;
FailString[lineIndex] = fail;
TimeString[lineIndex] = DateTime.Now.ToString();
}
//使用Writer输出http响应代码
using (StreamWriter writer = new StreamWriter(ctx.Response.OutputStream))
{
writer.WriteLine("OK");
//writer.Close();
// ctx.Response.Close();
}
}
catch (Exception ex)
{
printLog(ex.Message);
}
}
listerner.Stop();
}
}
private void downloadPro()
{
using (HttpListener listerner = new HttpListener())
{
listerner.AuthenticationSchemes = AuthenticationSchemes.Anonymous;//指定身份验证 Anonymous匿名访问
listerner.Prefixes.Add("http://109.17.86.92:8888/web/");
listerner.Start();
while (true)
{
//等待请求连接
//没有请求则GetContext处于阻塞状态
HttpListenerContext ctx = listerner.GetContext();
ctx.Response.StatusCode = 200;//设置返回给客服端http状态代码
try
{
int locationY = int.Parse(ctx.Request.QueryString["locationY"]);
//使用Writer输出http响应代码
using (StreamWriter writer = new StreamWriter(ctx.Response.OutputStream))
{
String retString = "";
//返回AAM数据json
retString += "{";
retString += addMarks("AAM") + ":";
retString += "[";
for (int i = 1; i < 40; i++)
{
retString += "{";
retString += addMarks("line") + ":" + addMarks(i.ToString()) + ",";
retString += addMarks("pro") + ":" + addMarks("AAM") + ",";
retString += addMarks("NG") + ":" + addMarks(NGString[i - 1]) + ",";
retString += addMarks("fail") + ":" + addMarks(FailString[i - 1]) + ",";
retString += addMarks("time") + ":" + addMarks(TimeString[i - 1]);
retString += "}";
if (i != 39)
retString += ",";
}
retString += "]";
retString += ",";
retString += addMarks("locationY") + ":" + addMarks(locationY.ToString());
retString += "}";
writer.WriteLine(retString);
writer.Close();
ctx.Response.Close();
}
}
catch(Exception ex)
{
printLog(ex.Message);
}
}
listerner.Stop();
}
}
private String addMarks(String s)
{
return "\"" + s + "\"";
}
private void printLog(String str)
{
CheckForIllegalCrossThreadCalls = false;
if (textBox_log.Lines.Length > 30)
{
textBox_log.Text = "";
}
String time = DateTime.Now.ToShortTimeString();
textBox_log.Text += time+">" + str + "\r\n";
}
private void button_exit_Click(object sender, EventArgs e)
{
uploadThread.Abort();
downloadThread.Abort();
Application.Exit();
}
}
}</span><span style="font-weight: bold; font-size: 24px;">
</span>
界面效果
(三)、web站点
上面的服务器界面只有一台电脑可以显示,为了可以一网页的形式共享,编写一个网页
网页定时刷新,拉去数据到表格中显示
上代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vision监控</title>
<style type="text/css">
.go_no {
background-color: #FF3;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 526px;
top: 91px;
}
.mytitle {
color: #0F0;
}
#AAMTable {
color: #00F;
}
</style></head>
<center>
<body>
<p><strong class="mytitle">AAM 复合化程序监控(自动刷新)</strong></p>
<table id="AAMTable" border="1">
<tr>
<th width="50" align="center" scope="col">line</th>
<th width="100" align="center" scope="col">GO-NO</th>
<th width="50" align="center" scope="col">Fail</th>
<th width="150" align="center" scope="col">time</th>
</tr>
<tr>
<td align="center">1#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">2#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">3#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">4#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">5#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">6#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">7#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">8#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">9#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">10#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">11#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">12#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">13#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">14#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">15#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">16#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">17#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">18#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">19#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">20#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">21#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">22#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">23#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">24#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">25#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">26#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">27#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">28#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">29#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">30#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">31#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">32#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">33#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">34#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">35#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">36#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">37#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">38#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">39#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
</table>
<p> </p>
</body>
</center>
</html>
<script type=text/javascript>
var locationY=50;
function timedGetText(){
locationY=document.getElementById("AAMTable").offsetTop;
var url="http://109.17.86.92:8888/web/?locationY=" + locationY; //服务器地址
var time=400;
var request = new XMLHttpRequest();
var timeout = false;
//访问限时,限时长为200ms
var timer = setTimeout( function(){
timeout = true;
request.abort();
}, time );
request.open( "GET", url );
request.onreadystatechange = function(){
if( request.readyState !== 4 ) return;
if( timeout ) return;
clearTimeout( timer );
if( request.status === 200 ){
//数据返回成功
var obj =JSON.parse(request.responseText ); //将JSON字符串转换成JSON对象
for(var i=0;i<39;i++)
{
var fail=obj.AAM[i].fail;
var NG=obj.AAM[i].NG;
var time=obj.AAM[i].time;
//表格操作
document.getElementById("AAMTable").rows[i+1].cells[1].innerHTML=NG;
document.getElementById("AAMTable").rows[i+1].cells[2].innerHTML=fail;
document.getElementById("AAMTable").rows[i+1].cells[3].innerHTML=time;
}
var retlocationY=obj.locationY;
window.scrollBy(0,retlocationY);
}
}
request.send( null );
}
timedGetText();
function myrefresh()
{ //刷新页面
window.location.reload();
}
setInterval('myrefresh()',2000); //定时刷新页面,2s一次
</script>
网页效果: